趣味のところにリンクをつけてみましょう。

自分の趣味をグーグルで調べて、飛ばしたいページのURLをコピー

→

<a>でリンクしたい文字を囲う

　

<li><a>趣味２</a></li>

＊<ul>の子供は<li>しか入れない約束なので、この順を逆にはできない。

つまり、<a><li>趣味２</li></a>という記述はしない。

　

↓

これだけではリンク先が設定されていない。

よって、<a>のタグに属性を入れてやる。

　

<a href="https://www.kyoto-station-building.co.jp/events/657.html">趣味２</a>

　

【教科書(『HTML+CSS3の新しい教科書』)ｐ24、25】授業で全部音読

　

ヘッダー

フッター：

ナビをおくこともあるしコピーライトを書いたりSNSへのリンクをおいたり。

　

グローバルナビゲーション：

サイト全体を通して共通で表示するナビゲーションのこと

　

ひろいブロックをつくっていくという形。

絶対この形にしないといけないということではない。

ただほとんどのWebサイトはこういう形になっている。

　

ワイヤーフレームとサイトマップ：

お客さんにこの２つを提示して、OKだったら作り始めるということが多いらしい。まずワイヤーフレームを描くらしい。

　

⭐ワイヤーフレーム：

ざっくりとしたレイアウト（マークアップ）。手書きで書くこともある。

　

⭐サイトマップ：

HTML何枚必要かみたいな。

　

>ワイヤーフレームとは 

簡単に言えば「何を・どこに・どのように」が記載された「サイト設計図面」です。 つまり、制作するウェブサイトの要素や機能、情報を設計図面のように配置しておき、お客様や制作者と認識を合わせるためのものです。

⭐レイアウトの種類

　

1カラム（ワンカラム）：スマホにも使いやすい人気のレイアウト。横幅を最大まで使う。

2カラム：縦のおびが２つある形。細いほうで補足や広告があったりする。

　

3カラムもある。yahooとか。ニュースサイトやポータルサイトでよく使われる。

　

デザインの領域に入ってくるので授業では深くやらない。ただスマホに対応しやすいので１カラムがきょうびは多い。

⭐レスポンシブwebデザイン：

　

PCとスマホで見え方が違うサイトがある。

デバイスによって（横幅によって）見え方が変わる、それに応じた見やすさに変えていく、という方法をするのをレスポンシブWEBデザインという。

 

>レスポンシブウェブデザイン (Responsive Web Design, RWD) 

閲覧者の画面サイズまたはウェブブラウザに応じてデスクトップウェブページが閲覧できることを目指したウェブデザインの手法。加えて、1つのウェブサイトで多様なデバイスを同様にサポートすることもレスポンシブウェブデザインのタスクに含まれている点を理解しておくことが重要である。

【教科書(『HTML+CSS3の新しい教科書』)ｐ218、219、220】

　

セクショニング

　

ヘッダー部分を<heder>という要素でマークアップする、フッター部分を<footer>という要素で、というのがセクショニング。

<nav>（ナブ）（ナビゲーションのこと）

そういうセクショニングする要素も覚えていってもらいたい。

【教科書(『HTML+CSS3の新しい教科書』)ｐ8】

　

お昼の間にこの下部のファイルをダウンロードしておきましょう。