ドーモ こんにちは 皆さんはCSSは書いておられますか？
毎日書いてるよって人も、たまに書くだけだよって人もおられるかとは思いますが、ごくまれに書いてるはずのCSSが上手くHTMLに当たらないって経験は必ずされると思います。そのような時は、CSSで"display:ほにゃらら"と当ててやるとたちまちご機嫌なCSSに立ち返ります。MDN"display"正確な解説はMDNをご覧ください
この原因はHTMLの初期値のスタイル block or inlineという要素がCSSの邪魔をしているのです。
block要素には、block要素のCSSルール(具体例:inline要素とは異なり高さと幅を指定できる。)
inline要素にはinline要素のCSSルール(具体例:inline要素の marginは、 左右のみ指定可能。上下は指定不可。)がそれぞれ独自にあります。
わかりやすく言うとサッカー部と野球部が入り乱れてスポーツをしている状況です。最終的には、野球のルールとサッカーのルールの両方を学ばなければいけないのですが、まず最初にこの人は野球部なのかサッカー部なのかを判別できるようにならなければなりません。
HTML5の block or inline の判別の事です。
| tag | block | inline |
|---|---|---|
<html> |
○ | |
<body> |
○ | |
<address> |
○ | |
<article> |
○ | |
<aside> |
○ | |
<blockquote> |
○ | |
<details> |
○ | |
<dialog> |
○ | |
<dialog> |
○ | |
<dd> |
○ | |
<div> |
○ | |
<dl> |
○ | |
<dt> |
○ | |
<fieldset> |
○ | |
<figcaption> |
○ | |
<figure> |
○ | |
<footer> |
○ | |
<form> |
○ | |
<h1> |
○ | |
<h2> |
○ | |
<h3> |
○ | |
<h4> |
○ | |
<h5> |
○ | |
<h6> |
○ | |
<header> |
○ | |
<hgroup> |
○ | |
<hr> |
○ | |
<main> |
○ | |
<nav> |
○ | |
<ol> |
○ | |
<p> |
○ | |
<pre> |
○ | |
<section> |
○ | |
<ul> |
○ | |
<a> |
○ | |
<abbr> |
○ | |
<acronym> |
○ | |
<audio> |
○ | |
<b> |
○ | |
<bdi> |
○ | |
<bdo> |
○ | |
<big> |
○ | |
<br> |
○ | |
<button> |
○ | |
<canvas> |
○ | |
<cite> |
○ | |
<code> |
○ | |
<data> |
○ | |
<datalist> |
○ | |
<del> |
○ | |
<dfn> |
○ | |
<em> |
○ | |
<embed> |
○ | |
<i> |
○ | |
<iframe> |
○ | |
<img> |
○ | |
<ins> |
○ | |
<kbd> |
○ | |
<label> |
○ | |
<map> |
○ | |
<mark> |
○ | |
<meter> |
○ | |
<noscript> |
○ | |
<object> |
○ | |
<output> |
○ | |
<picture> |
○ | |
<progress> |
○ | |
<q> |
○ | |
<s> |
○ | |
<samp> |
○ | |
<select> |
○ | |
<slot> |
○ | |
<small> |
○ | |
<strong> |
○ | |
<sub> |
○ | |
<sup> |
○ | |
<svg> |
○ | |
<template> |
○ | |
<textarea> |
○ | |
<time> |
○ | |
<u> |
○ | |
<tt> |
○ | |
<var> |
○ | |
<video> |
○ |
こちらを丸暗記しておけば、快適なコーディング生活が保障されます。
コメントのご指摘による追記
例外
| tag | display |
|---|---|
<li> |
list-item |
<input> |
inline-block |
<script> |
none |
<table> |
block table |
<tbody> |
table-row-group |
<thead> |
table-header-group |
<tfoot> |
table-footer-group |
<tr> |
table-row |
<td> |
table-cell |
<th> |
table-cell |
<colgroup> |
table-column-group |
<col> |
table-column |
<caption> |
table-caption |
<ruby> |
ruby |
<rp> |
none |
<rt> |
ruby-text |