先日書いた記事にて「背景色どうやるの？」的なことを聞かれたので

先日投稿した記事において、記事中に背景色を変えたコードを掲載しました。

この背景色ってどうやってるの？って聞かれたので、記事にした次第です(´∀｀)

基本的には、HTMLタグに直接CSSを打ち込んでいるだけに過ぎませんが、普通の方には分からない部分なんだなと思い、ある程度コピペで済む様な感じを載せてみます。

まず、ここでお話するのは、アメブロで「ブログを書く」から投稿しますよね。
初期状態であれば、「タグ編集エディタ」になっていると思います。

以下の画像のオレンジ色の枠で囲ってる部分です。

確か別のエディタや新エディタと３タイプあった気がします。
タグ編集エディタ以外は利用していないので、ご了承ください。

まず、先日のコード掲載部分ですが、こちらのタグを利用しました。

<pre>
　　ここに書きたい事
</pre>

多分、タグ編集エディタでは、連続での半角スペースが利用できないと思うので、「<pre></pre>」タグを用いました。
このタグは書いた通りに表示できるタグですが、この半角括弧「<　>」などは特殊なコードを利用しないと表示できません。

　< ＝ &lt;
　> ＝ &gt;

ただし、全角の＜＞はそのまま表示できます。

して本題ですが、背景色を付けるにはこのようにしているのです。

<pre style="background: #fff7ed;">
    ここに書きたい事
</pre>

「pre」タグの中に「style="background: #fff7ed;"」というコードを追加しました。
「style」はスタイルシートという物で、HTMLタグに装飾を施してあげる事が出来る子です。
スタイルシートは別名「CSS（カスケード・スタイル・シート）」と言います。
WEBの制作者さんは、このCSSと言うものでホームページの装飾をしているのです。

しかしながら上記のものだけでは、テキストが端っこにピッタリとくっついた状態になってしまいます。
以下は例です。

例です(´∀｀)

これでは少々見栄えがあんまりよろしくない(；´Д｀)
のでので、「padding」と言う内側に余白をつけるためのパディングを付けてあげる

<pre style="background: #fff7ed; padding: 14px;">
    ここに書きたい事
</pre>

こうすることで、約１文字分を内側に寄せてあげることができます。

ついでにですが、「CSS編集可能」なタイプであれば、CSS内に直接設定してあげることで、投稿中の書く量が減らせます。

pre {
    background: #fffdf3;
    padding: 14px;
}

以上が、先日の聞かれた事でした(・∀・)
カラーコードについては追々記事にできればと思います（ぇ

今日の内容は良いのかどうかは分からないです。
少しでも役立てていれば幸いです。

では、最後まで読んで頂けたならありがとございます。

See you next...(´∀｀*)ﾉｼ

HTMLを覚えようず！

HTMLを覚えたい初心者さん向けの、基本から上級まで覚えていくためのブログ。CSSやJavaScriptもあるよ(・∀・)

先日書いた記事にて「背景色どうやるの？」的なことを聞かれたので