要素が折り返す
画面を縮めた時に、文字やボタンとかが、綺麗に折り返してほしい。
結構普通なことのようで、実装すると難しいとかがあります。
ですが、これに関してもHTMLの基本をわかってると、すぐに使えます。
ということで、インライン要素の復習をしましょう。
文字は折り返す。
縮めたら折り返すものとして、わかりやすいものは文字。
<div> あああああああああああああああああああああああああああああああああああああああ </div>
この時、画面を縮めたら文字が折り返していると思います。
これと同じようにボタンとかを設置して、折り返させれば良いのです。
文字と同じ→インライン要素で作る
文字はなにか。普通にしていれば、インライン要素です。
インライン要素は、端に来たら折り返す。
なので、ボタンもインライン要素で作れば、端に来たら折り返すわけです。
インライン要素にするのは、
- などで作っていたものをで作成
- CSSで
display: inline;をかけるなどで対応出来ます。
きっと、これで出来ると思います。・・・あれ？崩れた？
途中で折り返してしまった。
例えば、ボタンの半分辺りで折り返しの境目が来ると、
ボタンの右半分は右に、左半分は次の行に表示されて、酷い見た目になったりします。さてどうするか。
実は文字列でもよくあります。『特定の文字列の塊で、折り返してほしい』とか。
そんな時にどうするか。インライン要素ではなく、『インラインブロック要素』を使います。
インラインブロック要素
インライン要素とブロック要素の特性両方を持つものです。
CSSで
display: inline-block;をすると要素をインラインブロック要素に変えられます。すると、その要素のタグの単位で折り返しがされます。
ボタンに対しても、インラインブロック要素にしておくと良いです。<span class="d-inline-block">今日は</span><span class="d-inline-block">いい天気</span>
.d-inline-block { display: inline-block; }みたいにすると、『今日』『はいい天気』みたいに折り返されることはなくなります。
これを利用して、ボタンを作成すれば、問題なく折り返せるコードが書けます。
特性を知ろう
このように、HTMLの特性を知っていれば、一見難しいと思うものも、簡単に書けます。
是非、タグに対していろいろ調べてみてください！ - CSSで
