インターネットビジネスで自由に生きる!早期退職して海外移住したJINのブログ

ブログデザインのカスタマイズ!HTMLとCSSの使い方を簡単に理解する!

  2015/12/19   あとで読む

約 4 分で読めます

html_css

ブログのデザインをカスタマイズをする上で、避けて通れないのがHTMLとCSS.

で、でた━━( ゚∀゚)人(゚∀゚ )━━!!
聞いたことあるけどイヤだーと思ったそこのあなた!

いや何事もそうですが、1つ1つ見て行けば難しいことはありません。

挫折するとしたら難しいからではなく、簡単そうが故に一気に色々とやろうとし過ぎたり、種類が多くてパニックになってしまっているだけです。

(∩゚д゚)アーアーきこえなーい

いやいや大丈夫。HTML、CSSともデザインをカスタマイズする上ではとても重要ですが、実際はとってもシンプルです。

ここでは概要を説明しますので、この後の章に進むため、ここでしっかり理解しておきましょう。

ポイントは、ブログではテーマを元にデザインを修正することになるため、その修正に必要なもののみを使えるようになれば良い、ということ。(極端に言えば最低限コピペする術を覚えれば良い)

0から10まで全てを理解して使いこなせるようにならないとダメ!などということはありませんので、ゆったりした気持ちで理解を進めましょう(Webデザイナーを目指すなら話は別ですよ!)

必要な部分だけでも一旦身に付ければ、あなたもメイクアップアーティスト!今後に向けてとてつもなく強力な武器を身に付けたことになります。

簡単動画解説

動画で簡単にポイントを解説をしていますので御覧ください。

詳しくは以下を御覧ください。

HTMLとは CSSとは

ブログを運営して、デザインを少し変えたいな、などと色々調べたすと出てくる「HTML」と「CSS」。

ブログのデザインをカスタマイズするのに必要となるのがこのHTMLとCSSですが、いきなり英語で来られると、

ナンデスカソレ? (?_?)

となるのが普通です。それでも慣れれば大したものではありませんので安心して下さい。

HTML, CSSを簡単にいえば以下のようになります。

  • HTMLとは
    • HTMLとは、「ここはヘッダー」「これはタイトル」、「これは見出し」、「これは文の塊」(段落)、「これは画像」、など、文の構成や要素を指定するもの。
  • CSSとは
    • CSSとは、それら要素に対して、フォントや文字の大きさ、背景の色、周りを線で囲む、など、見た目のデザインを指定するもの

つまり各々一言で言えば、

  • HTML 文の構成や要素
  • CSS 構成や要素に対するデザイン

これらの指定があってこそ Google Chrome や IE などのブラウザは、ウェブページが表示できるんですね。
(今見ているこの記事も、HTMLとCSSで成り立ってます)

これだけでは全くイメージが湧きませんので、以下具体例で見てみましょう。

HTMLの具体例

例えば身近なところではブログの記事のタイトル。

ブログの記事のタイトルを例えば「明日に向かって頑張る!」と付けた場合、HTMLは自動的に以下の様な記述になっています。

  • <h1>明日に向かって頑張る!</h1>

このタイトルの前と後を囲っている記号 <h1> …. </h1> がHTMLです。

ここでは一種類だけの登場ですが他にも色々なものがあり、それぞれが”タグ”と呼ばれます。(h1でいえば、”h1タグ”という言い方ですね)

  • タグは<>で囲まれ、
  • 終わりは、終りを示す / を付けたタグで閉じる
    <タグ> ・・・・</タグ>

というのが形です。
(<>を含めてタグという場合もあります)
(imgタグ や単独で使用する brタグ など、イレギュラーな形をとるものもあります)

上で見た <h1>明日に向かって頑張る!</h1> も確かにこの形。

タグには主に以下の様なものがあり、他にも沢山ありますが全て覚える必要はありません。必要となるものだけ調べればOKです。

  • body:ブラウザで表示されるもの全て
  • h1, h2, h3, h4, h5, h6: タイトルや見出し
    (WordPressの記事を書く時に、記事中の見出しは基本h2を使います。
    これは記事のタイトルに h1 が割り当てられるためです)
  • p: 文のまとまり、段落。
  • br: 改行
  • div:まとまった範囲の指定
  • ul:リスト形式で表示
  • li:ulの中の1つの項目
  • a:リンク(アンカー)
  • img: 画像を表示

※)タグの種類は多くても、デザインを結構いじっていると自然と覚えます

CSSの具体例

上で見たHTMLのタグに対し、文字の色は黒、とか、太字にする、等を指定するのがCSSです。

  • 文字色の指定は、例えば黒色なら、
    • color: black;
  • 太字は
    • font-weight: bold;

このように、左に指定する項目名(プロパティ)、コロン「:」を挟んでその右に値、最後にセミコロン「 ; 」といった形で指定します。

  • プロパティ: 値;

(上の例では、color や font-weight がプロパティ、black, bold が値)

※)プロパティに対して指定できる値の種類は決まっています。

具体例

先ほどのタイトルはh1タグで囲まれてましたので、h1に対して「文字色は黒」「太字にする」という指定の仕方は以下のとおり。

  • h1{
        font-weight: bold;
        color: black;
    }

HTMLのタグに{}をつけ、その中にCSSの指定を書く、という形です。
(font-weightなどの先頭に半角スペースが入ってますが、スペースはあってもなくてもOK。このように半角スペースを入れたりタブを入れたりして見やすくします。)

  • HTMLのタグ {
        プロパティ: 値;
        プロパティ: 値;
        プロパティ: 値;
        ・・・・
    }

なんとシンプルな。
この形を覚えておけば、色々なことが分かるようになります。(本当)

「プロパティと値」は幾つ指定してもOKです。

デザインを細かく修正する場合は、こうした指定を数多くすることになるため手間暇がかかります(このため途中で挫折していくいんですね)。

それでも1つ1つを見れば難しいものではありません。

今回の復習

  • HTMLとは、文の構成や要素
    • 形式: <タグ>・・・</タグ>
  • CSSとは、構成や要素に対するデザインの指定
    • 形式: プロパティ: 値;
  • HTMLにCSSを適用するときの形式
    HTMLのタグ {
         プロパティ: 値;
         プロパティ: 値;
         プロパティ: 値;
         ・・・・
    }

    • 具体例
      h1{
           font-weight: bold;
           color: black;
      }

HTMLとCSSをざっくり見てみました。

まずは概要ですがここを理解しておけば、この次に見るCSSのクラスなどの理解がとても早くなり、デザインカスタマイズが非常にやりやすくなります。

ブログのテーマを0から全て自前で作る、となると、深い知識が必要となりますが、元々あるテーマに対してデザインをカスタマイズする、といったスタイルが普通であり、この場合はポイントをおさえるだけで、かなりのカスタマイズが行えます。

0から全てを理解する必要はない、ポイントだけを吸収すれば良い、ということを改めて認識し、個性の出る、読者もあなた自身も気に入ったブログを構築すべく、HTMLとCSSの武器として取り込んでいきましょう。

次回はCSSの肝となるクラスやidについて見てみます。

早期退職して海外で奮闘する JIN のメールマガジン

時間や場所に縛られず稼いだJINが教える

~ 最短最速で月収10万円を手に入れる方法 ~

苗字(必須)

隣のあの人にも、思わず教えたくなる秘密

配信停止は、いつでもできます

お預かりした情報は保護されます

迷惑メールは一切配信されませんので、ご安心くださいね

この記事を読んだ人はこんな記事も読んでます

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です