まりふのひと

HTML/divタグでブログの文章を角丸四角形で囲みたい...

目次(リンク)

f:id:ogohnohito:20130520050353p:plain


 このブログ「まりふのひと」は

  • (インストールした)テーマ:MINIM
  • 編集モード:はてな記法

で作成している。
 HTMLとか CSSという言葉は知っているが、理解は出来ていない。
コピペ&試行錯誤で、目先を変えているだけ...



 上記は次にように入力してある
f:id:ogohnohito:20210720102150p:plain:w512
今回は下記サイトから引用し "border-radius: 8px;" を追加したら「角丸」が出来た...

🌐HTMLのborderで線を引く!おしゃれに線を使いこなそう! | ポテパンスタイル

style.potepan.com
borderで線を引く
 この記事では、CSSで線を引くborderプロパティの使い方について解説します。
WEBデザインで線を引くことは頻繁にあり、borderプロパティの知識はWEB制作において、必須知識になるので、是非覚えておきましょう。
記事の後半では、CSSのborder-radius使って、角丸の線を引く方法や<hr>タグの使い方についても解説します。
hrタグで線を引く
 水平線を引くのであれば、CSSのborderプロパティの他に、<hr>タグで線を引くこともできます。ここからは<hr>タグについて、少し触れていきます。
<hr>タグは、次のイメージのように水平に1本の線を引き、文章の区切りをつける時に使用するタグです。文書内で大きく話題が変わるときなどで使用します。

 色々使ってみたいものもあるが‥‥ 下記サイトの background: #efefef; も使ってみたい...

🌐今さら聞けない!? CSSのborder-radiusで様々な角丸に挑戦! | Webクリエイターボックス

www.webcreatorbox.com
 要素の四隅の角を丸めるためのCSSプロパティー「border-radius」。ボックスや画像などの要素に対して適応でき、角丸にしたりまん丸にしたりと、様々な表現が可能です。このプロパティーが使えるようになってから、どれだけコーディングが楽になったか…!今回はそんなborder-radiusの基本的な使い方と、応用表現を紹介します!