HTML and CSS labo.

2019/6/41つのデザインでどこまでHTMLタグをそぎ落とせるか。

下記のようなリストのデザインを実現するのにどこまでHTMLタグをそぎ落とせるか実験してみます。

箇条書きのolタグで試す

普通にナンバリングしたものだとそんなにいろんな方法もないかなと思ってちょっとはみ出したデザインにしてみました。

思いついたままかいてみる

上のデザインを実現させるために、とにかくこれ書いたらいけるかなというのを思いつくまま書きました。

HTML

ソースを書いていくときに考えてること

・番号付きの箇条書きだからolタグにしよ。

・番号はみ出してるし、その部分はマイナスにしたいからspanで囲っとくか。

・番号の上にテキストのってるし、z-index必要になるかもだから指定できるようにpタグにしとこ。

・liタグにいろいろpositionやら色やら指定しなくちゃだし、ややこしいことになるかもだからdiv入れとくか。

 

こんな感じの事考えながらHTML書いてます。
そして出来上がったのが手堅い感じのHTMLタグになりました。

これだけ各要素にタグを指定すれば確実にデザインを実現できそうな感じの書き方です。

そしてCSSを書いていきます。

.in_boxは共通で使いそうかなって思ったので、詳細な指定の書き方をしていません。汎用性を持たせるために.in_boxとだけ書いてます。

.in_box {
  position: relative;
  padding: 20px;
  background: #fffcba;
  overflow: hidden;
}

/* ol_style01 */
.ol_style01 {
  list-style-type: none;
}

.ol_style01 li {
  margin-bottom: 10px;
  text-align: left;
}

.ol_style01 li span {
  position: absolute;
  bottom: 0;
  left: -0.15em;
  font-size: 100px;
  line-height: 1;
  font-weight: 900;
  z-index: 0;
  color: #f5ec7b;
  transform: skew(-12deg);
}

.ol_style01 li p {
  position: relative;
  z-index: 999;
}

下記のようになりました。
手堅く書いただけあります。ちゃんとできました。

See the Pen wbNYaR by emi.works (@works_emi) on CodePen.0

ちょっと減らしてもいけるかも

手堅いバージョンのCSSを書いてる途中で、もうちょっと減らせそうだな、と思いました。

ナンバリングは、CSSのカウンターでいけそうだなってことでspanタグをなくしました。

・pタグもなくても実現できそうかな。
・そういえばCSSでliのカウントできたな。
・.in_boxはちょっと触るだけでいけそう。

ってことでこんな感じにちょっとスッキリしました。

HTML 
/* ol_style01_2 */
.ol_style01_2 {
  list-style-type: none;
}

.ol_style01_2 li {
  margin-bottom: 10px;
  text-align: left;
}

.ol_style01_2 li .in_box {
  position: relative;
  z-index: 10;
}

.ol_style01_2 li {
  counter-increment: num_count;
}

.ol_style01_2 li .in_box::before {
  content: counter(num_count);
  position: absolute;
  bottom: 0;
  left: -0.15em;
  font-size: 100px;
  line-height: 1;
  font-weight: 900;
  z-index: -1;
  color: #f5ec7b;
  transform: skew(-12deg);
}

See the Pen rgPqrm by emi.works (@works_emi) on CodePen.0

あれ？もうちょっといけそう

そしてまたCSS調整中に、これはもしかして最小限のHTMLでいけるんじゃないかな。と思って試してみることに。

必要最小限。
スッキリはしたけど、一見どんなデザインになるのかわからない感じのHTMLタグ。

HTML 
/* ol_style01_3 */
.ol_style01_3 {
  list-style-type: none;
}

.ol_style01_3 li {
  margin-bottom: 10px;
  padding: 20px;
  position: relative;
  background: #fffcba;
  text-align: left;
  overflow: hidden;
}

.ol_style01_3 li {
  counter-increment: num_count;
  position: relative;
  z-index: 10;
}

.ol_style01_3 li::before {
  content: counter(num_count);
  position: absolute;
  bottom: 0;
  left: -0.15em;
  font-size: 100px;
  line-height: 1;
  font-weight: 900;
  z-index: -1;
  color: #f5ec7b;
  transform: skew(-12deg);
}

See the Pen BeMqea by emi.works (@works_emi) on CodePen.0

まとめ

これ、スッキリしたHTMLタグでいけたけど、どうなんだろうね。って思いが。

作業者が自分だけならこれでもいいけど、複数で作業するとき、このHTMLだと何してあるか想像つきにくいんじゃないかな。って。

まあ、検証ツールもあることだし、気にしすぎかな。

こんなolタグにしかclass名入れてないのに、こんな風に見た目変わっちゃうなんて、CSSってすごいな。

一覧に戻る

pagetop