ドットインストールでCSSレイアウト入門 #13~#15
でCSSのレイアウトを学んでいます。
『CSSレイアウト入門編』今回が最終回です。
#13 positionプロパティで使ってみよう
さて、ふたたびシンプルな形に戻りました。
今回は、positionプロパティを使って、自由なレイアウトを実現してみましょう♪
今回は、なんとショップみたいな表示ですよ！
このような写真が用意されています。
どーん。
きのこですか？
このきのこの画像を商品の画像に見立てて、
その右上に値段のタグをつけるようなレイアウトを作っていきます！
これは…
へっぽこハンドメイダーたる私にも
ものすごく有用な情報なのでは？ゴクリ…
さっそくはじめてみましょう。
htmlのメインの領域に、画像を配置します。
<main>
<div class="container">
<img src="uni.jpg">
<span class="price">$100.00</span>
</div>
</main>
そして、spanタグをいれて、価格をいれられるようにします。（赤文字のところです）
お値段なんと100ドルですって。けっこう高価なきのこですね。
imgの画像を基本としつつ、priceは右上に配置したいので
画像を含む親要素を作り、positionをrelativeにしつつ
spanのほうにはposition:absoluteにすればOKです。
position に関しては、CSS入門編の#20で学習しています。
まずは、imgの上にdivタグをつくり、productクラスをあてます。
さきほどのimgとspanを中にいれてしまいます。
<main>
<div class="container">
<div class="product">
<img src="uni.jpg">
<span class="price">$100.00</span>
</div>
</div>
</main>
このようにすると、ブラウザではこのように見えています。
きのこの画像と、価格が表示されましたね。
ちょっと狭そうなので、mainにpaddingをいれたりしていきましょう。
main{
background: skyblue;
paddon: 10px 0;
}
まずはmainにpaddingを足しました。
次に、productとpriceにスタイルをあてていきましょう。
まずは、product。
positionはrelativeにしつつ、幅と高さは画像のものにしたいので
displayをinline-blockにします。
main.product{
position: relative;
display: inline-block;
}
main.price{
position: abslute;
top: 0;
right:0;
font-size: 10px;
padding: 4px;
font-weight: bold;
background: white;
}
priceのほうは、positionをabsoluteにして
右上に配置したいので、
topを0、rightを0にしましょう。
あとは、フォントサイズを10pxに。
余白を4pxにして、
太字、
背景を白に指定しています。
さあ、どうなっているでしょう？楽しみです！
おお！いい感じですね＾＾
自分のショップを作る時にも大いに使えそうですね。
ちなみに小技。
価格がちょっと飛び出るような感じにする方法です。
main.price{
position: abslute;
top: -5px;
right: -5px;
font-size: 10px;
padding: 4px;
font-weight: bold;
background: white;
}
topとrightを-5pxにすると、ちょっと右上に飛び出ているような感じになります。
あ、なるほど！このほうが写真が見やすいかも。
position に関しては、結構難しいのでもう一度復習しようと思います。
これの#20ですね。
また、topとrightの使い方もおもしろかったので
覚えておきたいと思います。
#14 画像付きリストを作ってみよう
今回は、画像付きリストを作ります。
今回用意されているのはこんな感じの画像です。
これを使って、レッスン一覧を作ります。楽しそう！
まずは、htmlです。
メインの領域に、一覧を作ります。
一覧なので、リストですね。
<main>
<div class="container">
<ul id="lessons">
<li>
<img src="html.png" width="50px" height="50px">
<h2>HTML入門</h2>
<p>Intro to HTML.Intro to HTML.Intro to HTML.Intro to HTML.Intro to HTML.Intro to HTML.</p>
</li>
</ul>
</div>
</main>
「レッスン」という名前のリストを作って、その中に画像を配置します。
その次に、レッスン名と説明を入れたいので、h2タグとpタグを入れます
。
h2は「HTML入門」
pは「Intro to HTML.」ですね。
イメージとしては、画像を左に配置して
右上にタイトル、右下に説明文が来るという感じにします。
そのため、画像を左カラム、タイトルと説明文を右カラムという感じにしていきます。
2つのdivを作りましょう。
<div class="lesson-image">
</div>
<div class="lesson-info">
</div>
この中に、さきほどのimgタグとh2タグ、pタグをそれぞれ入れます。
<div class="lesson-image">
<img src="html.png" width="50px" height="50px">
</div>
<div class="lesson-info">
<h2>HTML入門</h2>
<p>Intro to HTML.Intro to HTML.Intro to HTML.Intro to HTML.Intro to HTML.Intro to HTML.</p>
</div>
入りました。
ブラウザで見ると、このようになっています。
縦に並んでいますね。これを、横に並べる形にしていきます。
まずは、メイン領域に余裕をもたせましょう。
main{
background: skyblue;
padding: 15px 0;
}
そして、ulのlessonsと
ulの下のh2とpの余白を削っていきます。
また、黒丸はいらないのでlist-styleをnoneにします。
ul#essons{
margin: 0;
padding: 0;
list-style: none;
}
ul#lessons h2, ul#lessons p{
margin: 0;
padding: 0;
font-size: 14px;
}
文字の大きさは14pxにしてみましょう。
ここまでできました。文字の大きさも揃って、見やすくなりましたね。
次のレッスンで、先ほど言っていたような
「画像を左、文字を右」にしていきます。
#15 画像付きリストを完成させよう
さて、#14の続きです。
floatを使って画像を左に、説明を右にしたいと思います。
ul#essons .lesson_img{
float: left;
width: 50px;
}
まずは、画像のほうをfloat:leftにします。
画像サイズを先ほどの50pxにします。
ul#essons .lesson_info{
float: right;
width: 440px;
}
そして、情報のほうをfloat:rightにします。
全体の幅が500pxなので、画像を引くと450pxなのですが
間に10pxの余白を入れたいので
幅は440pxに指定します。
float:right なので、自然と間が10pxあくはずです。
そして、floatさせたところには
親要素の高さを指定するclearfixをします。
clearfixに関しては、CSSレイアウト入門の#07でも学習しています。
今回は簡単な方法で。
ul#lessons{
overflow: hidden;
}
先ほどご紹介した#07でも詳しく学習している方法です。
ブラウザで見ると、このようになっています。
おお！かっこよくなりました！
さて、ここまできたら、どのようにしたらリストっぽく見えるか試してみましょう！
html編集画面で、同じ要素をコピペして並べると
このようになります。
ずらっと並んでいますね＾皿＾
うまくいっていはいるのですが、
ちょっと間がつまって苦しそうに見えます。
間をあけてみましょう。
ul#lessens{
paddong-bottom:10px;
margin-bottom:15px;
border-bottom:1px solid rgba(255,255,255,0.4)
}
paddingとmarginの下側をそれぞれ10px、15pxつけました。
わかりやすいように下線もつけてみましょう。
白の半透明の線です。
rgba法については、
CSS3の#03で学習しました。
ブラウザで見ると、こうなっています。
おお！見やすくなりました♪
下のほうにスクロールすると…
一番下の下線と余白はいらないなあ…。
このようなときには。
先ほどのcssに、このように書き加えます。
ul#lessens:not(:last-child){
paddong-bottom:10px;
margin-bottom:15px;
border-bottom:1px solid rgba(255,255,255,0.4)
}
これで、最後のもの以外にこのようにスタイルをあてるよ、という意味になります。
ブラウザで見てみると、
はい、下の線や余白が消えました。
実践的な内容でしたね！
ますます、今までのところを覚えていないときつくなってきました。（白目）
これで、「CSSレイアウト入門」は終了です。
次回からは、また違うレッスンに進んで行きたいと思います。
