読者です 読者をやめる 読者になる 読者になる

ファイヤードブログ

ディジタル・パブリッシングという観点から、Webサイト制作、電子書籍制作などを。※ブログリニューアル中

定義リスト横並び + Font Awesome でプロフィールカードを作る

HTML&CSS WebDev

 ウェブサイトのAboutのページとかでおいておくといいやつ。実際の例だと、こんな感じ。
f:id:sthmdnss:20141104221048p:plain
Musée Henri Dupuis
 上の例は、見ためだけの参考で、マークアップ的にはdivで書いてある。セマンティックという意味では定義リストを使ったほうがいいのではないかと思って、定義リストで書いてみたのが以下のjsfiddle*1

Profile Card w/ dl dt dd tags - JSFiddle
 横並びはpositionで行った。floatでも良かったかもしれない。ベストプラクティスかどうか自信はないけれど、一応スニペットとしても使えます。
 以下おまけ。
 dl dt ddの順序はなかなか覚えにくいけれど、自分の場合は語呂合わせで一発で解決した。こう想像してほしい。あなたは魅力的な女性で、これまでイケメンと何人も付き合ってきたが、そろそろ結婚を考えるにあたって経済面を考慮する必要が出てきた。いくら顔がかっこよくても将来を考えると、ヒッピーみたいなやつとはもう付き合ってられないと思い始めた。
 こう悩んでいたところ、facebookを通じて地元の古い知り合いが連絡をよこしてきた。そいつは地主の長男で、父親が死ねばそのポジションを受け継ぐことになるという男。しかし残念ながら、そいつはキモ男だった。連絡が来た後に一回食事をしたが、明らかに女性に対してウブで、言われなくとも童貞とだとわかった。ただ、家まで送ってもらったときのあの、レクサスの乗り心地と彼が握るハンドル付近から光ったロレックスの輝きを忘れられない。「ごめんね。お気に入りのBMWはちょうど親父が使っていたんだ」
 そこであなたはこう悟る。「私、ドル箱持った童貞にDan Dan 心惹かれてる……」。
「私、ドル(dl)箱持った童貞(dt)にDan Dan (dd)心惹かれてる……」
「私、ドル(dl)箱持った童貞(dt)にDan Dan (dd)心惹かれてる……」
「私、ドル(dl)箱持った童貞(dt)にDan Dan (dd)心惹かれてる……」


DRAGON BALL GT-Dan Dan 心魅かれてく - YouTube
参考
Hide text using css - Stack Overflow

*1:jsfiddleとcodepenの覇権争いが行われているが、codepenは実際の出力結果も埋め込みで出力してくれるというアドヴァンテージがある。codepenにすればよかったかも。fiddleを選んだのは、真っ白なバックグラウンドがシンプルで良いと思ったから。しかし、最近ではダッシュボードまわりをシンプルすぎて使いにくく感じている。