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
関連記事
今からレスポンシブサイトを作る時のメディアクエリとブレイクポイント【2017年度版】
新しくサイトを作ることになった。 もちろん、レスポンシブ対応で。 そこで改めて、ブレイクポイントを考えてみことにした。 Googleでは「モバイルファースト」を推奨している。さらに「モバイルファースト …
このページのもくじ ワードプレスでプラグインを使わずに、 HTMLとCSSだけで下のような感じの会話風レイアウトの作り方。手順はこちらもっと便利に！ ワードプレスでプラグインを使わずに、 HTMLとC …
仕上がりイメージからレイアウトをコーディングするとき、マージンやボーダーなど横幅の計算がややこしくて手こずっていました（涙） そんな悩みを解消してくれるありがた〜いセレクタ「box-sising」！ …
リンク文字のホバーエフェクトでつまずいたときのメモ。 <HTML>
|
1 2 3 4 5 |
<a href=“#" class="demo1"> リンクテキストのマウスオーバー リンクテキストとマウスーバーの色を変更したいとき、 CSSで設定する方法は、よく使います。 </a> |
<CSS> [crayon-5e558dc …
このページのもくじ 画像を右寄せにする方法右寄せにする手順 画像を右寄せにする方法 デフォルトは左寄せになっています。 右寄せにする手順 （１）画像をブロック要素として囲む。 ブロ …
2020/02/25
2020/02/22
2020/02/21
WordPress★プラグインなしでページのトップへ戻るリンクを設置
2020/02/21
WordPress★特定のページだけに「ある要素」を表示させたいとき
2020/02/16
WordPress★サイトをコピーしてテスト環境をつくる手順【プラグインなし】