Blogger QooQ div style の利用

2022年3月6日日曜日

WEBデザイン

t f B! P L




個別記事の中で、一部分だけデザインを変更したい箇所があるときに、「div style」で直接スタイルシートを記述することができます。
その場合、このような記述になります。 

 

<div style=
     "line-height: 0em;  /*行間の高さ*/
      margin-top: 0px;    /*文字上マージン*/
  margin-bottom: 0px;  /*文字下マージン*/
      background: rgb(0, 0, 0);/*背景色*/
      border-radius: 10px; /*枠の角丸め*/
      border: 2px dotted rgb(17, 17, 17);/*枠線色*/
      color: white; /*文字色*/
      display: inline-block;/*枠の幅を文字列の長さにする*/ 
      padding: 10px;/*字送りの間隔*/
      ">
  <p>
 サンプル
</p>
  
</div>

  <p>と</p>の間に記載された内容が実際に画面上に表示されます。

以前、文章の中に枠囲いがしたくなったときに、一度ご紹介させていただきましたが、今回は、枠内の行間を詰めたかったので。調べたところ「div style」の中に

     "line-height: 0em;  /*行間の高さ*/

      margin-top: 0px;    /*文字上マージン*/

      margin-bottom: 0px;  /*文字下マージン*/

と記述すれば、行間の幅等も変更可能である、ということがわかりました。


参考記事

https://hensa40.cutegirl.jp/archives/3556

https://web-camp.io/magazine/archives/28779

https://www.homepage-tukurikata.com/html/style-zokusei.html

アーカイブ

最近の注目記事

GALAXY Note 3 (SC-01F) ドコモ公式の初期ROM(ストックロム)を焼き直す

  NTTドコモ版「GALAXY Note 3 (SC-01F)」に公式ストックROMを焼き直すには、PC専用ツール「 Odin 」と ドコモ公式のファームウェア(.tar.md5) を使用します。手順を誤ると端末が起動しなくなる(文鎮化する)ため、慎重に作業を行ってください。 ...

QooQ