CSS HTML 初心者 勉強中。

CSS HTML 初心者です。備忘録的メモです。

   当サイトはアフィリエイト広告を利用しています

HTMLで文章を四角で囲みたい。仕組み編。

 文章全体を四角で囲みたい!

     CSSで指定してやる方法もあるけど、今回は、HTMLで直接指定する方法。

 

ちょっと見にくいです…。

必要な箇所に、目次から飛ぶのがいいかもしれません…(´_ゝ`)

 

 

<div> タグのstyle属性を使う。

枠線の指示は、"border:  ......" です。

 

 

枠線のタイプを選ぶ。

<div style="border: ■;"> ■ </div> 

 例えばコレ。

 

border: solid; は、枠線を実線に。 

 solid

 

border: dotted; は、枠線を点線に。

 dotted

 

border: dashed; は、枠線を破線に。

 dashed

 

border: double; は、枠線を二重線に。

 double

 

 

枠線の太さを選ぶ。

 

<div style="border: ■px solid;"> ■px </div> 

 例えばコレ。

 

 1px

 

 5px

 

 10px

 

 

枠線に余白をつける。

余白については、Chromeのデベロッパーツールでみかけた

この図が分かりやすいかも。

f:id:mikanusagi:20180510232307p:plain

対象のすぐ周りの部分がpadding

その周りがborderで、さらに周りがmargin。 

 

ここでは、paddingで設定してみます。

<div style="padding: ■px; border: 1px solid;"> ■px </div> 

 例えばコレ。

 

 1px 

 

 10px 

 

 

応用編:padding以外の余白も設定。

 

<div style="padding: 10px; margin-bottom: 10px; border: 1px solid;">

margin-bottom: 10px </div> 

 例えばコレ。

 

 margin-bottom: なし 

これと比べて… 

 margin-bottom: 50px 

枠とこの文字の間に少し空白ができました (*´▽`*) この上の部分の空白。

…説明が分かりにくいですね (-"-;)

 

 

 

枠線の色を設定。

 

カラーコードの指示を出します。 

<div style="border: 1px solid #■;"> ■ </div> 

 例えばコレ。

 

 red (#FF0000)

 

 blue (#0000ff)

 

 

カラーコードについては、こちらもご参考にどうぞ。

色をつけたい。HTML, CSS カラーコードの話。

 

 

枠内の文字の色を設定。

 

<div style="border: 1px solid #000000; color: #■;"> ■ </div> 

 例えばコレ。

 

 red (#ff0000) 

 

 blue (#0000ff) 

 

 

ちなみに、borderのところに#■■■■■■ を書かなかったら…

<div style="border: 1px solid; color: #ff0000;"> red </div> 

 例えばコレ。

 

 red 

枠も文字も全部色が変わっちゃいます。 Σ(*´Д`) 

 

 

枠の中の色を設定。

 

<div style="border: 1px solid; background-color: #ccff99;"> #ccff99 </div> 

 例えばコレ。

 

 #ccff99 

 

 

枠の 横幅を設定。

 

<div style="border: 1px solid; width: 200px;"> 200px </div> 

 例えばコレ。

 

 200px 

 

【2018年7月1日追記】

先日気づいたのですが、

pxで幅を指定すると、例えばスマホなどの画面が小さいもので見るときに、

横幅が長くなりすぎたりすることがありました。

画面に併せて調整ということを考えると、

width: 50%、などのような、%表示の方がよいみたいです。(´_ゝ`) 

 

枠の角が丸いもの。

 

<div style="border: 1px solid ; border-radius: ■px;"> ■px </div> 

例えばコレ。

 

 10px 

 

 50px 

 

 

応用編:枠の角の指定を変えてみる

左から順に、左上、右上、右下、左下。

<div style="border: 5px solid ; border-radius: ■px ■px ■px ■px;">

■px ■px ■px ■px </div> 

例えばコレ。

 

 0 30px 0 0 

一カ所だけ角丸にしてみました。(*´▽`*) 

0だと、カーブの指定なしって意味ですね。

※widthで長さも変えてます。 

 

 

まとめ・雛形

これまでに出てきたものをまとめると…

 

<div style="padding: px;

margin-bottom: px;

border: px solid # ;

color: #;

background-color: #;

width: px;

border-radius: px;"> 

■■■ </div> 

 

ここに適当に好きな数を入れます。いらないものは空白のままで。

f:id:mikanusagi:20180511023814p:plain

上のは、こうなりました。

  テスト 

 

こんな感じで、アレンジできますね°˖✧◝(⁰▿⁰)◜✧˖°

好きなパターンの雛形を作っておくと、なお使いやすくなるかと思います。

今度作ろうかな~。(*´▽`*)

 

 

 

パターンの雛形つくりました

コピペしてそのまま使うも、編集して使うもアリです。

…というか、自分が使いたいから作っただけですが、、

よろしければどうぞご利用ください。(*´з`)