View
296
Download
5
Category
Preview:
Citation preview
Concept
Webサイトを基本パーツの組み合わせと捉え、基本パーツのそれぞれを実際に作れるようになることでHTML/CSSの基礎を身に付ける。1つのパーツから多くの事項を学べるよう設計。また応用の幅も広くとる。→たくさん作って習得
TimeAbout 30min / 1 part
最悪こう書けば良い
<p><a href=“/“>ホーム</a> > <a href=“/pc”>パソコン</a>
> <a href=“/pc/monitor”>液晶モニタ・液晶ディスプレイ</a>
> <a href=“/pc/monitor/iodata”>IODATA(アイ・オー・データ)</a> > LCD-MF234XNR [23インチ ブラック] </p>
* [>]はhtmlで打つときは>とするほうが良い。
* 見づらい
アイディア
<ul> <li><a href=“/“>ホーム</a> > </li>
<li><a href=“/pc”>パソコン</a> > </li>
<li><a href=“/pc/monitor”>液晶モニタ・液晶ディスプレイ</a> > </li>
<li><a href=“/pc/monitor/iodata”>IODATA(アイ・オー・データ)</a> ></li>
<li>LCD-MF234XNR [23インチ ブラック] </li>
</ul>
コッチのほうが見やすい。
目標
• ホーム >
• パソコン >
• 液晶モニタ・液晶ディスプレイ >
• IODATA(アイ・オー・データ) >
• LCD-MF234XNR [23インチ ブラック]
ホーム > パソコン > 液晶モニタ・液晶ディスプレイ > IODATA(アイ・オー・データ) > LCD-MF234XNR [23インチ ブラック]
▼ CSS
Step3 スペースを整える
body{ margin: 0 auto; width: 960px; } !ul{ list-style: none; } !li{ float: left; margin-right: 10px; }
Step4 最後だけ太字
body{ margin: 0 auto; width: 960px; } !ul{ list-style: none; } !li{ float: left; margin-right: 10px; } !li:last-child{ font-weight: bold; }
Step5 変なスペースを消す・その後にパラグラフを入力
body{ margin: 0 auto; width: 960px; } !ul{ list-style: none; margin: 0; padding: 0; } !li{ float: left; margin-right: 10px; } !li:last-child{ font-weight: bold; }
Step5 変なスペースを消す・その後にパラグラフを入力
body{ margin: 0 auto; width: 960px; } !ul{ list-style: none; margin: 0; padding: 0; } !li{ float: left; margin-right: 10px; } !li:last-child{ font-weight: bold; }
<!doctype html> … パンくずリストのテスト</h1>
!<p>…</p> !<ul> … </ul> !<p>ここにいろいろ書いてみる</p>
CSS HTML
Step5 変なスペースを消す・その後にパラグラフを入力
body{ margin: 0 auto; width: 960px; } !ul{ list-style: none; margin: 0; padding: 0; } !li{ float: left; margin-right: 10px; } !li:last-child{ font-weight: bold; } !.clear{ clear: both; }
<!doctype html> … パンくずリストのテスト</h1>
!<p>…</p> !<ul> … </ul> !<div class="clear"></div> <p>ここにいろいろ書いてみる</p>
CSS HTML
パンくずリストとユーザビリティ
[パス]そのページにどういう経路でたどり着いたのか
[階層]そのページがウェブサイトの階層構造のどこに位置しているか
[属性]そのページがどんな属性で分類されているか
パンくずリストは何のために存在する?
→ユーザビリティ(情報の整理性)の向上
パンくずリストとユーザビリティ
表現できるのは垂直方向の関係のみで、水平方向は表現できない
何でもかんでも使えばいいってもんじゃない
フォルダA
フォルダB
フォルダC フォルダD
フォルダA > フォルダB > フォルダCフォルダD(水平)との関係は表現できない
パンくずリストとユーザビリティ
表現できるのは垂直方向の関係のみで、水平方向は表現できない
何でもかんでも使えばいいってもんじゃない
フォルダA
フォルダB
フォルダC フォルダD
フォルダA > フォルダB > フォルダCフォルダD(水平)との関係は表現できない
今日やったこと
モノを横に並べる → ul,li要素でfloatを使う
liの各リストはmarginで間隔を調整できる
最後の要素 → li:last-child
floatはclearしないと継続する、clearタグをつくっておく。
これを使えばユーザビリティの向上となる万能薬ではない
重要なこと
ulのインデントはpadding,margin: 0で消える
細かいこと
引用したページなど
LCD-MF234XNR [23インチ ブラック] 価格比較ー価格.com (アクセス日:2015/02/16)
http://kakaku.com/item/K0000313430/
!嘱託員募集-熊本市ホームページ (アクセス日:2015/02/16)
http://www.city.kumamoto.jp/hpkiji/pub/detail.aspx?c_id=5&type=top&id=7986
!LIG BLOG-LIG株式会社 (アクセス日:2015/02/16)
http://liginc.co.jp/
!FM-JAGA-株式会社エフエム帯広 (アクセス日:2015/02/16)
http://jaga.fm/
スクリーンショット
パンくずリスト-Wikipedia (アクセス日:2015/02/16)
http://ja.wikipedia.org/wiki/パンくずリスト
参考文献とか
Recommended