定番要素のデフォルトプロパティを知っておくべし

最低でも毎月1記事は更新しようと思いつつ、ついに7月31日23時なってしまったので無理やりひねりだして書きます。

 

最近ulでlist-styleが効かないということがありました。

ググったところこちらのサイトさんの記事ですぐ解決できました。感謝。

CSSのulでlist-styleが効かない時の対処法
ウェブサイトでリストを作るために、HTMLではul,liでマークアップして、CSSでlist-styleを当てたらいいと思ってたんですが、指定したマークが付かないことがありまして。例えばlist-style: disc;と書いた時に黒いぼっちを表示させる方法についてご紹介します。

 

対処法としては該当のli要素のdisplayプロパティを list-itemにすること。

記述としては以下。

li{

display: list-item;

 

えっでも今までそんなの書いたことないのになんで表示されてたの?って思いましたが、liはデフォルトがdisplay: list-item;なんですね。

知りませんでした。

list-styleが効かない原因:
displayプロパティが変更されているから

 

私の場合はリセットcssで
li {
display: block;

を書いていました。

リセットcssはどこかから拾ってきて書き加えて使っていました。

まったく意味を考えていなくて少し反省。

 

定番のプロパティについて調べてみる

デフォルトって意外と落とし穴になりがちなので、本当は定番要素のデフォルトプロパティを洗い出そうかなと思ってタイトルつけて書き始めた記事だったのですが今日は体力の限界です。

あとこんな感じでいいまとめ記事もありました。

CSSプロパティ初期値まとめ - Qiita
先日レスポンシブサイトをコーディングしていた時に、「PC向けレイアウトでは `float: left;` で横並びにしたいけど、スマホ向けレイアウトでは横並びにしたくない」といったように、一度記述したCSSプロパティの値を**初期値に...

 

なので代わりに

displayプロパティっていうきほんのきをあらためて調べてみました。

安定のクイックリファレンス

 

うん、さすがにだいたい知ってる。というのはうそ。

table系で10個もあってびっくり。あとルビ(←これは根本的に理解してないです)。

なんだこれというのもありました。

run-in…文脈に応じてブロックまたはインラインボックスのいずれかを作成する

ほお。覚えないけど頭の片隅に。

 

この一年制作現場で学んだことは、

そういえばこういうのがあったなっていうのをどれだけ広く浅く持っているか(←できる上司や先輩の特徴)だったので、こういうのを調べもののついでにちまちま蓄積するのはとても大事。

最終目標はスピーディーに原因の切り分けができることだけど、それも知識と経験の集積なので。ググり方の手がかり・キーワードをどれだけ持てるか。

 

display:の話に戻ると、

いまだにinlineとinline-blockの使い分けがわからなくなる時があってはずかしい。(だれにも気づかれてないけど)

上手くいかないとdisplay:inline→inline-block(あっ関係なかったか)→inlineとかやっちゃう。

さすがにこの辺の基礎は大事ですな。そろそろ固め直したい。

 

liのdisplayプロパティの初期値はlist-itemであり、
これをblockに変えてしまうとリストスタイルが認識されない

っていうだけの話だったのですが、無理やり長くしました。

コメント