画像の回り込み指定 float指定について
前回挿入した画像に対して、記事の回り込み指定をしました。
難しいというよりもややこしいなと感じた部分があったので紹介していきたいと思います。
float
今回記述した内容は以下のとおりです。
article {
background-color: #ffffff;
width: 900px;
margin-left: auto;
margin-right: auto;
border: solid 1px #aaaaaa;
padding: 30px;
box-sizing: border-box;
margin-bottom: 15px;
box-shadow: 1px 1px 3px #aaaaaa;
border-radius: 20px;
overflow: hidden;
}
/*フッター*/
footer {
width: 900px;
margin-left: auto;
margin-right: auto;
clear: both;
}
/*画像を左に配置するレイアウト*/
figure.photo-left {
margin: 0;
margin-right: 20px;
float: left;
}
figure.photo-left img {
width: 550px;
}
/*画像を右に配置するレイアウト*/
figure.photo-right {
margin: 0;
margin-left: 20px;
float: right;
}
figure.photo-right img {
width: 550px;
}
赤字の部分が今回記述した内容です。
前回から登場したfigureというクラスに対しての指定ですね。figureとは画像を配置するときに使用するタグなので、簡単に言えば画像に対するレイアウトの指定です。
大きな変更点はfloat指定が入ったことです。これにより、画像を記事の左右に回り込めるように指定しました。
figure.photo-left right
figure.photo-left rightでは、marginで余白の指定とfloatで回り込みの指定をしています。marginを0に指定することで、文章と画像が左端または右端に揃った状態で表示できます。
overflow: hidden
overflow: hiddenはarticle部分の記述してある指定です。ただ画像を貼り付けただけでは、画像の幅が640pxなのではみ出してしまいます。その不具合を解消するため、overflow: hiddenを使ってarticle部分からはみ出した部分は自動的に表示させないで！という指定しています。
clear: both
clear: bothはfooter部分に記述した指定です。これを指定しないと、footer部分まで画像の左右まで回り込んでしまうため、clearプロパティをbothに指定します。clearプロパティは以下の4種類があります。
- both 左右どちらも（英語意味→どちらも）
- left 左のみ
- right 右のみ
- none 初期値
以上の指定は回り込み解除という意味があります。したがって、今回の指定はfooter部分の回り込みを左右方向に対して解除した、という指定になっています。
figure.photo-right left img {width: 550px;}
この指定は画像の幅を550pxにするという意味があります。元々640pxあった画像の横幅を小さくする理由はひとつ。回り込んだ文章を見やすくする意味があります。これを指定しないと、このサイトの場合きれいに文章を表示させることができません。
まとめ
今回から新たに登場したのは、overflow: hiddenとfloat: left rightとclear: bothです。いずれも画像を触るときによく使っていくことになりそうな指定ばかりです。float指定は文章にも使いますが、指定した部分が左右に移動することを覚えておく必要があります。
記述していて混乱したのが、画像が左右に来るのか、文章が左右に来るのかよくわからなくなりました。今回の記述で言えば、画像が指定どおりに左右に移動します。
今回のBefore Afterです。
Before
float-left
float-right
floatなし
色々記述しましたが、結局元通りって感じなので、進んだ感覚がまるでありません。画像のwidthが効いてないのかな？って感じもしますが、記述ミスはなさそうなので、このまま進めていこうと思います。
画像の配置とレイアウトを整える
今回は画像の配置と画像のレイアウトを整える作業をしました。
画像の配置
以下、今回の記述内容です。
HTML
<article>
<h1>真夏のひまわり畑</h1>
<p>森の工房の隣にある畑は毎年夏になると満開のひまわりの花で黄色く染まります。ひまわりは「日輪草」とも呼ばれ、太陽に向かって花を咲かせます。大きなひまわりは背丈が2メートルを超え、見ごたえも十分です。畑の周囲約5キロの散策コースになっていますので、花を見ながら散歩をするのもおすすめです。</p>
<figure class="photo-center">
<img src="sunflower.jpg" alt="青空とのコントラストで黄色いひまわりが眩しく輝いています。">
</figure>
<p>太陽の光をいっぱいに浴びたひまわりの種は、冬の間の野鳥たちの餌になります。また、ひまわり油も抽出し、料理やお菓子作りに活用しています。ひまわりの種を香ばしくローストしたクッキーも人気商品です。</p>
</article>
/*フッター*/
footer {
width: 900px;
margin-left: auto;
margin-right: auto;
}
/*画像を中央に配置するレイアウト*/
figure.photo-center {
text-align: center;
margin-top: 30px;
margin-bottom: 30px;
}
赤字の部分が今回追加した記述です。
久しぶりにHTMLを触った感覚ですね。
画像の配置自体は、
<img src="sunflower.jpg" alt="青空とのコントラストで黄色いひまわりが眩しく輝いています。">
以上の記述でOKです。
img srcというセレクタにsunflower.jpgという値を入れている感じですね。altは画像を文字で説明するために必要なタグです。
SEO効果もあると言われているので、画像の挿入時には必ず入れておきたい記述です。
ただ、画像を配置する際に、<figure>タグを入れました。この記述をしても画面上ほとんど変化はありませんが、（画像が少し左下に下がる）ここに画像を配置してますよ！って宣言していることになるので、画像を配置する際はできるだけ記述したほうが良さそうです。
ただし、◎や☓などの簡単な画像を挿入する場合は不要みたいですね。画像自体に大きな意味を持たせる場合に記述すると良いようです。
※画像ファイルはstyle.cssとHTMLファイルが入ったフォルダに入れておく必要があります。
figure.photo-center
これは参考テキストが勝手に付けたクラス名なので、別に他の名前でも問題ありません。figure.photo-centerでは、画像が中央に来る指定（text-align: center;）と画像の上と下に余白を大きくする指定（margin-top: 30px;
margin-bottom: 30px;）をしました
この指定自体は理解すればとても簡単です。画像を見てみると実際に中央に寄っているのがわかるので、目で見て実感できる変化は楽しいですよね。
ちなみに、クラス名を指定するときは、なるべく具体的じゃない物を指定すると良いそうです。CSSの記述はあとから追加するパターンがかなり多いそうなので、ふんわりとしたニュアンスでつけるのが一般的だそうです。
というか、まずこの説明がふんわりしていますよね。簡単に言うと以下のようになります。
じゃんけんと付けるのは◎
グーチョキパーのグーとつけるのは☓
という感じです。語彙が足りないので、これで理解してもらえることを祈っています。
まとめ
今回の記述で目新しいものと言えば、figureタグですね。今までアフィリエイトサイトを何個か作成したことがありますが、こんなタグを入れたことはありませんでした。
今後サイトを作っていくのに際し、覚えておくと良いタグのひとつかもしれません。
今回のBefore Afterです
画像を挿入したことによって、全部映らなくなってしまいましたが、今のところ順調にサイトが完成に向かっています。
この調子で引き続き勉強をがんばっていこうと思います。
Googlefontsを活用して、ヘッダーのフォントを変更する
今回やったことはただひとつ。ヘッダーのフォントを変更しただけです。
ヘッダーのフォントを変更する
以下、今回の記述です。
最上部
@import url('https://fonts.googleapis.com/css?family=Chango');
body {
font-family: "メイリオ","Hiragino kaku Gothic Pro",sans-serif;
background-color: #edede3;
margin: 0;
}
h1 {
font-size: 38px;
margin-top: 0;
margin-bottom: 0;
}
～省略～
/*ヘッダー*/
header {
background-color: #ffffff;
border-bottom: solid 1px #aaaaaa;
margin-bottom: 30px;
box-shadow: 0 1px 7px #aaaaaa;
padding: 5px;}
header h1 {
font-family: 'Chango', cursive;
font-size: 24px;
width: 900px;
margin-left: auto;
margin-right: auto;
}
赤字の部分が今回追加した記述です。
まず最上部に
@import url('https://fonts.googleapis.com/css?family=Chango');
と記述します。
これはGoogle fontsを使う場合に必要な記述です。Google fontsについて詳しく記載されてあるサイトがあったので、以下から参考にしてください。
なぜ上記のサイトを参考したかというと、HTML&CSS3レッスンブックを参考テキストにしているんですが、このテキストで紹介されている方法は古いらしく、全然参考にならなかったからです。同じテキストを参考にしている方なら、いずれぶつかる壁だと思うので、上記のようなサイトを参考にすることをおすすめします。
では本題に戻ります。
@import url('https://fonts.googleapis.com/css?family=Chango');
と記述し、Google fontsを読み込めるようにしておきます。次に、ヘッダー内に
header h1 {
font-family: 'Chango', cursive;
font-size: 24px;
width: 900px;
margin-left: auto;
margin-right: auto;
}
上記の新しいセレクタを記述します。h１で記述しなかったのは、このページにはh１がふたつ存在するからです。h１で一緒くたに指定してしまうと、body下部にあるh１にも適用されてしまうので、それを避けるためにheader h1とセレクタを指定する必要があります。
もし、このページにh１がひとつしかなかった場合は、h１だけで指定しておけば問題ありません。
font-family: 'Chango', cursive;
これはchangoというGoogle fontsを使うという指定です。これはページ最上部にある指定がなければ有効になりません。cursiveという記述については、Google fontsからコピペしているだけなので、詳しい解説はありませんでしたが、必要な記述なので、しっかりコピペして使用しましょう。
文字サイズ 余白と横幅の指定
font-size: 24px;
width: 900px;
margin-left: auto;
margin-right: auto;
上記の記述により、文字サイズは24pxになり、横幅が900pxに指定されました。さらに左右の余白を均等にするようにしているため、バランスが取れたヘッダーをデザインできました。
ただし、以前フッターについて話したときと同じように、ヘッダー全体が左に寄っているため、左寄りに見えるデザインになっています。しかし、ヘッダーという枠全体で見たときは、左右均等の余白に指定されています。
まとめ
今回行ったことは非常にシンプルで、Google fontsの使い方さえ理解していれば、何も難しいことはありませんでした。ただ、テキストで紹介している方法が通用しなかったので、新たにGoogle fontsの設定の仕方を探す手間が必要になっただけです。
今回のBefore Afterです。
Before
After
ヘッダー部分のフォントが変更したのがわかると思います。今回のように簡単な設定で、大きくデザインが変わるのは、やっていて楽しいなって感じますね。
引き続き勉強していきます。
ヘッダーをバーの形にデザインしていく
今回はヘッダーのデザインを記述していきました。今まで使ったことのある指定ばかりなので、特に難しいと感じることはありませんでした。
ヘッダーのカスタマイズ
今回の記述は以下のとおりです。
body {
font-family: "メイリオ","Hiragino kaku Gothic Pro",sans-serif;
background-color: #edede3;
margin: 0;
}
h1 {
font-size: 38px;
margin-top: 0;
margin-bottom: 0;
}
p {
line-height: 1.5
}
/*ヘッダー*/
header {
background-color: #ffffff;
border-bottom: solid 1px #aaaaaa;
margin-bottom: 30px;
box-shadow: 0 1px 7px #aaaaaa;
padding: 5px;
}
やはりヘッダー部分のデザインなので、ヘッダーの指定がほとんどでしたね。今回の記述の目的は、ヘッダーをバーの形にすることです。
そのためにまずはbodyのmarginを0に指定しました。
デフォルトスタイルシートの指定のままだったので、それを0に指定することによって、body全体の余白が0になりました。
border-bottom
header部分に
border-bottom: solid 1px #aaaaaa;
と記述することによって、罫線を表示させることができます。
margin-bottom
h1部分にmargin-bottom; 0と指定することにより、デフォルトスタイルシートの記述を変更して、マージン部分の余白を0にしました。
次にheader部分に余裕を持たせるために、margin-bottom; 30pxと記述します。
box-shadow
header部分に影をつけるために、
box-shadow: 0 1px 7px #aaaaaa
と記述します。box-shadowの値のルールは、0が右の影の度合いで、1pxが下の影の度合いを示し、7pxがぼかしの度合いを示しています。#aaaaaaは影の色です。
padding
header部分にpadding: 5pxをつけることによって、ゆったりとしたレイアウトを作ることができます。
まとめ
今回は記述が難しく感じることはありませんでしたが、実際にデザインをしていく方向だったので、何をやっているのかよくわからなくなる時間がありました。
今回のBefore Afterです。
Before
After
ヘッダーが少しシュッとしたでしょ。
それくらい変化しかありませんでした。少しずつサイトが形になっていっているので、それがとても楽しいです。最終型はまだまだ遠いですが、今日のようにまとめ続けていこうと思っています。
box-shadow＆角を丸くする！
今回記述したのは以下のとおりです。
box-shadow
/*記事*/
article {
background-color: #ffffff;
width: 900px;
margin-left: auto;
margin-right: auto;
border: solid 1px #aaaaaa;
padding: 30px; box-sizing:
border-box; margin-bottom: 15px;
box-shadow: 1px 1px 3px #aaaaaa;
border-radius: 20px;
赤字の部分が今回追加された記述です。
今回は本当に簡単でした。
box-shadow: 1px 1px 3px #aaaaaa
セレクタで影をつける指定をして、値の部分は横のオフセット 縦のオフセット ぼかし幅という順番で記述されています。
つまり横に1px縦に1pxのboxshadowが効き、そこに3pxのぼかし幅が効いているという指定になっています。
値の部分をマイナス値に指定すると、横の場合は左方向に影が付き、縦方向の場合は上に影がつくルールになっています。
box-shadow: -1px -1px 3px #aaaaaa
上記のように記述すると、左側と上側に影がつく指定になります。
border-radius
border-radiusの指定は、テキストを表示させているボックスの角を丸くするための指定です。
border-radius: 20pxと記述することによって、角の半径を20pxに指定できます。同時にbox-shadowで付けた影も自動的に丸くなります。
4つの角をそれぞれ値を指定して、それぞれ違う形で丸くすることも可能です。
border-radius: 10px 30px 50px 70px
と指定した場合、10pxが左上 30pxが右上 50pxが右下 70pxが左下の記述になります。
左上から始まって時計回りに指定していく感じです。
まとめ
今回のBefore Afterはほとんど変化はありせんでした。
Before
After
簡単に言うと角が丸くなって影がうっすら付いたくらいの変化しかありません。記述も簡単でしたし、特に悩むことはありませんでした。ただ、border-radiusとbox-shadowの変化をつける値を覚えないといけないなって実感しています。
box-shadowの値の場合は、+値で書けば右と下という順番に影が出て、-値で記述すると左と上に影が出るようになることを覚えておく必要があります。
border-radiusの場合は、それぞれの角を異なる指定をする機会はほとんどないと思いますけど、値の部分が左上から時計回りに指定が入ることを覚えておいたほうが良いと思います。
覚えることが多すぎて頭が軽いパニック状態になっている部分もありますが、この調子で勉強を積み重ねていきたいと思っています。
罫線で囲む！box-sizingを理解するのに時間が掛かった
今回はアーティクル部分を罫線で囲み、余白を調整して文章を読みやすくするコーディングをしました。
罫線で囲む
以下今回の記述内容です
/*記事*/
article {
background-color: #ffffff;
width: 900px;
margin-left: auto;
margin-right: auto;
border: solid 1px #aaaaaa;
padding: 30px;
box-sizing: border-box;
margin-bottom: 15px;
}
罫線で囲む記述は、 border: solid 1px #aaaaaa;になります。これはsolidという罫線の種類を1pxの太さで囲むという指定です。
これは理解しやすいんですが、次のpaddingからつまづき始めました。
padding
上記のようにコンテンツはpadding→border→marginの順番に囲まれています。今回指定したのは、paddingなので、paddingの値が30pxになっています。paddingだけを記述した場合、全方向に30pxの幅ができます。左右合わせると60pxとなり、上下を合わせても60pxとなります。
paddingは上下左右に方向をつけて指定することもできます。
padding-top 上
padding-bottom 下
padding-left 左
padding-right 右
今回のように方向を指定しない場合は、全方向に指定されるようになっています。
また連続して指定することも可能です。
その場合は方向の指定を省略することができます。
padding:10px 20px 25px 40px;
手前から順番に上右下左方向の指定になります。
この場合は上10px 右20px 下25px 左40pxということになります。これはpaddingだけに限ったルールではなく、marginにも適応できるルールです。
box-sizing: border-box
box-sizing: border-box;の指定は本当に理解に苦しみました。なんでそうなんの？って疑問しか湧いてこず、飲み込むのに1時間くらいかかり、なんとか理解できたかな？って感じです。
box-sizing: border-box;の指定は、width: 900px;と指定されているのに対し、どこまでで900pxにするのか決める指定です。
box-sizing: border-box;と指定すると、border-box＝ボーダー（罫線）までを含めて900pxになります。
box-sizingにはもうひとつ指定があり、content-boxという値があります。この値を指定すると、コンテンツまでを含めた横幅になります。box-sizing: border-box;よりも狭い幅を含めた指定となります。
box-sizing: border-box;を指定しないと、
コンテンツの900px+paddingの60+borderの2=962pxになります。これを指定しないとフッターとのバランスが崩れて表示されてしまいますし、面倒な計算をしなくてはいけません。計算が一気に省けて、きれいに表示できるんだから使わない手はありません。
margin-bottom:
margin-bottom: 15px;の指定は、アーティクル部分の下のmarginを15pxにするという指定です。
まとめ
今回は初めてCSS3が難しいかもって思いました。box-sizingが本当に悩みの種で、本当にこの理解で合っているんだろうか？と今でも疑問に感じています。
今までBefore/Afterを紹介するのを忘れていたので、今回から紹介していこうと思います。
Before
after
見てわかるとおり、本当にスッキリとした何の特徴もないただのペラとしたサイトです。
でも、これにはたくさんの記述が詰まっているので、1つサイトを仕上げるのは本当に大変なことなんだなって実感しています。少しずつサイトが形を成していくのは、けっこう楽しいです。
このブログに勉強したことをまとめていくのも、大きな助けになっています。
これからも勉強して、一日も早くWEBデザイナーになれるようにがんばっていこうと思います。
CSS3の正しい記述方法！背景色と余白の指定＆コメントアウトの付け方
今回CSSを記述していって、大きな間違いをしていることに気が付きました。
CSSの正しい記述方法
それは、基本的な記述方法です。 以前は下記のように書いていました。
h1 { font-size: 38px}
ですが、これは推奨される書き方ではなく、推奨される書き方は以下のようになります。
h1 {
font-size: 38px;
}
これが正しい書き方なので、今回から急いで修正して書き直しました。はてなブログに慣れていないため、プログラミングの記述をうまく掲載することができないのがとても残念です。
これはテキストで紹介されていることではないので、「最初が肝心なんだからはっきり言っておけよ！」と心の中で叫びましたね。 上記ひとつだけの記述だけだと、ほとんど変わらないように見えるかもしれませんが、複数の記述をしていくと、見やすいメリットがあることに気が付きました。
あと、宣言のあとに必ずセミコロンをつける癖も付けたほうがいいなと思います。
セミコロンを付けておくと、後々追加したい記述が増えたときも、すんなり記述できるので、宣言のあとはセミコロン！って感じで覚えておこうと思います。というかcrescent eveを使っていると、勝手にセミコロンを付けてくれるので、特に意識する必要はないかもしれませんね。
それでは本題に入っていきます。
背景色の指定
今回記述した内容は以下のようになります。
body {
font-family: "メイリオ",
"Hiragino kaku Gothic Pro",
sans-serif;
background-color: #edede3;
}
h1 {
font-size: 38px;
}
p {
line-height: 1.5;
}
/*ヘッダー*/
header {
background-color: #ffffff;
}
/*記事*/
article {
background-color: #ffffff;
width: 900px;
margin-left: auto;
margin-right: auto;
}
/*フッター*/
footer {
width: 900px;
margin-left: auto;
margin-right: auto;
}
赤字の部分が今回記述した内容です。
ヘッダー部分とアーティクル（記事）部分にbackground-colorと記述してあるのがわかると思います。
この記述によって、ヘッダー部分と記事部分の背景色を#ffffffという色に指定しています。この色はテキストでは象牙色と紹介されていますが、僕のパソコンでは灰色っぽい感じの色で表示されています。
これは難しい指定でもなんでもないので、背景色を指定するときは、対象となるセレクタを選び、そこにbackground-colorと好きな色の値を記述するだけOKです。
コメントアウト
そうそう今回からコメントアウトの記述も登場しました。コメントアウトとは、記述を明確にするためのメモみたいな役割を果たしてくれます。上記の記述で言うと
/*フッター*/
/*記事*/
以上の2つが該当します。
/*メモしたい内容*/これでコメントアウトが完了です。あとから記述を追加するときに役立つので、ぜひ活用していきたい機能です。
余白の指定
今回余白の指定をしたのは、記事部分とフッター部分です。
記述は以下のようになります。
/*記事*/
article {
background-color: #ffffff;
width: 900px;
margin-left: auto;
margin-right: auto;
}
/*フッター*/
footer {
width: 900px;
margin-left: auto;
margin-right: auto;
}
widthは横幅という意味があり、それを900pxに固定する指示を出しています。margun-left rightは右と左の余白の指定になります。左右の余白にautoと指定することによって、自動的に左右の余白がに均等になり、記事を中央に配置するように指定しています。
ただし、フッターに限っては左寄せになっているように見えます。これはフッターのコピーライトが左端に寄っているからそう見えるだけであって、実際のフッター全体は左右の余白が均等になり、中央に寄るように指定されています。
まとめ
今回やってみたのは、余白の指定と背景色の付け方です。難しい内容ではありませんでしたが、marginは指定方法がたくさんあるそうなので、それを覚えていくのが大変そうだなぁって思います。
何よりも参考にしているテキストには推奨されているCSS3の記述方法を教えてくれていなかったことに怒りを感じていますね。過ぎたことなので、もうどうでもいいですけど、CSS3の教科書を謳っているなら、推奨されている記述方法くらい最初の段階で教えておいてほしいなって思いました。
