online class text for web and video

webcordingカテゴリーの共通アイキャッチ画像

Part3 2カラムレイアウト

HTMLとCSSを使用して2カラムのページを作成

ページレイアウト制作実習

  • HTML、CSSを使用したコーディング基本技能

テキスト96P〜139P

セクショニング要素 （構造要素）

テキスト98P〜107P

要素/読み説明
<header>
ヘッダー		通常ページの一番上に配置し、サイトのタイトルやロゴ、ナビゲーションメニューなどの重要な要素をまとめます。ページのテーマや内容を明確にして訪問者が目的の情報を見つけられるようにします。
<main>
メイン		ページの最も重要な情報を記述します。 ページのテーマに直接関連するテキスト、画像、動画などの要素を効果的に配置してユーザーが目的の情報をスムーズに探せるようにします。検索エンジンにとってもmainタグ内のコンテンツはページの主題を明確に示す重要な指標になります。
<footer>
フッター		通常ページの一番下に配置し、著作権情報、サイトマップ、連絡先情報、ソーシャルメディアへのリンクなどを記述するために使用します。footerはページ全体のまとめとして、重要な情報を集約する役割を果たします。
<section>
セクション		ページ内のまとまったテーマを持つコンテンツを区切るために使用する汎用性が高い要素。具体的な意味を持たない要素なので、h1、h2、h3のような見出しを組み合わせる事で内容を明確にします。
<div>タグも意味を持たない要素ですが、主にレイアウト（装飾）目的で使用するのに対し、sectionはコンテンツの構造を明確にするために使用します。
<article>
アーティクル		ブログ記事、ニュース記事、フォーラムの投稿、商品ページなど、ページ内の独立したコンテンツを明確に区別し、構造を整理するために使用します。この要素は他のコンテンツと切り離して表示できるため、article内の各コンテンツはそれぞれ独自の文脈を持ち、必要に応じて再利用や配信が可能です。
<aside>
アサイド		ページメインコンテンツとは別に、補足的な情報や関連情報を表示するために使用します。例えば、サイドバーに表示する関連リンクや参考文献、注釈などが該当します。asideを使って訪問者が関連情報や追加情報を簡単に見つけられるようにします。
<nav>
ナブ
ナビゲーション		サイト内またはサイト外、あるいはページ内コンテンツへのリンクをまとめて配置し、主要なナビゲーションを提供します。navを使用して、訪問者が目的のページやコンテンツに効率よく迅速にアクセスできるようにします。
構造要素一覧

作業の進め方

  • デザインカンプを確認する
  • コーディングの準備をする
    • projectフォルダ作成
    • projectフォルダの中にwork、htmlフォルダを作成
    • workフォルダにデザインカンプなどの素材を保存し、画像ファイルの書き出しを行う
    • htmlフォルダの中にcssフォルダとimagesフォルダを作成する
    • imagesフォルダに書き出した画像を移動又はコピーする
    • cssフォルダにreset.cssを移動又はコピーする
    • Dreamweaverを起動してindex.htmlを作成する
    • style.cssを作成してcssフォルダに保存する

※わからなくなったらコーディングの準備ページで確認して下さい。

HTMLコーディング

開始タグや終了タグを見失う事が多い方は、

<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ページタイトル</title>
</head>

<body>
<!--body start--> 
<!--header start-->
<header>

</header>
<!--end header--> 

<!--main start-->
<main>

</main>
<!--end main--> 

<!--footer start-->
<footer>

</footer>
<!--end footer--> 

<!--end body-->
</body>
</html>

headerエリア

<header>
      <大見出し>
      <nav>
        <リスト>
          <リスト項目><リンク>HOME
          <リスト項目><リンク>ABOUT
          <リスト項目><リンク>BLOG
          <リスト項目><リンク>SHOP
          <リスト項目><リンク>CONTACT

mainエリア

    <div id="flex-wrap">
      <main>
        <article>
          <見出し2>ファームの1日をご紹介します
          <p class="postdate">
            <time datetime="">
              3021年8月8日12時3分

          <段落 class="eyecatch">
            <画像　画像ファイルへの相対パス alt="カピぞうが農園にいる絵">

          <section>
            <見出し3>6:00～ にんじんの収穫と朝ごはん
            <段落>朝は6時ごろに起きています。いつまでも布団にくるまっていたいけれど、えいや！と頑張って起きます。<改行>
　外に出て、まずはおひさまに「おはようございます」とご挨拶。その後、育ったにんじんを収穫します。<改行>
              形が悪いものは、ぼくが朝食として食べています。<改行>
              収穫しながら朝ごはんを済ませられるので、とても効率的なのです！
            <独立した図や画像>
              <画像　画像ファイルへの相対パス alt="形の悪いにんじんの絵">
              <独立した図や画像の説明文>形が悪くてぼくが食べたにんじんさんたち

          <section>
            <見出し3>8:30～12:30 スーパーや道の駅への出荷
            <段落>採ったにんじんを産直店へ運びます。ここが一番の労働かもしれません。<改行>
そろそろリヤカーではなく、電気で動く車を買おうかなと思っているところです。

          <section>
            <見出し3>12:30～18:00 畑作業と夜ごはん
            <段落>にんじんの様子を見ながら、お水をあげたり、虫を駆除したり、カバーをかけたりします。<改行>
今はにんじんがメインですが、将来的にはたくさんの野菜を育てたいので今その準備もしています。

          <section>
            <見出し3>18:30～ お風呂・就寝
            <段落>お風呂にゆっくり入った後、眠ります。お布団の中は天国です。

サイドバーエリア

<aside>
        <nav class="categoryNav">
          <見出し2>Category
          <リスト>
            <リスト項目><リンク>農家の日常(4)
            <リスト項目><リンク>農家のノウハウ(5)
            <リスト項目><リンク>カピぞうレシピ(2)
            <リスト項目><リンク>農家の経営(2)

        <nav class="recentNav">
          <見出し2>Recent Articles
          <リスト>
            <リスト項目><リンク>温室栽培での注意トップ10
            <リスト項目><リンク>虫の駆除方法を現役農家がレクチャーします
            <リスト項目><リンク>お家でもできる！プランター栽培のポイント
            <リスト項目><リンク>簡単にんじん料理をご紹介！
            <リスト項目><リンク>農業って食べていけるの？気になる年収を大公開
            <リスト項目><リンク>はじめまして。カピぞうの紹介です

        <段落>
          <リンク><画像　画像ファイルへの相対パス  alt="オンラインショップバナー">

フッターエリア

    <footer>
      <段落><補足的な情報や、注釈、著作権情報など>© 3021 FARM CAPYZOU

デザインカンプを見ながらノーヒントでチャレンジしたい人用テキストデータ

    【画像：ロゴ（FARM CAPYZOU）】
    HOME
    ABOUT
    BLOG
    SHOP
    CONTACT
    【画像：カピぞうが農園にいる絵】
    ファームの1日をご紹介します
    3021年8月8日12時3分
    6:00～ にんじんの収穫と朝ごはん
    朝は6時ごろに起きています。いつまでも布団にくるまっていたいけれど、えいや！と頑張って起きます。
    外に出て、まずはおひさまに「おはようございます」とご挨拶。
    その後、育ったにんじんを収穫します。
    形が悪いものは、ぼくが朝食として食べています。
    収穫しながら朝ごはんを済ませられるので、とても効率的なのです！
    【画像：形の悪いにんじんの絵】
    8:30～12:30 スーパーや道の駅への出荷
    採ったにんじんを産直店へ運びます。ここが一番の労働かもしれません。
    そろそろリヤカーではなく、電気で動く車を買おうかなと思っているところです。
    12:30～18:00 畑作業と夜ごはん
    にんじんの様子を見ながら、お水をあげたり、虫を駆除したり、カバーをかけたりします。
    今はにんじんがメインですが、将来的にはたくさんの野菜を育てたいので今その準備もしています。
    18:30～ お風呂・就寝
    お風呂にゆっくり入った後、眠ります。お布団の中は天国です。
    Category
    農家の日常(4)
    農家のノウハウ(5)
    カピぞうレシピ(2)
    農家の経営(2)
    Recent Articles
    温室栽培での注意トップ10
    虫の駆除方法を現役農家がレクチャーします
    お家でもできる！プランター栽培のポイント
    簡単にんじん料理をご紹介！
    農業って食べていけるの？気になる年収を大公開
    はじめまして。カピぞうの紹介です
    【画像：バナー】
    © 3021 FARM CAPYZOU

使用したタグ

汎用タグ

  • htmlファイル作成時に出力される基本的タグ
  • 構造タグ(<header> <main> <footer> <section> <article> <aside> <nav>)
  • 見出し(h1~h3)
  • リスト（ul）（li）
  • 段落（p）
  • 画像(img)
  • リンク（a）
  • ブロック汎用タグ(div) テキストP122

その他のタグ

  • 時間（time）　テキストP108
  • 独立した図や画像と説明文（figure）（figcaption）　テキスト109P〜110P
    • figure：画像、イラスト、グラフ、など、文書の本文の流れから参照されるものの、本文の流れに影響を与えることなく、文書のほかの部分や付録に移動することが可能なものに用います。「以下の画像のように」など本文で言及されている画像には使用しません。
      https://developer.mozilla.org/ja/docs/Web/HTML/Element/figure
    • altとfigcaptionの違い：どちらも画像や図の内容を説明するために使われますが、altは代替テキストなので何らかの事情で画像が表示できない場合や、検索エンジンやスクリーンリーダーの為に使用されるのに対し、figcaptionは画像のキャプション（補足説明文）としてページに表示されます。
  • 補足的な情報や、注釈、著作権情報など（small）テキストP111

参考リンク：HTML要素の一覧 https://developer.mozilla.org/ja/docs/Web/HTML/Element

サーバー上の画像が削除された場合や、画像ファイルへのパスが間違っている場合、左のようにaltの内容が表示されます。

ワンポイント

練習コーディングだからコピペ用のテキストを用意しているわけではなく、実務でもデザインカンプからテキストをコピーしてコピペ作業をしています。
コピー＆ペーストを面倒に思う方もいるかもしれませんが、ミスタイプや誤変換を避ける事ができるのでキーボードショートカットなどを使用して効率よくコピペができるようになってください。

CSSコーディング

CSSコメントを使用して整理してコーディングを行うと修正や更新の際に見つけやすくなります。思いつきでバラバラ記述するのではなく何らかの法則で整理しながらコーディングをする癖をつけてください。
下記は私のCSS整理方法ですが、自分流の整理方法が思いつくまでは以下で整理してください。

@charset "UTF-8";
/* CSS Document */

/*===========
common
==============*/
*{outline: auto #AEF3FF;}
body{}
#flex-wrap{}
/*===========
header
==============*/
header{}
/*===========
main
==============*/
main{}
/*===========
side-bar
==============*/
aside{}
/*===========
footer
==============*/

使用したCSSプロパティ

  • background、font、margin、padding、borderはPart2 SNSリンク集を作ってみようを参照
  • width（max-width）（min-width）横幅を指定するプロパティ
  • display:flex; テキスト112P~115P
  • text-decoration テキストP121
  • box-shadow テキスト P125
  • list-style-type テキスト P129
  • overflow テキスト P131
  • display: inline-block; テキスト P133

flex-box

プロパティ読み方説明初期値値補足
flex-directionフレックスディレクション要素の並び方向を指定rowrow: 横方向
column: 縦方向
row-reverse: 横方向（逆）
column-reverse: 縦方向（逆）
flex-wrapフレックスラップ要素の折り返しを指定nowrapnowrap: 折り返さない
wrap: 折り返す
wrap-reverse: 逆方向に折り返す
justify-contentジャスティファイコンテンツ主軸に沿った配置を指定flex-startflex-start: 左寄せ
flex-end: 右寄せ
center: 中央寄せ
space-between: 等間隔
space-around: 周囲に余白を持たせる
align-itemsアラインアイテム全てのアイテムの縦方向の配置を指定stretchstretch: 拡張（デフォルト）
flex-start: 上寄せ
flex-end: 下寄せ
center: 中央寄せ
baseline: ベースラインに揃える
align-contentアラインコンテンツ複数行がある場合の配置を指定stretchstretch: 拡張
flex-start: 上寄せ
flex-end: 下寄せ
center: 中央寄せ
space-between: 等間隔
space-around: 周囲に余白を持たせる
align-selfアラインセルフ個別のアイテムの縦方向の配置を指定autoauto: デフォルトを継承
flex-start: 上寄せ
flex-end: 下寄せ
center: 中央寄せ
baseline: ベースラインに揃える
stretch: 拡張		display: flex;と同じセレクタではなく、子要素に設定。
flex-growフレックスグロウ空いているスペースをどれだけ占めるかを指定0数値（例: 0, 1）空きスペースをどれだけ占めるかを指定。子要素に設定。
flex-shrinkフレックスシュリンク縮小率を指定1数値（例: 1）空きスペースが不足したときにどれだけ縮小するかを指定。子要素に設定。
flex-basisフレックスベーシス要素の基準サイズを指定autoサイズ（例: 100px, 50%）要素の初期サイズ。具体的なサイズを指定できる。子要素に設定。
flexフレックスflex-grow, flex-shrink, flex-basisをまとめて指定0 1 auto例: flex: 1 1 100px;それぞれの値を一度に指定する。子要素に設定。
flex-boxの主なプロパティ

displayプロパティの値

参考URL：https://developer.mozilla.org/ja/docs/Web/CSS/display

値読み方説明
initialイニシャルdisplayプロパティの初期値。要素が持つ元の表示方法　例えば、divやp、hなどはブロック、spanやimg、aなどはinline
blockブロック要素をブロック要素として表示します。
inlineインライン要素は同じ行に配置されます。widthやheightの設定は無視され、テキストなどの内容によってサイズが決まります。marginとpaddingは左右のみ適用され、上下は無視されます。中央寄せにするには親要素にtext-alignプロパティを設定します。
flexフレックスフレックスコンテナとして要素を表示し、子要素をフレックスアイテムとして配置します。
gridグリッドグリッドコンテナとして要素を表示し、子要素をグリッドアイテムとして配置します。（詳細はテキストPart5で）
inline-blockインラインブロックインライン要素のように振る舞いますが、幅と高さを設定できます。
noneナン（ノーン）要素を表示しません。レイアウトにも影響を与えません。
tableテーブル要素をテーブルとして表示します。
table-rowテーブルロー要素をテーブルの行として表示します。
table-cellテーブルセル要素をテーブルのセルとして表示します。
list-itemリストアイテム要素をリスト項目として表示します。
table-captionテーブルキャプション要素をテーブルのキャプションとして表示します。
run-inランイン文脈に応じてブロックまたはインライン要素として表示します。
inheritインヘリット親要素からdisplayの値を継承します。
unsetアンセットinheritまたはinitialを選択します（現在の状態によります）。
displayプロパティの値一覧

参考リンク：cssプロパティ一覧 https://developer.mozilla.org/ja/docs/Web/CSS/Reference

これだけで基本がしっかり身につく HTML/CSS＆Webデザイン1冊目の本 Kindle版

これだけで基本がしっかり身につく HTML/CSS&Webデザイン1冊目の本 単行本（ソフトカバー）

PAGE TOP