Dioxy : How To Presentation [HTML/CSSワークショップ #1 / パンくずリストを作ろう]

HTML/CSSワークショップ
#1 パンくずリストを作ろう前半
製作者 @north

Concept
Webサイトを基本パーツの組み合わせと捉え、基本パーツの
それぞれを実際に作れるようになることでHTML/CSSの基礎
を身に付ける。1つのパーツから多くの事項を学べるよう設計。
また応用の幅も広くとる。→たくさん作って習得
Time
About 30min / 1 part

Preparation
好きなエディタがある方 -> 好きにお使い下さい
初めての方 -> Sublime Textがおすすめ

「パンくずリスト」#とは

TO DO
パンくずリスト基本編
パンくずリストとユーザビリティ
パンくずリスト応用編 (次回)

パンくずリスト基本編

最悪こう書けば良い
<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インチブラック]

目標
• ホーム >
• パソコン >
• 液晶モニタ・液晶ディスプレイ >
• IODATA(アイ・オー・データ) >
• LCD-MF234XNR [23インチブラック]
ホーム > パソコン > 液晶モニタ・液晶ディスプレイ > IODATA(アイ・オー・デー
タ) > LCD-MF234XNR [23インチブラック]
▼ CSS

Steps
Step1 行頭の●を消す
Step2 一列にする
Step3 スペースを整える
Step4 最後だけ太字
Step5 変なスペースを消す・その後にパラグラフを入力

Step1 行頭の●を消す
body{
margin: 0 auto;
width: 960px;
}
!
ul{
list-style: none;
}

Step2 一列にする
body{
margin: 0 auto;
width: 960px;
}
!
ul{
list-style: none;
}
!
li{
float: left;
}

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;
}

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;
}

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

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（水平）との関係は表現できない

ちなみに水平方向の表現例ーカテゴリ

身近にやっちまってる例

これから勉強するパーツは「何のために」あるのかを勉強し
適切かどうか考えてWebページ制作をしていくことが重要。

今日やったこと
モノを横に並べる → ul,li要素でﬂoatを使う
liの各リストはmarginで間隔を調整できる
最後の要素 → li:last-child
ﬂoatは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/パンくずリスト
参考文献とか

Dioxy : How To Presentation [HTML/CSSワークショップ #1 / パンくずリストを作ろう]

Recommended

Recommended

More Related Content

What's hot

What's hot (8)

Viewers also liked

Viewers also liked (14)

Similar to Dioxy : How To Presentation [HTML/CSSワークショップ #1 / パンくずリストを作ろう]

Similar to Dioxy : How To Presentation [HTML/CSSワークショップ #1 / パンくずリストを作ろう] (20)

Dioxy : How To Presentation [HTML/CSSワークショップ #1 / パンくずリストを作ろう]