【HTML&CSS】transformはインライン要素に効かない？インライン要素に効かないプロパティ

f:id:Reiji_Kusuzawa:20201130212128j:plain

今回は、ブロック・レベル要素(以下、ブロック要素と呼びます)とインライン要素の違い、インライン要素に効かないプロパティ。追加でインライン・ブロック要素の特徴を説明する内容になっています。

ブロック要素とインライン要素はHTML&CSSを扱う上で重要な概念になっています。理解していないと、指定したCSSが上手く効かないことがあるので、1からサイトをコーディングするのを目指した中級者にとっては必須の知識です。

progateで学習し終わったぐらい？HTML&CSSを触った人にとって理解が深まる内容かもしれません。

ブロック要素とは
インライン要素とは
配置のルール
インライン要素の指定で出来ないコト
その他指定できないもの
- transform
インライン・ブロック要素

ブロック要素とは

例

・ブロック要素は1つの塊として見られる要素

・塊を表すように、ブラウザ上では前後に改行が入る

インライン要素とは

例

・インライン要素は主にブロック要素の中身として指定される

・strongタグは太文字化、spanタグは同じ行内の特定の文字を色付けしたりなど。

・ブラウザ上では改行はされない

インライン要素は後述しますが、置換要素と非置換要素というものに分けられるようです。

配置のルール

・ブロック要素の中にはブロック要素、インライン要素の配置は可能。

・インライン要素の中にインライン要素の配置は可能。

・インライン要素の中にブロック要素は配置出来ない。

HTML5からはaタグの中にdivタグなどを書くことが出来るのでこのルールは無くなったみたいです。

インライン要素の指定で出来ないコト

上下のmargin･padding

両方とも左右は指定する事が可能。

paddingの場合はディベロッパーツールで確認すると指定されているように見えるが、効果を持っていない。挙動がおかしいので、使うのは望ましくない。

margin(auto)

要素の中央配置によく使う「margin: 0 auto;」は、たとえインライン要素の横の指定だったとしても効かない。指定には数字を用いる必要がある。

インライン要素の中央揃えは「text-align: center;」を親要素のブロック要素に使う。

text-align

直前に説明したように、これはブロック要素に指定。インライン要素に指定できない。中央揃えしたいときは「text-align: center;」を親要素に使う。

widthとhightの指定が出来ない(imgタグは例外)

ブロック要素、インライン・ブロック要素でしか指定できない。

imgタグは例外でインライン要素ですが、widthとheightの指定ができます。

その他指定できないもの

transform

指定した要素を回転、拡大縮小、傾斜、移動することができるプロパティ。

CSSでアニメーションを実装する際によく使われる。animation, transition, @keyframes,などと併用される。

spanなどのインライン要素=(非置換要素)は指定できない。

インライン要素は置換要素と非置換要素に分けられる。非置換要素は開始タグと終了タグのある要素。だいたいのインライン要素は効かない。

インライン・ブロック要素

display:inline-brock;を指定すると、タグをインライン・ブロック要素にすることが可能。インライン要素に上記のプロパティで効かせたいものがあった場合に使われる。

インライン・ブロック要素の特徴

･widthとheightの指定が可能

･横幅がインライン要素と同じく内容で決まる

ブロック要素は親要素の幅(内容に関係なく、横全体に広がるイメージ)

･前後要素がある場合は、改行されない。

今回は以上です。cssアニメーションを学習している際に、transformプロパティが登場し、インライン要素に対して効かない問題が発生したので、おさらいとして今回の記事を書きました。

今後transformメソッドのようなインライン要素に対して効かないものと遭遇したら増やしていくかもしれません。（辞書的にもっと増やす予定でしたが、インライン要素に焦点を当てて網羅的なものがなかなか見つからず…。）

とある地方大学生の生き方

学生。主にプログラミング関連の記事を書きます。