趣味のところにリンクをつけてみよう
自分の趣味をグーグルで調べて、飛ばしたいページのURLをコピー
<a>でリンクしたい文字を囲う
<li><a>趣味2</a></li>
<ul>の子要素は<li>しか入れない約束なので、この順を逆にはできない
つまり、<a><li>趣味2</li></a>という記述はしない
これだけではリンク先が設定されていない
よって、<a>のタグに属性を入れてやる
<a href="https://www.kyoto-station-building.co.jp/events/657.html">趣味2</a>
教科書(『HTML+CSS3の新しい教科書』
ヘッダー/フッター
ナビをおくこともあるし
コピーライトを書いたりSNSへのリンクをおいたりする
グローバルナビゲーション
サイト全体を通して共通で表示するナビゲーションのこと
基本構造は、ひろいブロックをつくっていくという形
絶対この形にしないといけないということではない。
ただほとんどのWebサイトはこういう形になっている
ワイヤーフレームとサイトマップ
お客さんにこの2つを提示して、
OKだったら作り始めるということが多い
まずワイヤーフレームを描くらしい
ワイヤーフレーム
ざっくりとしたレイアウト(マークアップ)
手書きで書くこともある
サイトの設計図面
サイトマップ
HTMLが何枚必要かみたいな
レイアウトの種類
1カラム(ワンカラム)
スマホにも使いやすい人気のレイアウト
横幅を最大まで使う
2カラム
縦のおびが2つある形
細いほうで補足や広告があったりする
3カラム
yahooとか。ニュースサイトやポータルサイトでよく使われる
デザインの領域に入ってくるので授業では深くやらない
ただスマホに対応しやすいので1カラムがきょうび多い
レスポンシブデザイン
PCとスマホで見え方が違うサイトがある
デバイスによって(横幅によって)見え方が変わる、
それに応じた見やすさに変えていく、という手法をするのを
レスポンシブWEBデザインという
セクショニング
ヘッダー部分を<heder>という要素でマークアップし、
フッター部分を<footer>という要素で、などというのがセクショニング
<nav>(ナブ)
ナビゲーションのこと
セクショニングする要素も覚えていくこと