プロフィールでよくみる画像とテキストの位置関係をCSSで(floatなし)

公開: 2014-08-27 16:11
更新: 2016-04-29 06:02

プロフィールとかタイムラインでよく見る構図ありますよね。
左上にプロフィール画像でよこにテキストのやつ。
そう、ちょうどこんな感じのやつ。

プロフィールでよくみる画像とテキスト位置関係

Twitterのタイムラインもたしかこんな感じ。
そこで今回はCSSで、こんな感じのをfloatなしで実装しようのコーナーです。


なぜfloatなしかと言えば、なんとなくfloatがキライだからです。
よろしくお願いします。



まずは四角を用意。

ここに例の構図を再現してみます。

ちなみに現在のHTMLとCSSはこんな感じ。
(※高さと背景色は分かりやすいように適当につけてまふ)


HTML

<div class="row"></div>

CSS

.row {
        width: 300px;
}


1.まずはpaddingをとる

まずは端からpaddingを14pxとりたいです。
そこで.rowには縦のpaddingを入れ、横方向は中に子divを入れ、marginで整えます。


HTML

<div class="row">
        <div class="inner">
やっほー</div>
</div>

CSS

.row {
        width: 300px;
        padding: 14px 0;
}
.row > .inner {
        margin: 0 14px;
}
するとこんな感じ。
やっほー

子要素のmarginで左右のpaddingを調節しているので、
指定したwidth:300pxが崩れないのがポイントです。



2.プロフィール画像を設置

つづいて縦横50pxのプロフィール画像を設置します。
floatを使わないでpositionを利用します。


HTML

<div class="row">
        <div class="inner">
                <div class="image" style="background-image: url('背景画像のURL');"></div>
        </div>
</div>

CSS

.row {
        width: 300px;
        padding: 14px 0;
}
.row > .inner {
        margin: 0 14px;
        position: relative;
        min-height: 50px;
}
.row > .inner > .image {
        width: 50px;
        height: 50px;
        position: absolute;
        top: 0px;
        left: 0px;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
}
するとこんな感じ。

テキストがない場合は高さが出ないので.innerにプロフィール画像の高さ分min-heightを指定しておいた方がベターです。

またプロフィール画像は正方形でない場合が多いので、背景にしてbackground-sizeなんかで切ると良さげですね。



3.テキストを設置

最後ですね。テキストが入るdivを用意します。
普通に子divを入れたらmarginのleftにプロフィール画像の幅+プロフィール画像とのpaddingの合計値を入れます。

画像が50pxでpaddingは7pxとることにしましょう。
すなわち50px+7pxで57pxです。


HTML

<div class="row">
        <div class="inner">
                <div class="image" style="background-image: url('背景画像のURL');"></div>
                <div class="text">
テキストだよテキストだよテキストだよテキストだよテキストだよ...</div>
        </div>
</div>

CSS

.row {
        width: 300px;
        padding: 14px 0;
}
.row > .inner {
        margin: 0 14px;
        position: relative;
        min-height: 50px;
}
.row > .inner > .image {
        width: 50px;
        height: 50px;
        position: absolute;
        top: 0px;
        left: 0px;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
}
.row > .inner > .text {
        margin-left: 57px;
}
するとこんな感じ。
テキストだよテキストだよテキストだよテキストだよテキストだよテキストだよテキストだよテキストだよテキストだよテキストだよテキストだよテキストだよテキストだよテキストだよテキストだよテキストだよテキストだよテキストだよテキストだよテキストだよテキストだよテキストだよテキストだよテキストだよテキストだよテキストだよテキストだよテキストだよテキストだよテキストだよテキストだよテキストだよ

いい感じですな。
heightを指定していないのでテキストが増えれば自動的に.rowが縦に伸びてくれます。

あとは.text内をさらにタイトルと本文に分けたり、.innerを角丸にしたりレイアウトしてみてくださいな。



ではでは♪


この記事をシェア
この記事にコメントする
書き込む
あっきぃ(@appstars_aki)
Web、iOSなフリーランサーです。好きなものはお寿司です。でもお寿司は高いので普段は雑草とか拾ったドングリを食べています。お仕事や意味もなく毎月お小遣いをくれる人を探してます。

お仕事の依頼や自分で作ったアプリのレビューを希望しちゃう方はaki@appstars.jpまでご連絡ください。