ブロガーさんのための html css 入門実践 具体的なコードですぐに理解しよう！

何ができるの？

• 背景色変更
• フォントの変更
• アニメーション
• 文字の色・大きさ・太さを変える

など。だいたいのことができます。

この記事では、全くの初心者さん向けにデザインを変更するにあたって最低限のことでわかりやすくご紹介します！

その前にコードの構造を簡単に理解しましょう。

イメージを掴む

お作法

例えば、次の文字のコードはこのように表されます。

<a>りんごは美味しい</a>

りんごは美味しい

タグ

<a></a>

これをタグと言います。
※ aタグ

タグにはたくさんの種類があって、

タグ

例えば、smallタグを使うと

<small>りんごは美味しい</small>

結果：
りんごは美味しい

bigタグを使うと

<big>りんごは美味しい</big>

結果：
りんごは美味しい

小さくしたり、大きくしたり、タグ自体でデザインを変更させることができます。
また、タグの中にタグを入れることで複数の効果が得られます！

<p><font size="20px">文字が大きい</font></p>

結果：

20pxのフォントサイズ

いくつかのタグを組み合わせると、見づらくなってしまいました。
コードを改行して整えてみましょう。

実は改行をしても表示は変わりません。

<p>
    <font size="20px">
        20pxのフォントサイズ
    </font>
</p>

どれくらい改行するかは人によって変わります。
自分の見やすいようにしてみましょう。

この字下げをインデントと呼びます。

しかしたくさん装飾したい場合、タグだけでのデザインはとても大変です。
たくさんタグ覚えないといけないし、みづらくてタグを書き直すことも面倒。

そこでcssを使います。
タグに直接デザインを指定したり、作っておいたデザインを簡単に反映させることもできます。

styleでデザインする

タグには〇〇="××"という、詳細設定のようなものがあります。
fontタグのsizeやcolorはわかりやすいですね。
この部分を属性と呼びます。

<font color="pink" size="18px">フォントタグで属性指定</font>

結果：
フォントタグで属性指定

この属性はタグごとに異なりますが、共通するものがあって、その中の一つ「style属性」ではデザインを簡単に変えることができます。

<a style="color: pink;font-size: 120%;">ピンク色で文字サイズを120%にする</a>

結果：
ピンク色で文字サイズを120%にする

よく使うタグ

<a>リンクをつけたい時など</a>
<p>段落タグ（一行）</p>
<div>段落タグ</div>
<span>特に意味なし</span>
<strong>太めの文字</strong>
<em>強調</em>
<section>セクション</section>
<header>ヘッダー</header>
<footer>フッター</footer>

そんなに多くない。
もちろん、たくさん知ってるとデザインの幅が広がります！

おそらく、イメージは掴めたと思います。
では、cssの具体的な使い方をご紹介します。

デザインをする

style属性に指定する方法と例を一覧として掲載しておきます。
今回は何も影響のないaタグを使います。

cssの公式サイトに詳しく載っていますが、わかりやすく必要最低限のものでコードを書きます。使いそうな指定値のみのご紹介

文字の色

<a style="color: pink;">ピンク色</a>

結果：
ピンク色

指定値

/* 英単語 */
color: red;

/* rgb */
color: rgb(0, 0, 0);

/* rgba */
color: rgba(0, 0, 0, 0);

/* 謎の文字列（16進数など） */
color: #000000;

rgbはred,green,blueの大きさを数値で表し、rgbaのaは透明度を指定します。
謎の文字列はcss色と調べると出てくると思います。
www.netyasun.com

背景色

<a style="background: pink;">ピンク色の背景</a>

結果：
ピンク色の背景

指定する値は文字の色と同じです！

文字の大きさ

<a style="font-size: 25px;">25pxの大きさ</a>

結果：
25pxの大きさ

指定する値は

/* 数値 */
font-size: 18px;

/* % */
font-size: 120%;

/* rem */
font-size: 1.2rem;

remはサイトに設定された大きさの倍数指定ができます。
1.2rem = 120%

文字の太さ

<a style="font-weight: 800;">太い</a>

結果：
太い

指定する値は

/* 太い */
font-weight: bold;

/* 相対的に */
font-weight: lighter;
font-weight: bolder;

/* 数値 */
font-weight: 100;
1〜1000の数字で指定
※ 全角×　半角○

相対的というのは、指定したタグを囲んでいるタグ（親要素）の太さに対してという意味です。

フォント

<a style="font-family: 'AcademyEngravedLetPlain', sans-serif;">AcademyEngravedLetPlain Font</a>

結果：
AcademyEngravedLetPlain Font

フォントは多すぎるので、次のようなサイトから作ってみましょう。
標準フォントで構成されています。

Font-familyメーカー：標準フォント一覧からサクッと指定

また、Google Fontもおすすめです。
fonts.google.com

ボーダー

<a style="border: 1px solid pink;">ピンクのボーダー</a>

結果：
ピンクのボーダー

指定する値は

/* 一括で指定 */
border: 太さ 種類 色;

/* 分ける */
border-width: 太さ;
border-style: 種類;
border-color: 色;
（面倒なので、一括がおすすめ）


/* 一部分だけ指定したい */
border-top: 太さ 種類 色;
border-right: 太さ 種類 色;
border-bottom: 太さ 種類 色;
border-left: 太さ 種類 色;

余白（内側）

<a style="padding: 15px;">※ 15pxの余白があります。</a>

結果：
※ 15pxの余白があります。

わかりづらいので、ボーダーを追加すると、

<a style="padding: 15px;border: 1px solid pink;">15pxの余白がありますね！</a>

結果：
15pxの余白がありますね！

指定する値は

/* 上下左右に余白を作る */
padding: 10px;

/* 一部分だけ */
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;

/* 上下に10px、左右に30pxの余白 */
padding: 10px 30px;

/* 上下左右全てを一括指定 */
padding: 5px 10px 15px 20px;

余白（外側）

<a style="margin: 15px;">※ 15pxの余白があります。</a>

※ 15pxの余白があります。

paddingとは違い、要素の外側に余白を作ります。
なので、ボーダーをつけると

<a style="margin: 15px;border: 1px solid pink;">15pxの余白がありますね！</a>

結果：
15pxの余白がありますね！

ボーダーの外側に余白ができています。

指定する値は

/* 上下左右に余白を作る */
margin: 10px;

/* 一部分だけ */
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;

/* 上下に10px、左右に30pxの余白 */
margin: 10px 30px;

/* 上下左右全てを一括指定 */
margin: 5px 10px 15px 20px;

paddingと同じですね。

テキストの位置

<a style="text-align: center;">真ん中に表示！</a>

結果：
中心に表示！

ん？

何が中心なの？？

これは要素の大きさに対して中央に表示するもの。

<a style="border: 1px solid pink;">横いっぱい！</a>

結果：
横いっぱい！

aタグは要素自体が文字の大きさによって決められているから、中央表示するだけの余裕がない。

そこで、段落タグのpを使います。
pはボーダーをつけるとこの大きさになります。

<p style="border: 1px solid pink;">横いっぱい！</p>

結果：

横いっぱい！

では、text-alignを指定してみましょう。

<p style="text-align: center;">中心に表示！</p>

結果：

中心に表示！

できましたね。

指定する値は

/* 中央 */
text-align: center;

/* 左右寄せ */
text-align: right;
text-align: left;

丸みをつける

<a style="border-radius: 90%;">丸</a>

結果：
丸

これもわかりませんね。
ボーダーで可視化しましょう。

<a style="border-radius: 90%;border: 1px solid pink;">丸</a>

結果：
丸

まるですね。
paddingをつけると見やすいと思います。

指定する値は

/* %指定 90は完全に丸になる */
border-radius: 90%;

/* 半径を指定 */
border-radius: 10px;

paddingと同じようにもできる。

お疲れ様でした。
組み合わせてオリジナルのデザインにしてみましょう。

デザインを作っておく

毎回style属性に指定すると面倒だ！
作り置きして、簡単に反映させたい！

できますとも！

今回はclassで反映させる方法をご紹介します。

まずはイメージから

<a class="letter">letterのデザインです</a>
<style>
.letter {
    background: pink;
    color: whitesmoke;
    font-weight: 800;
    padding: 5px;
    margin: 10px;
}
</style>

結果：
letterのデザインです

どうですか？

styleタグの中にcssを書き、letterクラスを作ります。.（ピリオド）の後にクラス名で、{}の中身にデザインを指定します。あとは使いたいタグの中にclass="letter"と指定するだけでデザインが反映されます。

ちょっとレベルアップしましょうか。

<p class="title">駆け回るおばけの正体とは</p>
<div class="content">
    <p>リアイムでは数種類のおばけがサイト内を動き回ります。</p>
    <p>彼らの正体とは、一体！？</p>
    <p>こちらからサイトへ行けます。</p>
    <a href="https://riaimu.hateblo.jp/entry/ghost_dictionary" class="link" target="_blank">おばけ図鑑へ！</a>
</div>
<style>
.title {
    font-size: 1.2rem;
    font-weight: 800;
    border-left: 10px solid skyblue;
    background: pink;
    color: white;
    padding: 8px;
}
.content {
    text-align: center;
    color: gray;
}
/* contentクラスの中のpタグに反映される */
.content p {
    border-bottom: 3px dotted pink;
}
.link {
    font-size: 1.4rem;
    background: whitesmoke;
    padding: 5px;
    border: 5px inset gray;
}
</style>

結果：

駆け回るおばけの正体とは

リアイムでは数種類のおばけがサイト内を動き回ります。

彼らの正体とは、一体！？

こちらからサイトへ行けます。

おばけ図鑑へ！

記事を読んでいただきありがとうございます。
自由な設定ができて面白いですね。注意ですが、ブログのテーマなどによってデザインが異なる場合があります。例えば僕が使っているテーマではstrongタグのデザインが次のように表示されます。

<strong>太文字のはずが…</strong>

結果：
太文字のはずが…

わからないことがあれば、Twitterでもコメントでもいいので相談してください！

【 おすすめ記事 】

riaimu.hateblo.jp
riaimu.hateblo.jp
riaimu.hateblo.jp

記事の内容に間違いがあった場合は、Twitterもしくはお問い合わせフォームからお伝えください。