フロントエンド開発の事前準備・制作ツール3選

マークアップ用エディタを準備する

エディタは、フロントエンド開発用にコードカラーリングが可能なものであれば何でもOK

エディターのオススメは以下のとおり。

  1. ビジュアルコードエディター
  2. ATOM
  3. SublimeText

インストール直後は日本語になっていないので、別途日本語の言語パック(プラグイン:拡張機能)をインストールして日本語化しておくとベスト

雛形のHTMLを準備する

自分でイチからコードを書く場合は、以下コードなどを準備しておく。

 <!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Document</title>
  </head>
  <body>

  </body>
</html> 

レスポンシブ対応の記述viewportの重要性

レスポンシブ用の雛形として一番重要なのは「viewport」の記述となる。

<meta name="viewport" content="width=device-width,initial-scale=1.0">

viewportの記述がないことで、スマホ用ブラウザは画面幅を980px相当とみなして表示する

360~375px幅しかないスマホ画面に「980px」の表示をすることとなるので、画面が縮小表示されてしまうことになる。

そのため、スマホ表示を検討したマークアップでは基本的にviewportでcontent="width=device-width,initial-scale=1.0"と記述する。

レスポンシブに対応するベースCSSを利用する

リセットCSSを使ってフロントエンドの制作を進める。

リセットCSSとは、

  • ブラウザ間の初期値の違いやバグを吸収して表示を統一する
  • 各要素の初期値を必要に応じて変更してコーディングしやすくする

といったことを目的としたCSSのこと。

  • HTML5 Doctor
  • Normalize.css
  • sanitize.css
  • ress.css
  • modern-css-reset

といった様々なCSSが存在している。

box-sizingの設定の統一

  • padding、borderを除いた純粋なコンテンツ領域のことをcontent-boxと呼ぶ。
  • padding、borderも含めたボックスの可視領域全体をborder-boxと呼ぶ。

初期状態では各要素(ボックス)のサイズであるwidth、heightはcontent-boxのサイズで計算する。

しかし、box-sizingの値をborder-boxに変更することで、width・heightのサイズ計算対象をborder-box領域に変更することが可能となる。

Webページ作成に必要なツール3選

ウエブページを作成するために、必要な最低限の機能を備えたアプリケーションを紹介する。

1. テキストエディタ

HTMLやCSSファイルの編集にはWindowsやMacにデフォで付属している

  1. メモ帳(Windows)
  2. テキストエディット(Mac)

といったアプリケーションを使ってマークアップを行う。

要素がカラー分類されるVSCode・ATOM・SublimeTextなどもオススメ

2. 画像編集ツール

画像編集用のアプリケーションがあると何かとベンリ。代表的なものは以下。

  • Adobe Photoshop

近年はブラウザで編集できるツールも出回っているので、本格的な画像編集でなければ以下ツールでも十分事が足りる。

  • Canva(Web画像編集ツール)
  • Photopea(Photoshopの簡易版みたいなやつ)

特にCanvaは優秀。Photoshopと違って初心者でもツールの使い方を学習しなくても使える。

PhotopeaはPhotoshopの簡易ブラウザ版。Photoshopよりできることは圧倒的に少ないけど、触りやツールの使い方が学べる。

使っておいて損はない。

3. FTPツール

メモ帳やテキストエディットで作成したマークアップ文章をインターネット上に公開するには、データ一式をウエブサーバー上へ転送する必要がある。

データ転送を行うアプリケーションが、「FTPツール」である。主なFTPツールは以下のとおり。

  • FFFTP(Windows)
  • FileZilla(Windows・Mac)
  • Cyberduck(Windows・Mac)

すべて無料で使えるツールだが、OYAKUNが使ってるのはFileZillaだけ。(単純にMacからWindowsPCへ移行しても作業性が変わらなかったから。)

それぞれを使ってみて、自分に合ったFTPツールを見つけてほしい。

  • この記事を書いた人
  • 最新記事
oyakun

OYAKUN

40代3児のパパ。小企業のWeb担なんでも屋。趣味はジョギングとばどみんとん。はしゃぎすぎて骨折5回(左肘・両足首・鎖骨・右手首)経験済み。最近やっとウィスキー飲めるようになりました。