未経験・初心者向け「HTML・CSSのレイアウト鬼練15」

鬼練15:ラベルの配置

前回の続きで、今度はブログサイトによくある記事のラベルを追加してみてください。

ラベルだけなんで、簡単でしょう?

要件

HTML・CSS鬼練.fig

正解コード

htmlコード

htmlはまずこんな感じになります。

style.css

style.cssはこんな感じになりますね。

 

ほぼ前回と同じで、今回追加されてるのは.article-labelだけになります。

ブログ記事をよく見るとラベルはリンクになっていて押せますよね。

ウェブカツBLOGもそうですが、押すとそのカテゴリーラベルのついている記事が絞り込まれて出てきますね。

なので、今回もaタグを使ってみました。

STEP1:ラベル位置

aタグの場所ですが、.article-linkのタグ内や.article-head内に置いてもいいんですが、今回カテゴリーラベルはリンクです。

リンクとなると押せなくてはいけませんね。

そうなると.article-linkはaタグなのでそれより下の階層にカテゴリーラベルとなるaタグを置いても

押せない(カテゴリーラベルを押しても記事を押したとブラウザは勘違いする)

ということが起きてしまいます。

ここらへんはブラウザやスマホなど端末によって押せたり押せなかったりあります。

なので、確実にどの端末やブラウザでも押せるためにもaタグの中にaタグを入れることはやめましょう。

 

また、aタグ一つでラベルをつくる場合もあれば、aタグの中にspanタグなどでテキスト用のタグをもう1つ入れることもありますが、そこらへんは好き好きです。分けた方がラベルの中身をテキスト以外に差し替えやすいってのはありますが、ラベルの中に文字以外入れることってまぁないですしね。

 

このラベルで大事なのは「配置」ですね。

画像の上、カードの左から10px、上から10pxの位置に置かなければいけません。

要素の上に要素を被せたい時はどうするんでしたっけ?

そう、

 

position:absolute

 

でしたね。絶対座標での指定です。

そして、絶対座標でtopとleftを指定するわけですが、その座標の基準となる位置(要素)を決めなければいけません。

今回は「カードから〜」なわけなので、カードにposition:relativeをつけてやればいいですね。

これで、

とabsoluteをつけてleftとtopの指定をした際に「カード左端から10px」「カード左上から10px」という指定の仕方ができます。

これで位置は出来上がりですね。

STEP2:ラベルの余白

また、ラベルの内部余白にクセがあります。

デザインツールで見ると上下の余白は5pxですが、そのまま指定すると高さがデザインと合わなくなります。

なぜかというと

文字ボックス自体に若干余白がある

からです。

 

なので、line-heightを使って行間の余白をなくしてあげましょう。

 

特に初心者エンジニアほど

「上下5pxだからそれで指定すればいいのか」

とバカ正直に指定して気付かず納品しがちなんですが、そうするとデザイン上のラベルの高さと実装後の高さが違ってきてしまいます。

そのために必ず「高さ」も合わせて確認しましょう。

 

因みにラベル幅も微妙にコンマ何pxか違うんですが、そこらへんまでは実務でも気にしなくてOKです。

実務でも現場によって1px単位できちんとやってくれってところもあれば、だいたいでいいよってところもありますが、流石にコンマ何pxまで気にする人はいませんので。

ここらへんはデザイナーにいちいち確認するというよりは「仕方なしとして事前に伝えて認識を合わせておく」ところですね。

もし幅も合わせたいなら左右のpaddingコンマpxで調整してください。

 

 

これでラベルも作れましたね。