とらねこが好きなcssとhtml

ブログを書くときに、cssとhtmlは必要になります。
cssとはCascading Style Sheetの略で、ホームページの装飾をするのに使います。
htmlは、HyperText Markup Languageの略で、ウェブページを作るときの言語ですね。
この言語を使ってブログを作ります。
SWELLを使うと楽にデザインができますが、基本的なcssやhtmlは読める方が便利ですね。
今回は、とらねこのが好きなcssとhtmlを紹介したいと思います。

html色コード

WEB色見本 原色大辞典 - HTMLカラーコード

デザインを紹介する前に、html色コードを紹介しておきます。
色コードを変えれば、自分好みの色に変えることができますね。

cssを入力する場所

WordPressの場合、サイトをカスタマイズというボタンを押します。

次に、追加cssを押します。

あとは、cssを貼り付けるだけです。

Design１

青点線枠がお気に入りです。
このcssとhtmlを紹介します。

css

.box6 {
padding: 0.5em 1em;
margin: 2em 0;
background: #f0f7ff ;
border: dashed 2px #5b8bd0 ;/点線/
}
.box6 p {
margin: 0;
padding: 0;
}

html

<span style="font-family: inherit; font-size: medium;"><br /></span></p><div class="box6"><p><b><span style="color: #3d85c6 ;">ここにテキストを書きます</div>

Design２

オレンジの目次埋込がお気に入りです。
このcssとhtmlを紹介します。

css

.box28 {
position: relative;
margin: 2em 0;
padding: 25px 10px 7px;
border: solid 2px #FFC107 ;
}
.box28 .box-title {
position: absolute;
display: inline-block;
top: -2px;
left: -2px;
padding: 0 9px;
height: 25px;
line-height: 25px;
font-size: 17px;
background: #FFC107 ;
color: #ffffff ;
font-weight: bold;
}
.box28 p {
margin: 0;
padding: 0;
}

html

<div class="box28"><span class="box-title">目次</span><p><br /><b>ここにテキストを書きます</div>

Design３

アイコン付き吹き出しがお気に入りです。
このcssとhtmlを紹介します。

css

.left-side,
.right-side {
width: 100%;
margin: 20px 0;
overflow: hidden;
}
.icon {
width: 100px;
text-align: center;
}
.icon img {
width: 70px;
height: 70px;
border: solid 1px #ccc ;
border-radius: 50%;
}
.icon p {
margin: 0px;
word-wrap: break-word;
}
.bubble {
max-width: 70%;
padding: 20px;
border-radius: 10px;
display: inline-block;
background: #f5f5f5 ;
position: relative;
}
.bubble::before{
content: "";
width: 0;
height: 0;
border: 10px solid transparent;
position: absolute;
}

html

<div class="left-side">
<div class="icon">
<img src="画像アドレスを入れます">
<p>アイコン名を入力します</p>
</div>
<div class="bubble">
吹き出しの中のテキストを入力します。
</div>
</div>

Design４

ストライプボックスがお気に入りです。
このcssとhtmlを紹介します。

css

.box16{
padding: 0.5em 1em;
margin: 2em 0;
background: -webkit-repeating-linear-gradient(-45deg, #f0f8ff , #f0f8ff 3px,#e9f4ff 3px, #e9f4ff 7px);
background: repeating-linear-gradient(-45deg, #f0f8ff , #f0f8ff 3px,#e9f4ff 3px, #e9f4ff 7px);
}
.box16 p {
margin: 0;
padding: 0;
}

html

<div class="box16">
<p>ここにテキストを入力します。</p>
</div>

とらねこがお気に入りのcssとhtmlでした。
他にも気に入ったものがあれば、更新したいと思います(*‘ω‘ *)

---

#とらねこ #ブログ #とらねこの分析アカデミー #note攻略 #エッセイ #毎日note #コラム #毎日更新 #note #ビジネス #ブログ #デザイン #日記 #マンガ #小説 #とらねこの分析室 #文章術 #メンバーシップ #共同マガジン #哲学 #有料記事