CSSレイアウトの覚書です。
目次
左に1枚、右上に1枚、右下に1枚の画像を並べるCSS
<div id="images" class="three-images">
<div class="left-image">
<img src="path_to_your_left_image.jpg" alt="左の画像の説明">
</div>
<div class="right-images">
<img src="path_to_your_right_top_image.jpg" alt="右上の画像の説明">
<img src="path_to_your_right_bottom_image.jpg" alt="右下の画像の説明">
</div>
</div>#images.three-images {
display: flex;
height: 100%;
width: 100%;
}
#images.three-images .left-image {
flex-grow: 1;
flex-basis: 0;
}
#images.three-images .left-image img {
width: 100%;
height: auto;
}
#images.three-images .right-images {
display: flex;
flex-direction: column;
flex-grow: 1;
flex-basis: 0;
}
#images.three-images .right-images img {
flex-grow: 1;
flex-basis: 0;
width: 100%;
height: auto;
}divを使えない都合があって、このサンプルは使わなかったのだけど、参考程度に残しておきます。
縦横碁盤目のような文字付き画像(アイコン)メニューを作成するCssのコード
Cssで画像(アイコン付き)とテキストを縦横に並べて碁盤の目のようなメニューを作成します。
完成したメニューはこちらです。
メニュー下のエリアです。
実装の仕様
実装するにあたり、作りたい仕様を簡単に解説します。アイコンの下にまずテキストを置きます。
横に３つ、縦に３つ並べます。スマホのメニューみたいなものを作りたかったのです。
今回、Box Sizingを使うことにしました。
Box Sizingを使えば、paddindやborderを気にしなくてOKです。
アイコンはFont Awesomeを使う方法もありますが、自分で作成した画像を使いたかったため、単純に画像を使っています。
コードとコードの解説
まず、htmlコードです。アイコンの画像はhtml内で個別に変更します。
<div id="grid_menu"> <a href="#" target=”_blank”><img src="icon1.png"><br />wordpress</a> <a href="#" target=”_blank”><img src="icon2.png"><br />電子書籍</a> <a href="#" target=”_blank”><img src="icon3.png"><br />test</a> <a href="#" target=”_blank”><img src="icon4.png"><br />test</a> <a href="#" target=”_blank”><img src="icon5.png"><br />test</a> <a href="#" target=”_blank”><img src="icon6.png"><br />test</a> <a href="#" target=”_blank”><img src="icon7.png"><br />test</a> <a href="#" target=”_blank”><img src="icon8.png"><br />test</a> <a href="#" target=”_blank”><img src="icon9.png"><br />test</a> </div> <p class="break">メニュー下のエリアです。</p>
次に、cssコードです。
/* メニュー */
#grid_menu
{
margin:20px 0;
}
#grid_menu a {
width:33%;
padding:10px 0;
background:#f2f2f2;
text-align:center;
float:left;
box-sizing: border-box;
border-top:2px solid #333;
}
#grid_menu a:nth-child(3n+2){
border-right:2px solid #333;
border-left:2px solid #333;
}
#grid_menu a:nth-last-child(1) , #grid_menu a:nth-last-child(2) , #grid_menu a:nth-last-child(3){
border-bottom:2px solid #333;
}
個別に解説します。
width:33%;
33%で3つに分割すると、1%の隙間ができますが、どのみち隙間ができるようなので、今回は1%は無視しました(^^;
こういうところにこだわるべきでしょ、というお話もわかるんですけどね。
まあ、余白の取り方やサイドバーに線を引いていなければわからないなど、工夫次第で問題を吸収できるかな、とか思いましたね。まあいいかなと。
text-align:center;
box-sizing:内の中央合わせを行います。
線の引き方についてです。
border-top:2px solid #333;
上部はすべて線を引いて問題ないため、普通に引きます。
左右の線を引きます。両端は線を引かないことにします。
#grid_menu a:nth-child(3n+2){
border-right:2px solid #333;
border-left:2px solid #333;
}
3n
だと、左から3番目のセル
3n+1
だと、左から1番目のセル
3n+2
だと、左から2番目のセル(要は中央)
今回は真ん中に線を引きたいため、3n+2になります。
この3n+2の左右に線(border)を引くことになります。
上部の線はすでに引いてあるため、次に下線を引きます。lastは後ろからです。列を追加した場合は、こちらをいじるだけです。
#grid_menu a:nth-last-child(1) , #grid_menu a:nth-last-child(2) , #grid_menu a:nth-last-child(3){
border-bottom:2px solid #333;
}
今回、参考にさせていただいた、ありがたいサイトはこちらになります。
初めてスマートフォン専用ページを作成する際に知っておきたいポイント｜Webpark
floatの解除を忘れずに
このメニューの下に何かを置く場合、メニューがfloatを使っているため回り込みを解除する必要があります。
/*float:left;を解除 */
.break {
clear:left;
}
float:left;を使っているため、clear:left;で回り込みを解除します。
ちなみに、float:left;とfloat:right;を使ったら、clear:both;になります。
図のある、わかりやすいサイトはこちらになります。
float段組の基本｜floatレイアウトホームページ作成講座
Webは素人なので何か適当なところがあるかもしれませんが^^;、参考になるところがあれば幸いです。
コメント