前回はデベロッパーツールの必要性についてお話ししました。

今回はデベロッパーツールとテキストエディタを用いた、効率的なウェブサイトの制作方法についてお話していきます。

HTMLはテキストエディタ、CSSはデベロッパーツールを使用

HTML/CSSは次の手順で作成します。

1. テキストエディタでHTMLを作成
2. ブラウザにHTMLを読み込み、デベロッパーツールでCSSを作成
3. デベロッパーツールで作成したCSSをテキストエディタにコピー

3の「デベロッパーツールで作成したCSSをテキストエディタにコピー」について簡単に手順を説明します。

デベロッパーツールで作成したCSSをテキストエディタにコピーする方法

1.デベロッパーツールの要素タブからスタイルを当てたいタグを選択

2.デベロッパーツールのスタイルタブから新規スタイル（＋ボタン）を追加

3.スタイルを記述

↓

4.作成したスタイルを右クリックし、「ルールをコピー」を選択

5.テキストエディタに切り替え、CSSファイルに貼り付けて保存

以上が手順となります。

POINT：親要素からスタイルを作成しましょう！

CSSをデベロッパーツールで作成するメリット

ここではメリットを3つ紹介します。

1.プロパティをフルスペルで入力しなくても、予測変換で入力できる

2.プロパティの追加・削除、値の変更がリアルタイムで確認できる

⇅キーもしくはマウスミドルボタンで値を±1。＋Shiftキーで±10。＋Ctrlキーで±100。＋Altキーで±0.1。

3.作成したスタイルをコピーできる

デベロッパーツールで特定の親要素内のみスタイルを適用する方法

デベロッパーツールでスタイルを当てたい要素を選択すると共通のスタイルになってしまうので、特定の親要素内のみスタイルを適用する場合は次のようにします。

1.親要素を選択し、親要素のスタイルを新規作成

2.宣言部分が選択されている状態になるので、そのまま親要素名の後ろに目的の要素名を入力

学校に適したHTML/CSSの開発環境とは

HTML/CSSの開発環境は企業や人により多種多様で、効率のよさや管理のしやすさを求め、日々試行錯誤が続いています。

代表的な開発環境としては以下のものがあります。

これを見て、「なるほどね」とか「いや、こっちの方がいいよ」と思われた先生はウェブ開発の現場経験のある先生、システム開発に携わっていた方くらいだと思います。

多くの先生は「使っているもの、知っているものもあるけど、知らないものもあるぞ」「うわ！まったくわからない！」だと思います。

なぜなら上記の開発環境は、ウェブサイト開発やウェブサイト管理を行う開発現場の話です。さらに言えば、システム開発・プログラミングを主とした企業の話です。
HTML/CSSを学校で学ぶ学生には必ずしも必要ではありません。

学生が「HTMLを学びたい」「ウェブサイトを作ってみたい」と考えるキッカケは様々ですが、多くの学生は、見た目、つまりデザインがキッカケです。そんな学生にシステム開発現場の環境を強要するのは、学習意欲を削ぐことになりかねません。

それであれば、手軽で効率的なデベロッパーツールを使用しての学習が、一番適しているのではないかと思います。

今回紹介した方法は、学ぶ労力が少なく、システム系学科・デザイン系学科どちらの学生でも理解しやすい開発環境ではないでしょうか。

連載：ウェブサイト制作者は習得せよ！デベロッパーツールのススメ
全ての記事はこちら

この記事を書いた人

星野 和貴

専門学校講師を経て、ウェブ制作会社、デザイン会社勤務。
ウェブディレクションを担当。
講師経験が長いため、文章を書くより、しゃべるほうが得意ｗ