マークアップ用エディタを準備する
エディタは、フロントエンド開発用にコードカラーリングが可能なものであれば何でもOK。
エディターのオススメは以下のとおり。
インストール直後は日本語になっていないので、別途日本語の言語パック（プラグイン：拡張機能）をインストールして日本語化しておくとベスト。
雛形の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（作成中...）
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にデフォで付属している
- メモ帳（Windows）
- テキストエディット（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ツールを見つけてほしい。
