羊の羊による羊のための攻略Book

羊のおニート脱出日記

ボックスデザインの余白をいじろう。その1

前回、box15_html.txtとしてメモしたとおりにしてみる。 

 

前回の記事はこちら 

sleepingsheep3.hatenablog.com

 

おおおおお。 

ちゃんと余白ない!

f:id:sheep3-icf:20181204124914p:plain

が。 

箇条書き表示は残したいんだ。 

 

では、HTML部分は箇条書きのままに、CSSの指定先をpじゃなくてliにしたらいいんじゃないだろうか? 

f:id:sheep3-icf:20181204125020p:plain

んんんんんん?(余白復活してしまった・・・)

f:id:sheep3-icf:20181204125055p:plain

 

( ゚д゚)ハッ!  

<ul></ul>で囲まれた箱の中に入ってるからこっちをかえたらいいのかな? 

ulに変えてみる。 

f:id:sheep3-icf:20181204125206p:plain

おおおお・・・できた・・・!でも・・・ 

そうじゃない。。。 

 

ちょっと直したいんだけどどこを直したらなおるのかわからない。 

文字の余白指定の部分だと思うんだけど・・・。 

marginとpaddingて何だろう。 
ざっくり理解じゃ太刀打ちできないので 

taneppa.net

これで見ると、実は羊が「飾り線だ、かわいい!」って思ってたこの線は普通に外枠(border)で、その外側に領域(margin)が付け足されてオシャレボックス感を醸し出してる感じなんだろうか?? 

 

ブログ上でいろいろ試してスクリーンショットするのめんどくさくなってきた。 
ちゃちゃっと試せる方法探そう。 

あと、ソースコードをブログに載せたいけど撮ってぺたっってやる貼る以外にやり方がわからない。 

むむむ。 

 

とりあえずここまで。