「ノマド生活」はコチラ

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

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

さっそくですが、今回は CSSの記述方法についてです。

HTMLよりも難しく感じてしまうCSSですが、CSSの記述方法の基礎を今回はお話していきます。

まぁ今こんなえらそうなこと言ってますが、筆者Millaは少し前まで全然知らなかったんですよ…「CSSなんて」と思っていたくらいでしたから。

まぁそんなこんなで、知っていて損は無い(得しかない)CSSについて、CSSとはどういう書き方をしたらいいんやろか?!というところをお話していきます。

それでは、CSSの書き方が気になる方へ。

最後まで、ぜひご一読ください。

CSSの記述方法:最初の文言はどう記入するべき?!

宣言

まずは、HTMLやCSSの基礎についてがまだの方がおられましたら、以下の関連記事をご覧いただいたあとに、こちらへ戻ってきていただきたいと思います。

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

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

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

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

それでは、これからCSSの記述方法についてお話してきます。

近年では、HTMLファイルとCSSファイルを別々に作成し→これら2つをヒモ付けしていくということのほうが主流です。

ですので、HTMLファイル内にCSSを直接記述していく方法は少ないと思います。

しかし、どちらにせよ基本的なことは同じです。

まずは、HTML内にCSSが使用されていることを示す文書が基本的には必要です(※省略も可能です、できる限り記述するようにします)。

HTML内にCSSが使用されていることを示す文書

<meta http-equiv=”Content-Style-Type” content=”text/css”>

上記をHTML内に記述することで「HTML内にこれからCSSを記述していきますよ」という宣言をするということになります。

そして、上記を記述したすぐ下には(※間に、HTMLのタイトルのタグが入ることもあります)、このように「CSSを記述範囲」を示す文言を記述しましょう

「CSSを記述する範囲」を示す文言

<style type=”text/css”>

</style>

上記の「CSSを記述する範囲」を示す文言は、「HTML内のココからココまでの部分にCSSを記述しますよ」という宣言になります。

以上で、CSSをこれからココ~ココまでの範囲に書きます宣言の文言は完了です。

まずは、ここまでの宣言文が大切です。

あとは、ココ~ココまでの範囲内と示した中へ、それぞれのCSSを記述していくだけです。

その中へ記述していくCSSの記述方法については次項をご覧ください。

スポンサーリンク

CSSを記述します宣言をしたら、その宣言した範囲内へ「CSS」を記述していきましょう

範囲を指定する

いまから、前項で述べました<style type=”text/css”> </style>この範囲内へCSSを記述していこうと思います。

まずは、CSSをどのように記述していけば良いねん?!ということで、こちらをご覧ください(⇩)

CSS 基本構造 (2019年4月22日に作成)

コレ(⇧)がCSSの基本構造です。

まぁコレだけ見ていても、具体的な例があったほうが断然わかりやすいと思いますので、以下に具体例をあげてみました。

CSSの記述方法(具体例)

例:ページ全体(body)背景色(background-color)白色(white)にしましょう。

body{
         background-color:white;
}

以上が、CSSの例に習った記述方法です。

※ 今回は「改行」をすることとにより、見た目をわかりやすくしましたが、改行はしてもしなくても良いです。

※ 「カラー色」の記載方法について:今回はwhiteと記述しましたが#ffffffのほう(カラーコード)でも良いです。 

以上のように、具体例を見ていただけるとわかりやすくなったのではないかと思います。

スポンサーリンク

まとめ

デザインさまざまなWebページ作成

それでは、今回のまとめです。

CSSを記述します宣言」「CSSの基本構造」を今回はお話しましたが、いかがでしたでしょうか。

今回のことをベースに、ぜひ参考にしていただければ幸いです。

それでは、素敵なWebページ作成を。

Wordpress全体像 アイキャッチ画像

WordPressとは?!これを読めばWordPressの全体像を理解できる!【WordPress(ワードプレス)】

Wordpress メリットとデメリット アイキャッチ画像

WordPressがブログ作成やホームページ作成に向いている理由とは?!メリットとデメリットとは?!【WordPress(ワードプレス)】

スポンサーリンク




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

 

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

コメントを残す

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

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