CSS HTML 初心者 勉強中。

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

HTMLだけで文章をかこむ枠に装飾をつけたい。

四角で囲みたいシリーズ、第3弾。

ちょっと装飾のついた枠をHTMLだけで表現できないか試行錯誤してみました。

もちろん、CSSとHTMLを使って表現するのが基本ではあるのでしょうけれども…

私天邪鬼なので (笑)。

 

 

HTMLで文章を四角で囲みたい の 関連記事

基本などはこちらを参考に。

HTMLで文章を四角で囲みたい。 その1.仕組み編  
HTMLで文章を四角で囲みたい。 その2.いろいろなパターン編  

 

※ここでは、Font Awesome のアイコンを使用しています。

▶ Font Awesome についてはこちらをどうぞ。

便利なフリーアイコン: Font Awesome を導入。

 

▶ カラーコードのリンクはこちらをどうぞ。 

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

 

枠の原型。

以前に出てきたもののまとめを再掲。

<div style="padding: px;

margin-bottom: px;

border: px solid #;

color: #;

background-color: #;

width: px;

border-radius: px;"> 

ここに文字 </div> 

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

これをHTMLに貼れば、枠が簡単にできます。

※border: solid;  枠線を実線に。
 border: dotted;  枠線を点線に。
 border: dashed;   枠線を破線に。
 border: double;  枠線を二重線に。

※タグに関する説明は、前回記事をご参考ください。

 

 

上にタブ、カラー枠、実線、線幅3px、まわり10px、角丸 5px

その1. POINT

 

POINT
  黄色枠、実線、線幅2px、まわり10px、角丸 5px

 

<div style="padding: 3px 5px 0px 15px; font-family: Open Sans,Arial,sans-serif; color: #FFFFFF; background-color: #ffd700; border-radius: 5px 5px 0 0; width:12%; align: center;"><i class="far fa-hand-point-up"> <strong>POINT</strong></i></div>

<div style="padding: 10px; border: 3px solid #ffd700; border-radius: 0 5px 5px 5px"> ここに文字 </div>

 

その2. TIPS

 

TIPS
  青色枠、実線、線幅2px、まわり10px、角丸 5px

 

<div style="padding: 3px 5px 0px 15px; font-family: Open Sans,Arial,sans-serif; color: #FFFFFF; background-color: #0000ff; border-radius: 5px 5px 0 0; width:10%; align: center;"><i class="fas fa-tag"> <strong>TIPS</strong></i></div>

<div style="padding: 10px; border: 3px solid #0000ff; border-radius: 0 5px 5px 5px"> ここに文字 </div>

 

とりあえず、作ってみました。

ただ、これ、ブラウザによってはうまく表現できないかもしれません。

自己満足の世界ってことで。

 

 

 

▶ こちらのサイトを参考にさせて頂きました。

  かわいい見出しデザイン、ステキです。

 

 

それでは、このへんで。(*'▽')/