投稿日: | 最終更新日:
ボックスの縦横中央に文字を配置するには?
同じ高さのボックスを3つ並べます。その上下左右の中央に文字を並べます。
完成イメージ
Ie9以降のブラウザです。黄色のボックス中央に文字を配置します。
スマートフォンサイズの画面です。画面が縮むと、ボックスが縦一列になります。文字の位置がやはりボックスの中央です。
Ie8~6のブラウザです。黄色のボックス中央に配置された文字が同じ位置です。
コード
index.html
htmlを記述します。
htmlタグ
・コンディショナル・コメントで、htmlタグのclass属性を分岐します。
[if lt IE 7] IE7未満 :no-js、lt-ie9、lt-ie8、lt-ie7のクラス名を使用。
[if IE 7] IE7の場合 :no-js、lt-ie9、lt-ie8のクラス名を使用。
[if IE 8] IE8の場合 :no-js、lt-ie9のクラス名を使用。
[if gt IE 8] IE8より大きい場合 :no-jsのクラス名を使用。
スタイルシート
・ブラウザのバージョンごと、使用するcssファイルを分けます。
[if (gt IE 8) | (IEMobile 7)] IE8より大きい場合か、モバイルの場合:「style.css」を使用。
[if (gt IE 8) | (IEMobile 7)] ie6~ie8の場合:「desktop.css」を使用。
※前回の記事に詳細が記載しております。
→IE8以下でメディアクエリを対応させるには?
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="ja"> <![endif]--> <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="ja"> <![endif]--> <!--[if IE 8]> <html class="no-js lt-ie9" lang="ja"> <![endif]--> <!--[if gt IE 8]><!--> <html class="no-js" lang="ja"> <!--<![endif]--> <head> <!-- モバイル・ファーストで定義した IE6-8 以外のブラウザ用 --> <!--[if (gt IE 8) | (IEMobile 7)]><!--> <link href="style.css" rel="stylesheet" type="text/css" /> <!--<![endif]--> <!-- IE6-8 向けのデスクトップ用 --> <!--[if (lt IE 9) & (!IEMobile 7)]><!--> <link href="/css/desktop.css" rel="stylesheet" type="text/css" /> <![endif]--> </head> <body> <div class="row"> <div class="four cols"> <div class="parent-box"> <div class="child-box"> <span> <h1>タイトル1</h1> <p>ボックスの上下左右の中央にテキストを配置</p> </span> </div> </div> </div> <div class="four cols"> <div class="parent-box"> <div class="child-box"> <span> <h1>タイトル2</h1> <p>ボックスの上下左右の中央にテキストを配置</p> </span> </div> </div> </div> <div class="four cols"> <div class="parent-box"> <div class="child-box"> <span> <h1>タイトル3</h1> <p>ボックスの上下左右の中央にテキストを配置</p> </span> </div> </div> </div> </div> </body> </html>
style.css
ie8よりバージョンが上のブラウザのcssを記述します。
index.htmlのとおり、divタグの親子関係はrow → cols、four → parent-box → child-box → child-boxです。
row
rowは、幅を100%にします。
colsとfour
黄色いボックスの型です。
「float:left;」を指定してボックスを回り込ませ、横一列にします。
「width: 33.333333%」を指定します。
parent-box
黄色いボックス本体です。
「border: 0.3em solid #fff;」で、白い線を作ります。
「width: 100%」を指定し、背景色を「background: #ffe600;」にします。
「display: table」でtable要素のような表示にします。
child-box
parent-boxの内側のボックスです。
「display: table-cell」でtd要素のような表示にします。ie8以降使用可能です。
child-box h1
赤い背景のタイトルを作ります。
「margin: 0 auto;」で、左右のマージンを指定します。autoで、左右中央に要素を配置します。ie6では使用できません。
「padding: 0.3em;」で、上下左右のパディングを指定します。
「border-radius: 0.5em;」で角を丸くします。css3なので、ieでは9以上から対応しています。
child-box p
「margin: 0.8em 0;」で、上下のマージンを指定します。
「padding: 0 1em;」で、左右のパディングを指定します。
@media screen
画面の幅が狭くなったとき、ボックスを縦一列にするためメディアクエリを指定します。
ブラウザの横幅が35em(560px)以下のときに適用されます。
「cols」のfloatをleftからnone、幅をautoにします。
「parent-box」の高さを200pxから140pxにします。
/*=============================================== ● ボックスの縦横方向の中央にテキストを配置する ===============================================*/ .row { width: 100%; overflow: hidden; text-align: center; } .cols { float: left; } .four { width: 33.333333%; } /* ボックス向けスタイル */ .parent-box { border: 0.3em solid #fff; height: 200px; width: 100%; background: #ffe600; display: table; } .child-box { display: table-cell; width: 100%; vertical-align: middle; text-align: center; } .child-box h1 { font-size: 0.9em; color: #fff; background: red; margin: 0 auto; padding: 0.3em; width: 50%; border-radius: 0.5em; } .child-box p { margin: 0.8em 0; padding: 0 1em; } /* メディアクエリ */ @media screen and (max-width:35em) { .cols { float: none; width: auto; } .parent-box { height: 140px; } }
desktop.css
ie6~ie8のときのcssを定義します。
lt-ie8 .child-box
IE 6, 7では「display:table-cell;」が効きません。そのための対策をします。
style.cssの「child-box」は継承します。
「position: relative;」で、親ボックス「parent-box」の相対位置として配置します。
「top: 50%;」で、parent-boxの上から50%の位置に配置します。
lt-ie8 .child-box span
h1要素やp要素を囲うspanタグを定義します。
「position: relative;」で、親ボックス「child-box」の相対位置として配置します。
「top: -50%;」で、「child-box」の-50%の高さに配置します。相対位置なので、「child-box」の一番上が基準位置です。
.lt-ie8 .four
parent-boxの親ボックス「four」の幅を31%にします。
@charset "utf-8"; /* IE7向け */ .lt-ie8 .child-box { position: relative; top: 50%; } .lt-ie8 .child-box span { position: relative; top: -50%; } .lt-ie8 .four { width: 31%; }
desktop.cssが存在しない場合、IE7以下ではどうなるか?
ie7以下では、「display: table;」と「display: table-cell;」が対応していません。
以下のように子ボックスが親ボックスの頂点に着いてしまいます。
次回
viewportメタタグの設定方法について説明します。
- Python 113
- 制作 54
- RaspberryPi 41
- Django 40
- WordPress 40
- Linux 27
- VPS 22
- JavaScript 21
- PHP 20
- HTML・CSS 19
- AWS 16
- 仮想環境 15
- レスポンシブデザイン 13
- マイコン 11
- WEB全般 11
- 動画製作 9
- Webサービス 8
- 統合開発環境 8
- PyCharm 7
- jQuery 7
- 機械学習 7
- AfterEffects 7
- 起業・設立 7
- Django REST framework 6
- C# 6
- デザイン 6
- SEO 6
- pydata 6
- Visual Studio 5
- 数学 5
- 携帯サイト 5
- heroku 5
- Mac 5
- illustrator 5
- node.js 5
- Anaconda 5
- Nginx 4
- Jupyter Notebook 4
- インフラ 4
- symfony 4
- Webスクレイピング 3
- photoshop 3
- Go言語 3
- PC 3
- Google Colaboratory 3
- ツール 3
- Docker 3
- facebook 3
- 作業効率化 3
- データベース 3
- Cloud9 3
- コマンド 2
- micro:bit 2
- Kali Linux 2
- Webサーバー 2
- MariaDB 2
- ドローン 2
- コンテナ 2
- DaVinci Resolve 2
- ネットワーク 2
- Java 2
- movie 2
- PCDJ 2
- 音楽 2
- XSERVER 2
- Ansible 1
- Vue.js 1
- JSON 1
- Bootstrap 1
- バージョン管理システム 1
- SSL 1
- S3 1
- ムームードメイン 1
- ネットワーク 1
- アニメーション 1
- D3.js 1
- Rhino 1
- アニメ 1
- git 1
- windows 1
- アクセス解析 1
- スマートフォン 1
- アフィリエイトノウハウ 1
- 知識 1
- TypeScript 1
- 役立つ本・書籍 1
- データサイエンス 1
- ESP32 1
- AI 1
- ownCloud 1
- API 1