Web全般 wordpress

DIV横並びで回り込みも

投稿日:2017年8月24日 更新日:

Webサイトを作るときに、画像やメニューなどを横並びにして、しかもレスポンシブ対応にしたい!

そんなことを思ったことがあると思います。(きっと 😛 )

いろんな方法がありますが、簡単にできる方法をご紹介します。

 

 flexboxっていうやつ

 

下のような感じにしたかったら、コピーすれば簡単にできますよ♪

基本的なHTMLは下記を使います。

<div class=”flextitle”>この部分は画像やタイトル(作ってみただけ)</div>

<div class=”wrap negative”>
<div class=”boxdemo”><p>boxA</p></div>
<div class=”boxdemo”><p>boxB</p></div>
<div class=”boxdemo”><p>boxC</p></div>
<div class=”boxdemo”><p>boxD</p></div>
<div class=”boxdemo”><p>boxE</p></div>
<div class=”boxdemo”><p>boxF</p></div>
</div>

次に、CSSはこんな感じ

/* スマホ用 */
.flextitle{
width:100%;
height:50px;
display:flex;
justify-content:center;
align-items:center;
margin-bottom:20px;
background:#bdb76b;
}
.wrap{
display:-webkit-flex;
display:flex;
-webkit-flex-direction:row;
flex-direction:row;
-webkit-flex-wrap:wrap;
flex-wrap:wrap;
}
.wrap .boxdemo{
display:flex;
justify-content:center;
align-items:center;
height:200px;
width:47%;
margin-right:3%;
margin-bottom:20px;
background:#228b22;
}
.wrap .boxdemo p{
color:#fff;
}
.negative{
margin-right:-3%;
}
/* タブレット用 */
.wrap .boxdemo{
width:30.333%;
}
/* PC用 */
.wrap .boxdemo{
width:22%;
}

上記CSSの補足として、

.flextitle これは、横並びとは関係ないですが、横並びに配置されたDIV(緑の四角)がこのタイトルの両端に揃っているというのが言いたかっただけです。

.negative これは、.wrapの中に書き込めば省略できますが、あえてわかりやすくするため別にしました。これでmarginをマイナスにすることで、タイトルの端と揃えることができました。

ちょっとこだわっただけです。 😆

.wrap .boxdemo これは、DIV(緑の四角)の中に文字を入れたい場合、なおかつ上下中央に文字を配置したいと思い、

《display:flex;》

justify-content:center;》

align-items:center;》を記入してやることで可能になりました。

あと、レスポンシブ対応ということでDIV(緑の四角)の幅を%指定にしています。

これにより、スマホでは横に2つ、タブレットでは横に3つ、PCでは横に4つという配置になります。

 

簡単ですね 😀

 

 

 

この部分は画像やタイトル(作ってみただけ)

boxA

boxB

boxC

boxD

boxE

boxF



-Web全般, wordpress
-, , , ,


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

ワードプレス

WordPress テーマTwenty Sixteenでメンバー紹介や選手一覧などを作ってみた③

9.メンバー登録 上図のような画面になって、投稿ができるようになります。 では、さっそく1人目を登録します。 ①「ここにタイトルを入力」のところに「日本 太郎」としてみます。 ②アイキャッチ画像のとこ …

ショートコード

ショートコードでPHPファイルを読み込む

便利で何かと使いやすいかな?って思いますので、とりあえずやってみました。 固定ページを書いているときに、別のテンプレートファイル(phpファイル)を読み込みたいときに、直接書くのはやめた方が良いので、 …

オンマウス以外

オンマウス(マウスオーバー)以外を透かす

オンマウスで透過したり、色が変わったりするのは一般的にも良くあるパターンだと思います。 でも今回は オンマウス以外に変化をつけていきたいと思います。 個人的には、少なめのメニューやカテゴリーリストされ …

CSSのcolumnでカテゴリー一覧ページにランダム表示

CSSのcolumnでカテゴリー一覧ページにランダム表示

  アーカイブの一覧表示をランダムにする   前回の記事に関連して、今回はアーカイブのページで試してみたいと思います。 カテゴリーなどの一覧表示に使用する『archive.php』 …

海外Wi-Fi

海外に行くならWiFi(ワイファイ)どうする?

海外に行く人はどんなにしているんだろう? 現地でWiFi(ワイファイ)をレンタルする人もいれば、国内から海外用のWiFi(ワイファイ)を持参する人もいるし、全く持っていかない人もいるでしょう。 ふとそ …