はじめてのHTML・CSS講座(1日目)

この記事は受講者生向けコンテンツです。(受講していない方もご覧になれますが一部授業内での解説を行うため割愛しているものも含まれることをご了承ください)
はじめてのHTML・CSS講座(全4回講座)の1日目の授業内容です。

Bracketsの使い方

作業フォルダを開く

作業フォルダとはウェブサイトに必要なhtmlファイルやcssファイルの入ったフォルダです。
ExcelファイルやPhotoshopのファイルなどのように、1つずつファイルをアプリで開くのではなく、Bracketsではフォルダを開くという使い方をします。

「メニューバー」 → 「ファイル」 → 「フォルダーを開く」
という方法か、もしくはFinderで該当のフォルダを、DockのBracketsアイコンにドラッグする、という方法で開きましょう。

Mac で Dock を使用する(MacOSユーザーズガイド) https://support.apple.com/ja-jp/guide/mac-help/mh35859/mac

作業フォルダ(上記の図では[www]フォルダ)には、上の図のように、ウェブサイトに必要なファイルやフォルダが入っています。

有機野菜販売のウェブサイトを作成しながらHTML・CSSを学ぶ

教材として「有機野菜を販売している会社のウェブサイト」を作成しながらHTMLとCSSの超基礎編をマスターしましょう!

完成サンプル:https://kuru-web.com/lesson-data/yuukiyasai-first/

HTMLを記述する

教材フォルダ内の[day1]フォルダをBracketsで開きます。

index.htmlの<body>内に、HTMLのコードを記入していってみましょう。
※開始タグ<body>と終了タグ</body>の間に記入するという意味です。
Bracketsの左側の[index.html]をダブルクリックしてください。「作業中ファイル」と書かれた部分にindex.htmlが表示されました。

ではさっそくHTMLを書いていってみましょう!

サイトの上部の部分から作成します。

デザインカンプ(完成見本図)のヘッダー部分は下記のように仕上がっています、同じように見えるようにコーディングしていきます。
「箱」をたくさん作るイメージで、マトリョーシカのようにどんどん内側に入れていきます。

ヘッダー部分
<body>
   <!--ヘッダー-->
   <header>
      <div class="header_inner">
         <h1><img src="images/logo.png" alt="有機野菜ドットコム"></h1>
         <div class="header_info">
            <p>営業時間:9:00〜18:00</p>
            <p>電話番号:000-0000-0000</p>
         </div>
      </div>
   </header>
   <!--ヘッダーここまで-->
</body>
ワンポイント

画像を入力するときに「img と記入して [tabキー]を押す」という方法を取りましょう。これはBracketsに入れた拡張機能の「Emmet(エメット)」の機能です。これを活用することで、記述ミスが無くなります。

上記が書けたら、Bracketsの右上部にある雷マーク「ライブプレビュー機能」を利用してChromeで確認してみましょう。

※Finderからindex.htmlをChromeで開いても同じものが見えますが、HTMLを編集したものがリアルタイムで反映されるのはBracketsのライブプレビュー機能です。

現時点ではデザインカンプとは程遠い見た目ですね。HTMLでコンピューターへ中身を伝えるための作業「HTMLコーディング」をしました。
次は、CSSで人が見てもわかりやすいように、デザインカンプを同じ見た目になるように整えていきましょう。

CSSを記述する

CSSはセレクタを指定し、プロパティに対して値を設定します。

配布している「style.css」に元々記載しているCSSの続きに書いていきます。

header {
    border-top: 4px solid #1c9757;
}

.header_inner {
    width: 960px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    justify-content: space-between;
    padding: 20px 0;
}

.header_info {
    font-size: 18px;
}

Emmet・Bracketsの機能を存分に活用する

Brackets(もしくはMac全体)で、よく使う操作やショートカット

ショートカット
コピー[Command] + [C]
ペースト[Command] + [V]
カット(切り取り)[Command] + [X]
ダブルクォーテーション内を一括選択ダブルクォーテーション内でダブルクリック(2回連続のクリック)
1行を全部選択トリプルクリック(3回連続のクリック)

Bracketsの機能に頼ってミスを減らす

HTMLやCSSを書くときに、Bracketsはヒントをくれます。そのコードヒントに頼って書きましょう。
例えばこう書きたいとき。

display: flex;
justify-content: space-between;

なんだかスペルを間違えそうですし、はじめて書くのでそもそも間違えているかもわかりませんね。
そんなときに最初の「dis」くらいまで書くともうヒントが出てきます。

プロパティのヒントが出てきたら、矢印キーで該当のものを選んで[return]を押すと、次は値の候補が出てきます。

Bracketsのコードヒント

よく再度質問されること

先生、CSSで色を変えるのってどうやったらいいんでしたっけ?

今のカラーコードの上で [Command] + [E]カラーピッカーが出て、好きな色を選べる

先生もうひとつ、コメントにするのって何でしたっけ?

コメントアウトしたい行のどこでも良いのでカーソルを置く→ [Command] + [/](スラッシュ)各言語に合わせたコメントアウトが記述される。再度ショートカット操作を行うとコメントアウトを解除できる。

復習

1日目の授業で使用したHTML

HTMLタグ内容
headerウェブサイトの導入部分をグループ化するタグ
文書のヘッダ情報を表す<head>タグとは別のものなので注意
h1大見出し。<h1>・<h2>・<h3>タグは全て見出しですが、
数字が大きいほど上位の見出しになります(ほんの目次などを想像するとわかりやすい)
img画像を読み込むタグ
ファイルまでの行き先(パス)をsrc=””のダブルクォーテーションの中に書きます。
またalt=””のダブルクォーテーションの中には画像の説明を書きます。※終了タグは無い。
書き方例
<img src=”images/logo.png” alt=”画像の説明“>
divグループ化するタグ。
たとえばmainvisualなどというタグはHTMLには存在しないので、そういった用途で外側の箱を作りたい時に重宝する汎用性の高いタグです。
p段落をあらわす。主に文章を書くのに使用します

1日目の授業で使用したCSS

CSSプロパティ
displayflex
子要素を横並びに配置
justify-content
コンテナ内全体の横方向の揃え位置を指定する
space-between
各アイテムを均等に配置、最初を先頭に寄せ最後を末尾に寄せる
padding20px対象の内側の余白
border-top4px solid #f8ef0e上に4pxの実線を緑色で表示
font-size18px文字のサイズを18ピクセルに
color#1c61ce文字の色を#1c61ceに(このカラーコードだと、青色)
スキルアップ先生

どうでしたか?
何度も復習してまずはタイムトライアルしてみましょう!
ではここで、HTMLのオススメ本をご紹介!