最短ホームページテンプレートのカスタマイズはどこまで出来る?

最短HPテンプレートCSS

最短のCSSファイルを覗いてみると、body、テーブル・段落、リンク、コンテンツ、スペースと言った最低限の項目が並んでいます。まぁ、せっかくカスタマイズするのだからもう少し取り入れてみましょうか

まず、超簡単に使えるspanタグ・・ある言葉や文章にマーカーをひく感じにしたい時などに便利!

【例】最短ホームページテンプレートのカスタマイズはどこまで出来る?

【HTML】最短ホームページテンプレートの<span>カスタマイズ</span>はどこまで出来る?

【CSS】span{background-color:#ffff99;}


文章の左だけに線をつけたい時(見出しなどに効果的)

 左にだけ線を引く場合

【HTML】<p class=line>左にだけ線を引く場合</p>

【CSS】.line{border-left:solid 4px red;}

ボックスを作る

私がよく使用するのはbox・・tableタグの代りに使用し、慣れるとタグ数が少なく済むので楽でーす♪

【HTML】<div class=box></div>

【CSS】.box { width:400px; height:300px; border:solid 1px #000;}

上記CSSの数値を色々変更すると大きさや色の違うボックスが出来ま~す♪

.box { width:350px; height:350px; border:solid 2px blue;}だと、正方形の枠で青の太線・・ですね

ボックスの応用2

ボックスを横に2つ並べたソースを載せておきます

【HTML】<div class=container>

<div class=item>ボックス-1</div> <div class=item>ボックス-2</div> </div>

【CSS】.container{width:780px;height:auto;display: flex;justify-content:space-between;flex-wrap:wrap;}

.item{width:380px;height:300px;border:1px solid #000;}

ボックスの応用3

ボックスを横に2つ並べて右サイド風にしてみました

CSSで2つのボックス枠を非表示(border:0)、背景色(background-color)をそれぞれ設定、flexboxを指定すると以下のようになります

-----------------の部分に文章を入れていく場合、CSSで色々調整する必要が出て来ます。ボックス枠の高さを指定するか、autoにするか・・paddingはどうするか・・など

これはCSSに慣れてくるとキレイな表示をさせる事が簡単に出来るようになるでしょう