九回目ーーHTML&CSS、中央の一覧ーー
簡単とは言えずともやること自体は変わらず覚えるだけでいいのですが、実際書いてみると自分でまとめるのが大変になってきました。
今回はメイン、中央の一覧を作っていきたいと思います。
・全体のグループ――lesson-main
・中央グループ――text(前回と同じにすることで幅の統一が可能)
・上の説明文――heading
・下の説明文画像付き――lesson
グループ分けはこのようになります。
詳しい事は後程行いますが、今までと違う所は文字の太さを変えることや画像の中に文字を表示させるなどあります。
では、早速始めていきます。
１．レイアウトを決める
文字の太さはデフォルト状態で決まっているのですが、『h』を使うと見出しに応じた太さの文字になります。
その太さを普通サイズに変えてみようという話です。
『h』を使った文字は
『bold』＝大胆、勇敢なという意味
転じて太い文字にすることで惹きつける
がデフォルト状態でなっています。
これを通常の文字の太さにするには
『normal』＝普通という意味
殆どの人が分かる英単語を使います。
使い方は
font-weight: normal:
font-weight: bold;
重さという意味を持つ『weight』＝ウエイトを使います。
文字を痩せさせる、若しくは太らせると思えば良いでしょう。
そして、主旨となるレイアウトですが
まず、lesson-mainに高さ、空白、背景色を決めます。
前回と違い背景に画像はありません。
.lesson-main {
height: 700px;
padding-bottom: 50px;
background-color: #A4A4A4;
}
すでに横幅はtextグループによって決まっているので使いません。
次に上の説明文を作る為の幅を指定します。
.heading {
padding-top: 50px;
padding-bottom: 20px;
color: #5f5d60;
}
現状ではデフォルト状態の左側配置となるのですが、そこについては後程指定するので放置します。
上下の空白を作り、文字の色を変えます。
.heading h2 {
font-weight: normal;
}
その上で文字を変えたいテキストを指定して太さを変えます。
『heading』の中に入れても効果は発揮しないので気を付けなければいけません。あくまでもテキストの文字に対して発揮します。
２．画像を綺麗に並べる
綺麗に並べるというのは、幅に応じた大きさでそれぞれ統一する、という意味です。
textにより横幅を指定されているので、その横幅を四等分して表示させます。
そのために使うのは『width』になるわけですが
一々全体の横幅から計算して数値を打ち込むのは面倒で仕方ありません。
そこで四等分＝それぞれ25%というのを使い
.lesson {
width: 25%;
}
これでlessonグループに作った説明文画像付き四つがそれぞれ25%で表示されるようになりました。
ですが、これでは『height』の中に縦表示されてしまうので、横表示に切り替える為に
float: left;
これを書き加えて出来上がります。
３．説明文画像付きの中身について
それぞれ25%で表示する様にした状態です。
中身は説明文のテキスト、画像、画像中央文字の三つから出来上がっています。
テキストと画像表示は良いでしょうが、画像中央に文字を配置するためにはどうしたらいいのか、というのが主旨となります。
<div class="lesson">
<div class="icon">
<img src="URL">
<p></p>
</div>
<p class="textbun"></p>
</div>
まずlessonというグループが四つ分あり、それぞれ統一して表示されるようにします。
iconは画像とその中央の文字を表示させるグループです。
その下に説明文が入り、クラス名を付けるのは画像と別の指定をする為です。
初めに画像の上に文字を配置させる方法を書きます。
position; absolute;
ポジションは位置や配置なので問題ないでしょうが
隣のアブソリュートは完全とか無欠とかを意味する単語となります。
有体に言うと、単独行動を許すという意味になるのでしょう。
デフォルトは『サイト全体の左上』となるのでそこから変えなければいけません。
かなり位置が遠いとするなら
position: relative;
『absolute』の対義語となるレラティヴという単語を使います。
これでサイト左上から『画像(親要素＝グループ)の左上』に表示されるようになります。
では、早速プログラムを書きます。
その前に放置していた全体の中央配置を行います。
前回も使った
text-align: center;
をlesson-mainの中に書き込みます。
これで全てが中央配置に切り替わりました。
.icon {
position: relative;
}
まず中央表示させる画像のグループに先ほどのプログラムを書きます。
これで画像の左上が文字の配置場所となります。
.icon p {
position: absolute;
top:120px;
width: 100%;
}
iconというグループの『p』の文字を画像の上に表示する様にします。
中央配置に切り替わっているので、上から下にどれだけ降ろしたいか指定し、横幅を指定することで左寄りとなっていたものを元に戻します。
. textbun {
width: 80%;
display: inline-block;
margin-top: 20px;
font-size: 12px;
}
最後に『p』に説明文を書きこみ、CSSを書きます。
横幅を100%から変更しますが、『p』はブロックレベルなので横に配置されません。ブロックを積むように縦配置となってしまうので、それぞれ四つの文が横配置になる、その上で横幅の指定が出来る様に『インラインブロック』に変更を加えます。
そして、空白や文字の大きさを変え完成となります。
以上が中央の一覧となります。
最終目的
・勿論手に職を付ける、若しくはお金を稼ぐ
・簡単なゲーム(リバーシや簡易シューティングなど)を作る
・フリーソフトで販売
短期目標
・大まかな流れを覚える
・プログラミングを理解する
上記の内容は覚える中で変わることがあると思います。
