プログラミング学習

Cssで3枚のレイアウト!画像メニューなどを並べるサンプルコード

プログラミング学習

CSSレイアウトの覚書です。

特集:Xserver VPS開始!マイクラや開発におすすめで安いVPSサーバー!

左に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は素人なので何か適当なところがあるかもしれませんが^^;、参考になるところがあれば幸いです。

コメント