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

htmlcss

はじめてのHTML・CSS講座(全4回講座)の1日目の授業内容です。

準備編

エディタの準備

■Bracketsのインストール
エディタというのは簡単に言うと文字を書き保存できるソフトのことです。
今回はBracketsを使用します、WindowsでもMacでも使用できるエディタです。
http://brackets.io/ ここからダウンロードしてインストールしてください。

ダウンロードしたファイルをダブルクリックするとインストーラが自動的開きますので、画面に表示される指示に従います。Macのアプリのインストールについてはこちら→https://support.apple.com/ja-jp/guide/mac-help/mh35835/mac

■Bracketsの拡張機能をインストール

Bracketsには、コードを書くのをますます便利にしてくれる追加の機能があります。
自分の好きなものを足していけますが、ひとまずはふたつを「拡張機能マネージャー」から追加してください。
※下図参照

拡張機能の検索窓で検索→インストール→「インストール完了」になっていたら成功!

  • Emmet
  • Beautify

共有フォルダの利用

授業ではGoogleDriveを利用して情報を共有します。
※授業で最初にお知らせするURLはブックマークをしておいてください。(毎回使用します)

ブラウザについて

■ブラウザは、Google Chromeを使用します。
Google Chromeが入っていない人は下記URLよりダウンロードしてインストールしましょう。
https://www.google.co.jp/chrome/

ダウンロードしたファイルをダブルクリックするとインストーラが自動的開きますので、画面に表示される指示に従います。Macのアプリのインストールについてはこちら→https://support.apple.com/ja-jp/guide/mac-help/mh35835/mac

その他準備で、重要なこと

パソコンの設定で「拡張子」を表示しておきましょう。

【Mac】Finderを開いた状態で→[メニューバー]→[Finder]→[環境設定]→[詳細]→[すべてのファイル名拡張子を表示]

【Win】エクスプローラーを開いた状態で→[表示]→[ファイル名拡張子]にチェックを入れる

その他、ウェブの作業とは直接は関係ありませんが、Google日本語入力がとても便利です。
タイピングの際変換で違和感を感じる人は入れておくことをおすすめします。
Google日本語入力 https://www.google.co.jp/ime/

実践編

Bracketsの使い方

■作業フォルダを開く
作業フォルダとはウェブサイトに必要なhtmlファイルやcssファイルの入ったフォルダです。

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

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

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

HTMLを記述する

今回はベースの作業フォルダ一式をダウンロードして、その中のindex.htmlの<body></body>の中に、HTMLのコードを記入していってみましょう。※開始タグ<body>と終了タグ</body>の間に挟むということです。
Bracketsの左側の「index.html」をダブルクリックしてください。「作業中ファイル」と書かれた部分にindex.htmlが表示されました。

ではHTMLを書いていってみましょう、サイトの上部の部分から作成していきたいと思います。
デザインカンプ(完成見本図)は下記のように仕上がっています、同じように見えるようにコーディングしていきます。

<body>
    <!--ヘッダー-->
    <header>
        <img src="images/logo.png" alt="有機野菜どっとこむ">
        <div>営業時間:9:00〜18:00<br>
            電話番号:000-0000-0000</div>
    </header>
    <!--ヘッダーここまで-->
    <!--グローバルナビ-->
    <nav>
        <ul>
            <li><a href="">ナビ</a></li>
            <li><a href="">ナビ</a></li>
            <li><a href="">ナビ</a></li>
            <li><a href="">ナビ</a></li>
        </ul>
    </nav>
    <!--グローバルナビここまで-->
</body>

上記が書けたら、Bracketsのライブプレビュー機能を利用してChromeで確認してみましょう。

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

デザインカンプとは程遠い見た目です。HTMLでコンピューターがわかる書き方をした次には、CSSで人が見てもわかりやすいように、デザインカンプを同じ見た目になるように整えていきましょう。

CSSを記述する

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

書き方としては、
セレクタ{
  プロパティ : 値 ;
}
といった書き方をします。

@charset "utf-8";
header{
    display: flex;
    justify-content: space-between;
    padding: 20px;
    border-bottom: 2px solid #f8ef0e;
}
div{
    font-weight: bold;
    font-size: 18px;
    color: #1c61ce;
}
/* CSSのコメントはこのように書きます */

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

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

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


■上記のhtmlを書くときに使えるショートカット

入力する文字、キー
展開されるタグ
header + [tab]<header></header>
img + [tab]
<img src=”” alt=””>
div + [tab]
<div></div>
nav + [tab]
<nav></nav>
ul + [tab]
<ul></ul>
li + [tab]
<li></li>
※書くのは<ul>タグで挟む
書き方の例
<ul>
<li></li>
</ul>
a + [tab]
<a href=””></a>
[Command] + [D]カーソルのある行全てを複製する

■上記のCSSを書くときに…

CSSもショートカットはありますが、まずはコードヒントに頼ってみましょう。例えばこう書きたいとき。

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

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

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

Bracketsのコードヒント

■1日目のCSSを書くときに使ったショートカット

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

復習

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

HTMLタグ意味
headerグループ化するタグ
文書のヘッダ情報を表す<head>タグとは別のもの
img画像を読み込むタグ
ファイルまでの行き先をsrc=””のダブルクォーテーションの中に書きます。
またalt=””のダブルクォーテーションの中には画像の説明を書きます。※終了タグは無い。
書き方例
<img src=”images/logo.png” alt=”画像の説明”>
divグループ化するタグ
navナビゲーション
ul,liリスト
aリンク
書き方例
<a href=”●”>■■</a>
●・・・リンク先URL ■■・・・テキストや画像など
br改行。※終了タグは無い。

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

displayflex
子要素を横並びに配置
justify-content
コンテナ内全体の横方向の揃え位置を指定する
space-between
各アイテムを均等に配置、最初を先頭に寄せ最後を末尾に寄せる
padding20px対象の内側の余白
border-bottom2px solid #f8ef0e下に2pxの実線を黄色で表示
font-weightbold文字を太く
font-size18px文字のサイズを18ピクセルに
color#1c61ce文字の色を#1c61ceに(このカラーコードだと、青色)
The following two tabs change content below.

matsuo

ウェブデザイン講師&制作を行っています。