izumi yamamoto works

山本和泉の活動に関する情報をまとめています

わたしの『HTML+CSS入門編』レジメ

f:id:izuizudapyon:20210425203713p:plain

東京 小伝馬町にある「JaGraプロフェッショナルDTP&Webスクール」で行っている「HTML+CSS入門講座」の内容についてお問い合わせをいただくことがあるので、はずかしながらレジメを公開してみます。

※間違っている表現などがあるかもです。その場合はお手やわらかに教えていただけると助かります...

講座概要

対象受講者

ウェブそのものの知識はないのに、サイトの更新や運用をしなければならなくなってしまった方

  • HTMLやCSSを見たことない/さわったことない
  • なんとなくみようみまねでさわっている

目的

  • そもそもの「ウェブのしくみ」を通じて、必要な基礎知識やファイルなどの解説と、HTMLとCSSのしくみを知るベース作り
  • 細かい技術的な解説は次の段階と考え、入門編は「そもそもの”ウェブ”の基礎知識」をメインにする
  • ウェブアクセシビリティのきっかけづくり
  • ウェブそのもののきっかけづくり

到達目標

  • ウェブページのしくみを知る
  • HTMLの基本を知る
  • CSSの基本を知る
  • HTMLやCSSの書籍やブログ記事がなんとなく読めるようになる
  • 「見出し」と「文章」「画像」の『情報の概念』を知る

講座時間

約6時間を想定(1日講座)

目次

ウェブの基礎知識編

ウェブのしくみ
  • ウェブはインターネットを利用して情報を発信したり閲覧したりするしくみ
  • ウェブはサーバーの中に保管されている
ウェブページとウェブサイトの違い
  • ウェブページ
  • ウェブサイト
ブラウザーについて 
  • 種類
  • シェア
ウェブページを構成しているもの
  • テキスト
  • 画像
 ウェブページはHTMLでできている
  • ブラウザーはhtmlファイルを表示している
  • トップページはindex.html(入力がなければindex.htmlが表示される)
ウェブページにつかうファイル

データファイル

  • HTMLファイル(ブラウザーに情報を表示させる、また、インターネットに情報を伝えるためのファイル
  • CSSファイル(ブラウザーに表示させた情報の見た目を作るファイル)

※HTML+CSS入門編では、JSの話はおまけで少しする

画像ファイル

  • GIF(256色)
  • JPEG(1677万色)
  • PNG(8ビット・24ビット両方使える)
  • SVG

各ファイルの違いの解説

ウェブサイト制作の流れ(ざっくり)

HTMLとCSSは最後のブラウザーに表示させるための技術で、それまでの準備があることを解説

  1. 目的やテーマを決める
  2. 掲載する内容を決める
  3. ウェブページを組み立てる(サイトマップ)
  4. 原稿と画像を準備する
  5. デザイン案を考える
  6. サイトフォルダーを準備する
  7. HTMLマークアップ
  8. CSSコーディング
  9. 完成
エディターソフトについて
  • 半角全角スペースが表示される設定をおすすめ
ファイル名
  • 半角アルファベット数字
  • アンスコ、ハイフン
拡張子
  • .html
  • .css

HTML

HTMLの基本

  • Hyper Text Markup Languageの頭文字をとってHTML(インターネットの情報にしるしをつける言語)
  • 半角入力
  • 「タグ」をつかってしるしをつける
  • 「開始タグ」「終了タグ(/)」を使って情報の「いれもの」をつくり、そのなかに文字や画像の情報を入れる
  • すでに準備しているテキスト原稿に、しるしをつけていく(制作手順の話に一度戻る)
  • 要素名はおまじない語ではなく、該当する英単語の頭文字をつかっている
準備
  • あらかじめ用意しているトップページ用のテキスト原稿(.txtファイル)をテキストエディターで開く
  • .htmlにファイルを保存しなおす
  • ブラウザーで表示

HTMLマークアップの基本

見出し<h*>

heading(ヘッディング)

段落<p>

paragraph(パラグラフ)

テキスト情報の基本は「見出しと段落」なので、原稿作成時に見出しと段落を意識することが重要(制作手順の話にもう一度戻る)

リスト
  • Unordered List(アンオーダードリスト):番号なしリスト
  • Ordered List(オーダードリスト):番号付きリスト
  • List Item(リストアイテム):リストの項目
 連絡先<address>

address(アドレス)


テキスト原稿でタグで囲まれていない(入れものに入っていない)文字列がないことを確認する。

※ブロックレベルの話は入門編ではやらない


改行<br>

break(ブレイク)

  • 見出しや段落内で強制的に改行したいときに入れる
  • 空要素(入れ物ではない)
  • 文章の途中では使わない(スマホとPC表示で確認)
強調*1重要<strong>

strong(ストロング)

  • テキストの一部を強調して伝えたいときに使う
  • 使いすぎ注意
  • <em>(emphasis)についてもちらっと*2
画像<img>

image(イメージ)

  • あらかじめブラウザーに表示させたい画像を準備しておく(トリミング・色調整・サイズ調整)サイトフォルダーの画像用のフォルダーに格納しておく(制作手順の話にもう一度戻る)
  • 空要素
  • src(source:元)で、画像の保存先を指定
  • alt(alternative text:代替テキスト)で、代わりとなる文字列で設定→altのあれこれを熱く説明
  • 画像はテキストと同じ「情報」なので<p>や<h*>などのタグの入れ物に入れる(はだかにしない)

☆しれっと著作権の話

☆しれっとスクリーンリーダーで読ませて、見出しやリスト、代替テキストをちゃんとすることで音でも情報を伝えることができることを強調

 

リンク<a>

anchor(アンカー)

  • オプション属性(href:hypertext reference)でリンク先を指定
  • 同一ウェブサイト内リンク※入門編ではルートの話は基本的にざっくり
  • 外部サイトリンク→ブラウザーで外部リンク先をあらかじめ表示させ、存在を確認したあとURLをコピペする(手入力はしない)

HTML の基本構造

HTMLファイル
  • body要素(ブラウザーに表示させる情報)
  • head要素(ブラウザーに表示させないけど必要な情報:タイトルや言語など)
  • title要素(ページのタイトル。ブラウザーのタブやGoogle検索結果のタイトルなど)
  • html要素(head、bodyをまとめて、ひとつの情報として梱包する)

ファイル情報

文書型宣言
  • HTML4.01
  • XHTML1.0
  • HTML5 *3Living Standard(HTML5)

ざっくり歴史

各バージョンのサンプル例(HTMLファイルの1行目を確認)

文字コード
  • shift-jis
  • utf-8
  • euc-jp

ざっくり解説

現在運用しているページに合わせる

文字化けの原因のひとつ

CSS

CSSとは

CSS とは Cascading Style Sheet の略称

※カスケードの解説は入門編ではやらないのでざっくり概要だけになるけど

  • ブラウザーに表示したHTMLファイルの情報に対して、文字の大きさを変えたり色をつけたり余白をつけたりなど「見た目に関するデータ」。
  • 情報をHTML、見た目をCSSで管理する

CSSの基本

  • セレクター:スタイルを設定する場所。基本的にHTMLタグを指定。
  • プロパティ:どのようなスタイルにするかを設定(色を変えたい、大きさを変えたいなど)
  • バリュー:プロパティに対して値を設定(赤、50pxなど)
記述のルール
  • プロパティとバリューの間に「:(コロン」、バリューの後ろに「;(セミコロン)」
  • プロパティとバリューを「{}(中括弧)」で梱包。セレクターを前に記述。

HTMLのおさらい

CSSの練習のためのHTMLファイルを作成

<html>
<head>
<title>練習1</title>
</head>
<body>
<h1>おはよう</h1>
<p>こんにちは</p>
</body>
</html>

CSSファイルを作成

  • 新規作成でCSSファイルを作成
  • CSSファイルをHTMLファイルに関連づける
    • <link href="**********.css" rel="stylesheet" type="text/css">

文字の大きさを変える

プロパティ:font-size

「こんにちは」の文字サイズを50pxにかえるには?

p {

 font-size:50px;

}

バリュー値を 50px から、100px や 500px、1000px など数値を変えて、バリューを変えるとブラウザーの表示が変わることを確認。

文字の色を変える

プロパティ:color

1つのセレクターに、複数のプロパティ・バリューのセットを組み合わせることができる。

p {

font-size:50px;

color: #ff0000;

}

※ここで、セミコロンやコロンの使い方や、記述のルールを再確認する。

単位と色について

単位
  • ピクセル
  • em

※入門編ではこれだけ

  • RGB(光の三原色)
  • RGBそれそれ明るさの濃淡256階調
  • 256*256*256=16,777,216​(画像のJPEGのところに一度戻る)
  • 16進数のお話
  • #をつけて表現

デフォルトスタイルシート

  • あくまでも「仮」のスタイル。重要なのはしっかり意味のあるマークアップ。
  • 見た目はあとからCSSで調整する
デフォルトスタイルシートの例
  • body
  • h1,h2
  • p
  • a
  • address
  • strong

など

HTML と CSS の関係性

  • HTMLファイルごと(1ページごと)にCSSファイルを作成するのではなく、1つのCSSファイルをそれぞれのHTMLファイルに関連づける。
  • 各HTMLファイルのマークアップとCSSファイルを確認し、HTMLのマークアップはサイト全体を考慮して各ページのマークアップをする。
  • HTMLで同じ意味合いのマークアップをすると、CSSで共通のデザインを管理することができる

背景のスタイルを設定

ページ全体の背景を変えるときのセレクターを考える

  • background-color
  • background-image: url( ファイル名 );
  • background-repeat
  • background-position

ボーダー

border:太さ 種類 色;

border-top、border-right、border-bottom、border-left

他のCSSに変えてみる

  • あらかじめ準備していたがっつりCSSファイルに差し替えて、表示をがらっと変える
  • 情報(HTMLマークアップ)は触っていないことを確認

ウェブはだれもがアクセスできるもの

ティム卿の言葉をかりて、ウェブってのお話をあらためて。


以上です。

最後に内容意図的な

これをみて「あれはやらないのか?」「これはやらないのか?」と思う方も多いかもしれません。

その前に「HTML+CSSの講座なのに、しくみやブラウザーの話からするの?」と驚かれることがとても多いです。

15年以上、HTMLとCSSの入門編の講座して気づいたのは、そもそものウェブのしくみや制作手順、必要なデータや基礎知識を知らない方がほとんどということでした(質問もとても多いです。)。

講座中も「いま自分がなにをしているのか、このあと仕事でどう自分がどうしたらいいのか」というのをイメージしてもらえるように「用語の解説と使い方」も重要だと思っています。

ウェブって「ウェブはだれでもがアクセスして情報を発信したり受け取ったりできるもの」という大前提をしっかり伝えることが、入門編でのポジションだと思っています。

この入門編の知識をもって、ようやく「いわゆるマークアップ」の学習のスタートだと思っていますし、ようやく書籍やブログ記事になにが書いているのかを理解できるように(自習できるように)、ということも裏テーマにいれています。

実際、アンケートでも

  • いままで誰に聞いたらいいのかわからなかったことを知れた
  • そういうことだったのか

という回答をいただいたり、入門編の次の講座にいらした方からも「やっと会社のページの意味がわかりました」とお声がけいただいたりして、この「そもそもを伝える」重要性を実感しています。

とはいえ、このようなレジメを公開するのが初めてて、レジメ内で間違っているところがあるかもしれませんので、そのときはお手柔らかに教えてもらえるとうれしいです(最後にもう一度)。

*1: 2022/2/26 強調から重要に修正

*2:2022/2/26追記

*3:2022/2/26 HTML5からLiving Standardに修正