五回目ーーメイン内容、border、paddingとmarginーー
今回はメインの後半、線と空白についてです。
それでは引き続きメイン内容――ボーダー(線)と空白について話していきたいと思います。
１．ボーダー(線)を付ける
ボーダーというのは『線』です。
分かりやすく言うと、文字の下に付ける線や文字を囲む線のことになります。
プログラミングでは使うプログラムが決まっていますが
(『p』で『div』の役割は果たせない)
出力した結果の……デザイン、はプログラマーの発想と腕次第だと思います。
文字だけでなく文章全体を囲むことも、線を引き情報を分けることも可能だからプログラミングは難しい、ということです。
そして、今回するのはボーダーを引くこと。
プログラマーになってゲームを作りたい！
――――――――――――――――――――――――――
上のような形にしたいということです。
使うのは『border』。
そのまんまボーダーという英語です。
では、早速例を
『HTML』
<div class=”manga-1”>
迷探偵コナン
</div>
<div class=”manga-2”
ドラうぇもん
</div>
『CSS』
.manga-1 {
border: 5px solid red;
}
.manga-2 {
border-bottom:3px solid #333;
}
●『div』を使いグループ化することで個別に線を引く
●クラス名なので頭に【.】が付く
●空白と同じく上下左右の英単語を付けられる
付けなかった場合は四方が囲まれる
形としては
border: 線の太さpx 線の種類 色;
このような三つに分けられ構築されます。
基本の形は変わらないので
線を引きたい＝『border』を使う
こう思っておきましょう。
２．空白を作る(内と外)
空白＝『padding』でしたね。
これは【内側】の空白を作り出します。
そして、次に学ぶのは【外側】の空白－－『margin』を使い作り出します。
『padding』＝内側
『margin』＝外側
片方で良くない？ そう思うでしょう。
私は思いました。
そこで調べてみると……大した違いはない、らしいです。
統一感の問題ですかね？
『margin』は大きい方に依存する。
即ち、10pxと5pxで【外側】の空白を作った時
合計で15pxになるのではなく、大きい方の値『10px』になるということです。
逆に『padding』は相殺が起きず、足し算になるらしいです。
ちょっと考えれば問題ない気もするので今は放置します。
では、例を
『HTML』
１の『manga-1』を流用します。
『CSS』
.manga-1 {
border: 5px solid #ff0000;
padding: 10px;
margin: 20px;
}
このような感じとなります。
言葉にすると
『manga-1』のテキスト『迷探偵コナン』の周囲を5pxの赤線で囲み、【内側】に10px、【外側】に20pxの空白を作りなさい
となります。
これもまた上下左右に英単語を付けることで、その方向のみに空白を作ることが可能です。
そして、『border』『padding』『margin』の三つは【ボックスモデル】という概念らしいです。三種の神器のようなものですかね。
今回は短いですが此処で終わります。
次が初級編の最後『お問い合わせフォームの作成』となり、現在作っている最中のホームページ作りやRPGツクールでマップ作りを経験する予定となっています。
では、読んでくださっている方は引き続きよろしくお願いします。
最終目的
・勿論手に職を付ける、若しくはお金を稼ぐ
・簡単なゲーム(リバーシや簡易シューティングなど)を作る
・フリーソフトで販売
短期目標
・大まかな流れを覚える
・プログラミングを理解する
上記の内容は覚える中で変わることがあると思います。
