「ノマド生活」はコチラ

「CSS」の基礎はコレで理解できる!HTMLとセットで覚えておくべき!

CSSを知る アイキャッチ画像
CSSを知る アイキャッチ画像

さっそくですが、Webページの作成を0(ゼロ)からしようと思うと、どうしても通過しなければならないのが CSSです。

「どうしても…」必ずか?!と聞かれたら、CSSが無くてもHTMLだけでWebページは完成しますが、CSSは在ったほうが良い(在るべき)です。

その理由などと共に、今回は CSSの基礎をお話していきたいと思います。

さいごまで一読いただけると、CSSの基礎は理解できるというところまでもっていけるように、この記事を書いています。

ぜひ CSSの最初の扉を開く意味で、この記事をご活用いただければ幸いです。

CSSとは?!

CSS

まずは、CSSって何やねん?!というところからです。

いまこんな記事を書き始めた私ですが、1ヶ月ほど前まで「CSS?」の状態でした。

そんな私でも、CSSの基礎を今回お話することにしたのは、まさにアウトプットということです。

それでは、CSSとは?!ここから本題に入っていきます。

「CSS = Cascading Style Sheet(カスケーディング スタイル シート)」です。

ここで、CSSの直訳を見ることにします(⇩)

CSS(直訳)

  • カスケード:数珠つなぎに連なったもの、連鎖的または段階的に物事が生じる様子。
  • スタイル:型、文体、格好。
  • シート:1枚の紙など薄くて広いもの、敷いたりかぶせたり書いたりするのに使うもの。

このように、CSSを分解して直訳してみると、CSSのイメージがつきやすいと思います。

CSSは、つまり HTMLで作成したWebページの骨格を装飾するものです。

もっとわかりやすく言うと…(ここからは、イメージしてみてください…)

例えば、女性が化粧をすることをイメージしてみてください。

  • HTML:女性そのもの(化粧をしていない状態)
  • CSS:女性(HTML)が使う化粧品のこと

この「化粧品=CSS」を作成して、Webページをもっと魅力的にデザインしていこうということです。

いかがでしょうか。

これで、CSSの意味・役割を理解していただけたのではないでしょうか。

それでは、次項にまいりましょう。

スポンサーリンク

CSSは本当に必要なのか?!

本当に?!

前項でお話したとおり、 CSS=HTMLを装飾するものです。

ですので、もしかしたら「CSSって本当に必要なん?!」と思う方もおられるかもしれません。

その感覚、実は正しいと思います。

極端な話、CSSが無くてもHTMLだけでWebページは完成します。

さらに言うと、HTMLでもWebページのデザインやレイアウトを変更したりはできます。

しかし、Webページ作成のときには「HTMLでWebページの基本骨格をつくる」+「CSSでデザインやレイアウトを変更できるようにする」ほうが無難です。

その理由はなかなかご説明しにくいのですが、結論から言いますとHTMLだけでWebページのデザインまでをすべて行うとした場合、めんどくさいです

CSSを利用することにより、Webページのデザインを一度に変えたりできるので便利です。

これは、「HTMLだけでWebページ作成した場合」と「HTML+CSSでWebページを作成した場合」どちらも経験すれば、実感します。

ということで、結論 「Webページの作成において、便利な方法を選択するのであればCSSは必要ということです。

スポンサーリンク

CSSの記述方法

CSS記述方法

CSSの記述方法については、以下の関連記事こちらをご覧ください(⇩)

CSSの記述方法 アイキャッチ画像

CSSの記述方法を徹底解説します!CSSの記述方法の基礎知識を把握せよ!

スポンサーリンク

まとめ

Webページ作成 CSS

今回は CSSの基礎についてお話してきましたが、いかがでしたでしょうか。

もしHTMLのお話がまだの方がおられましたら、CSSよりも先にHTMLのほうをご覧ください(⇩)

HTMLを知る アイキャッチ画像

HTMLを把握する!Webページは「HTML」で構成されている!

それでは、今回はココまで。

ぜひCSSで素敵なWebページ作成をしていきましょう。

スポンサーリンク




この記事が役に立ったらシェアしてね!

 

#ネットビジネス #コミュニケーション
#ライティング #恋愛・結婚 #男性と女性

コメントを残す

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

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください