最短2行。上下左右中央揃えにはCSS Gridが一番ラク

2022/12/05 21 users ラク CSS Grid CSS 上下左右中央 要素

CSSで要素を上下左右中央揃え（以下、中央揃え）する機会は多いです。要素は1つだけの場合もありますし、複数の要素の場合もあります。 ▼ 中央揃えの4つの事例 昔は多くのコードを書いていましたが、CSS Gridを使えば最短2行のコードだけで実現できます。2020年から全ブラウザ（Chrome・Firefox・Safari・Edge）で対応済... 続きを読む

CSSで上下左右の中央に配置する時の「position: fixed;」での新しい記述方法 | コリス

2021/07/12 313 users fixed モーダル コリス position パーセンテージ

中央揃えの古典的なテクニックの一つ、モーダルやメッセージなどを表示する時に適したposition: fixed;での新しい記述方法を紹介します。 古い記述方法では、負のパーセンテージを使用していたり、あまり直感的ではない...記事の続きを読む 続きを読む

CSSの中央揃えで、最も万能で信頼できる実装テクニック | コリス

2021/01/14 477 users 主流 天地左右 テクニック コリス 一昔前

CSSは進化が早く、中央揃えのテクニックも一昔前のものよりも確実に使いやすくなっています。天地左右の中央に要素を配置する際に、要素の幅や高さが可変だったり、要素の数が増えても対応する最新の実装テクニックを紹介します。 現在主流の5つのテクニックからそれぞれの特徴と最も万能で信頼できるテクニックを評価し... 続きを読む

2020年、知っておくと便利なCSSのプロパティのまとめ | コリス

2020/07/21 369 users コリス Flexbox プロパティ Edge CSS

ChromiumベースのEdgeもリリースされ、最近のブラウザ状況は大きく変わってきました。知っておくと便利なCSSのプロパティを紹介します。 一昔前まではJavaScriptでないと実装できなかったもの、CSS Gridでの中央揃え、Flexboxでの中央揃え、リストのカラーを変更する方法、アイコンの横並び、タイル状の背景をいい感じに... 続きを読む

CSS の flexbox をゲーム感覚で身につけられる Flexbox Froggy がおもしろい - 頭ん中

2015/12/10 17 users Flexbox Flexible Box CSS ライブラリ

CSS の flexbox (略さずに言うと flexible box) を使うと、ページ上の要素を任意の方向や順番で配置したり、柔軟なサイズを持たせて表示領域を最適に埋めたりできますね。 flexbox を身につける 以前は横に並んだブロック要素の高さを揃えたり、幅が固定されていない要素を等間隔に中央揃えで並べたりするのに JavaScript のライブラリや CSS のちょっとひねった書き方を... 続きを読む

CSS でテキストの縦揃えを上揃え, 中央揃え, 下揃えにする方法 | TM Life

2012/07/30 50 users CSS テキスト TM Life fork 備忘録

久々の備忘録!! CSS でテキストの縦揃えを変えるときによく使う方法を紹介します. Table of contents サンプル 上揃えにする方法 中央揃えにする方法 下揃えにする方法 ついでに横揃えも!! サンプル まずは実際に実行してみて下さい. 上, 中央, 下揃えそれぞれ適応させたサンプルです. jsdo.it で実装しています. fork して遊んでみて下さい. Demo Downlo... 続きを読む

少しのコードで実装可能な20のCSS小技集 | Webクリエイターボックス

2010/04/14 2024 users 実装 Webクリエイターボックス CSS小技集 コード 少し

CSSハックに続き、このCSS小技集も私のブックマークにずらりと並んでいたので、整理も兼ねて記事にしてみました。CSSのお勉強を始めたばかりの頃にブックマークしておいたものも多数。。ということで初心者さんからベテランさんまで参考にしてみてください！ サンプル まずはCSS基礎編 1. divを中央揃えにする ほとんどのサイトが基準となるdivを画面の中央揃えに設定しています。左右のmarginをa... 続きを読む