ワードプレス×HTMLとCSS。画像や余白をなんとかしたい!

ひねくれ美容_ワードプレス_HTML_CSS

SPONSORED LINK

大好評!HTMLと
CSS講座第2弾

ひねくれ美容ライターのぱおちゃんです(・ω・)

前回、友達SEが教えてくれたHTMLとCSSのプログラミング講座
スパルタ指導のおかげで、なんとかぱおちゃんも、プログラミングを少し触ることができました。

まだまだ、友達SEプログラミング講座は続く
今回は、margin padding borderの話なのだとか!

 

画像や余白に使えるプログラミング

〈〈以下、友達SE〉〉

友達SE
ぱおちゃん。久しぶり!
htmlのことで、今度説明するね、っていったこと覚えている?

●証拠写真

ひねくれ美容_ワードプレス_HTML_CSS

ぱおちゃん
(どきり)
プログラミングって、初めてだから、教えてもらうたびに頭がパンクしそうになるの
友達SE
大丈夫だよー。
初めは難しいかもだけど、プログラミングは基礎の応用ばかりだがら、基礎さえ覚えてしまえば大丈夫!

今回は、margin padding borderについて説明していきます。

この考え方はとても重要で、画像の大きさ余白ボックスの線の幅
さまざまなところで、出てきます。

基本的なボックスモデルはこれです。
これは絶対に覚えておいて、損はナシ!

 

margin、paddingの書き方

ボックスモデル
参照;web design recides

上記の画像を見てわかる通り、コンテンツ領域(widthやhightで指定できる箇所)から、borderまでの余白をpadding
borderから端をmarginといいます。
今回の場合(1)は130PXになりますね。

marginプロパティ

margin、paddingは基本的に書き方は同じです。
margin:10px; <!--(上下左右)-->
margin:10px 20px; <!--(上下)(左右)-->
margin:10px 20px 30px; <!--(上)(左右)(下)-->
margin:10px 20px 10px 30px; <!--(上)(右)(下)(左)-->

「右」だけに余白をつくりたいという場合は、余白の箇所を1つだけ指定することも可能です。
margin-top:10px; <!--(上)-->
margin-bottom:10px; <!--(下)-->
margin-left:10px; <!--(左)-->
margin-right:10px; <!--(右)-->

続いてborder

borderは、線の太さ、スタイル、色を同時に指定することが出来ます。
border:10px solid #fff;

線のスタイルに関しましては代表的なものとしては下記のようなものがあります。
solid(実線)
double(二重線)
dotted(点線)
dashed(破線)

また、borderも上下左右すきなところだけ適用させることが出来ます。
border-top:10px solid #000; <!--(上)-->
border-bottom:10px double #000; <!--(下)-->
border-left:10px dotted #000; <!--(左)-->
border-right:10px dashed #000;<!--(右)-->


 

配置について

皆さんも、divタグで書いてしまうと、横に並べたいのに、縦並びになってしまう事ありませんか
そんな時は、floatプロパティを使います。

floatプロパティ

<div><img src="画像のurl" alt="ひねれく美容" width="450" /></div>
<div><img src="画像のurl" alt="ひねれく美容" width="450" /></div>

例えば、このようなコードがあったとしましょう。

何もしていなければ、画像は縦に並んで出力されます。
<div style="float: left;"><img src="画像のurl" alt="ひねれく美容" width="450" /></div>
<div style="float: left;"><img src="画像のurl" alt="ひねれく美容" width="450" /></div>

と、floatを指定することにより画像が左に回り込み、横並びにすることが出来ます。

今回はHTML内にインラインで書き込みましたが、css内でも「float:left:」と記載すれば、横並びになります。

画像を真ん中にする

また余談ですが、画像を真ん中に持ってくる場合、
margin-left:auto;
margin-right:auto;

と、することにより真ん中に持ってこれます。

positionプロパティ

positionは、配置する方法を指定することが出来ます。
下記のように記載することが出来ます。
position:static;
top:10px;
left:10px;

positionで指定した位置から、どれだけ移動させるかを記述できます。
positionのプロパティーとしては、下記のようなものがあります。

static(初期位置)
relative(初期位置を基準とした相対位置)
absolute(親要素を基準とした絶対位置)
fixed(絶対位置・固定)

positionも上下左右位置を指定することが出来ます。
top:20px; <!--(上から10px)-->
bottom:20px; <!--(下から10px)-->
left:20px; <!--(左から10px)-->/
right:20px; <!--(右から10px)-->

positionを覚えておくことにより、より複雑なレイアウトを可能にします。

友達SE
例えば、画像を組み合わせることやブロックとブロックを重ねて表示させることも出来ます。

 

ぱおちゃんのまとめ

なんだか、ぱおちゃんのブログに関する知識のキャパも増えた気がする。

というか、エンジニアという仕事。
すごい尊敬!

次回も、初心者にやさしいプログラミング講座をお届けしますから、お楽しみに♡

 

人気の関連記事

シェアしてキレイを有言実行!

ひねくれ美容_ぱおちゃん

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です