Link 1
画像+テキスト a.card-apple
画像+テキスト。画像の下にテキストがあるレイアウト。マウスカーソルがリンクの上に来るとa要素全体の色が変わります。
a.card-apple
a.card-apple.type-title
画像の上にタイトルが入るタイプで、タイトルはメインとサブがあります。
クラスでバリエーション
アイコンの位置
a.card-apple
標準はアイコンは尾
a.card-apple.type-head
アイコン頭
a.card-apple.type-ico-none
アイコンなし
見出しの高さ
a.card-apple.type-line-1
min-heightで指定
見出しの高さ
a.card-apple.type-line-2
見出しの高さ
a.card-apple.type-line-3
アイコンの種類
a.card-apple.icon-blank
a.card-apple.icon-another
ボーダー枠の種類
a.card-apple.type-border
画像だけボーダー角丸
a.card-apple.type-border-a
画像と見出しにボーダー角丸
a.card-apple.type-border-b
画像と見出しにボーダー角
a.card-apple.type-border-c
画像と見出しにボーダー角
いろいろ組み合わせ
a.card-apple.type-another.type-border
写真だけ
a.card-apple .c-pic
a.link-ut-pic
a.card-apple だと .c-pic で囲う必要があるが、これは違う。html構造がシンプルになる。
a.card-banana
width: 60%
.card-banana
a.card-banana
a.card-banana
a.card-banana.type-a
a.card-banana
a.card-banana.no-pic
a.card-banana.adjust-pic10 (10%)
a.card-banana.adjust-pic50 (50%)
a.card-banana
いやま狩の居りましときのようににやにやけした子のようた外国へぶんへんを行っでた。ところが手は夜通し見て遠く見ているませ。セロも思わずやめましだ。ゴーシュへむずかしいれてまるで夜中に食うませうちもきかたた。
a.card-carrot
下に帯
width: 30%
a.card-carrot
.card-carrot
a.card-daikon
帯が全体、文字中央
width: 30%
a.card-daikon
a.card-daikon.type-text
a.card-daikon.type-overlay
a.card-ut-notice
width: 30%
a.card-ut-notice
a.card-ut-notice
またあけちのひるましときのまたあけちのひるましときのまたあけちのひるましときのまたあけちのひるましときのまたあけちのひるましときのまたあけちのひるましときのまたあけちのひるましときの...