WEBサイト制作で調べたことのメモ
投稿日：
CSSで横並びさせたい時によく使うのが、
display:inline-block。
でも、縦のラインがきれいに揃わないで困ることがある。
そんな時に、
たった1行追加するだけでOKなセレクタがあった！
それは、vertical-align。
＜使い方＞
|
1 2 3 4 |
<span style="font-size: 130%;">.test { display: inline-block; vertical-align: top; }</span> |
vertical-align: top; としてやれば、上揃えになります！
ちなみに、中央揃えにしたいときは、
vertical-align: middle; とすればOK。
執筆者：kobato
関連記事
最小の高さだけ決めて、 あとはdivなどの要素の高さに応じて高さを可変にできる指定方法。 CSSで下記のように指定します。
|
1 2 3 |
min-height: 80px; height: auto !important; height: 80px; |
I …
cssのメモ。 このページのもくじ 丸形の作り方円形の中央に文字を置くやり方★その２ 丸形の作り方 基本的な方法は、 （１）div 要素で囲った範囲の上下左右のサイズを指定する（height, wid …
リンク文字のホバーエフェクトでつまずいたときのメモ。 <HTML>
|
1 2 3 4 5 |
<a href=“#" class="demo1"> リンクテキストのマウスオーバー リンクテキストとマウスーバーの色を変更したいとき、 CSSで設定する方法は、よく使います。 </a> |
<CSS> [crayon-5df279d …
フロート解除の指定方法 ＜ＣＳＳ＞
|
1 2 3 4 5 |
.clearfix:after { content:" "; display:block; clear:both; } |
＜ＨＴＭＬ＞
|
1 |
<div class=“clarifix”> </div> |
cl …
このページのもくじ 画像の上に文字を重ねる囲んだ要素の高さがなくなる！ 画像の上に文字を重ねる 配置した画像の上に文字を重ねたいとき、CSSだけでできちゃいます！ 下になるアイテムに「position …
2019/12/02
WordPress★テーマフォルダの画像を呼び出すときの画像リンクパスを短くする
2019/11/29
WordPress★Gutenberg 投稿ページでテンプレートを使えるようにする
2019/11/29
WordPress★Gutenbergにカスタムブロックをつくる 1
2019/11/27
CSS ★ inline-blockで横並びにした要素を上揃えにする
2019/11/27