四角で囲みたいシリーズ、第3弾。
ちょっと装飾のついた枠をHTMLだけで表現できないか試行錯誤してみました。
もちろん、CSSとHTMLを使って表現するのが基本ではあるのでしょうけれども…
私天邪鬼なので (笑)。
HTMLで文章を四角で囲みたい の 関連記事
基本などはこちらを参考に。
| HTMLで文章を四角で囲みたい。 | その１．仕組み編 | |
| HTMLで文章を四角で囲みたい。 | その２．いろいろなパターン編 |
※ここでは、Font Awesome のアイコンを使用しています。
▶ Font Awesome についてはこちらをどうぞ。
▶ カラーコードのリンクはこちらをどうぞ。
枠の原型。
以前に出てきたもののまとめを再掲。
<div style="padding: px;
margin-bottom: px;
border: px solid #;
color: #;
background-color: #;
width: px;
border-radius: px;">
ここに文字 </div>
ここに適当に好きな数を入れます。いらないものは空白のままでＯＫ。
これをHTMLに貼れば、枠が簡単にできます。
※border: solid; 枠線を実線に。
border: dotted; 枠線を点線に。
border: dashed; 枠線を破線に。
border: double; 枠線を二重線に。
※タグに関する説明は、前回記事をご参考ください。
上にタブ、カラー枠、実線、線幅3px、まわり10px、角丸 5px
その１. POINT
<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行以上の文を並べたい時は、「ここに文字」のところは、
<p>ここに文字</p>
<p>次の一文</p>
…
といった具合に、<p></p> タグを使うとOKです。
その2. TIPS
<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>
とりあえず、作ってみました。
ただ、これ、ブラウザによってはうまく表現できないかもしれません。
自己満足の世界ってことで。
▶ こちらのサイトを参考にさせて頂きました。
かわいい見出しデザイン、ステキです。
それでは、このへんで。(*'▽')/
