CSS

CSS最低の書き方の基本 CSSはどこにあるの?

Sponsored Link

Sponsored Link

CSSはなぜ、どのようにして使われるのか?

CSS(Cascading Style Sheets、カスケーディング・スタイル・シート)は
HTMLやXHTMLなどで作成されるウェブページのスタイル(装飾の仕方)を指定するスタイルシート言語の1つです。

HTMLはウェブページ内の各要素の意味や情報構造を定義しますが。
CSSではそれら文書構造を損なうことなく。
ウェブページをどのようなスタイル(装飾方法で)で表示・出力・再生するかについて指定することができます。

CSSでスタイル指定することでスタイルに関する記述を一箇所にまとめることができるため。
文書にある余分なタグを減らすことができ。
そのことによってウェブページを軽量化することができるとともに
SEO効果も期待でき、アクセスの向上も見込めます。

CSS書き方の基本

CSSは書き方が決まっていますが。
全角のスペースなどがあると反映しませんので。
注意が必要です

・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・。

CSSの基本文法

CSSの書き方は決まっていて以下のようになります。

セレクタ {
プロパティ:値
}

セレクタ・プロパティ・値を記述することで「どこの」「何を」「どの様に変える」ということを示します。

例えば

body{

color:green;font-size: 15px
}

と記述すると
body(セレクタ)のタグ内の文字色(プロパティ)を緑(値)に変えなさい+文字の大きさ(プロパティ)は15px(値)にしなさい、
と指定したことになります。

約束事は以下。

プロパティと値は波括弧{}でくくります。
プロパティと値はコロン:でつなぎます

上記では複数のプロパティを指定していますが。
複数のプロパティを指定するときは{}の中でセミコロン;でつなぎます。

なおコードの間に半角スペースやtab、改行を入れても指定内容は変わりませんが。
全角スペースはNGです。

さらにくぅ足入解説は別記事にまとめます。

CSSはどこにあるの?

CSSはそれぞれの用途に応じてに応じて、以下の3つの場所に記述します。

補足
ちなみにWordPressの場合CSSはどこに格納されているかというと
管理画面から「外観」→「テーマの編集」を開くと出てくる画面の中のスタイルシート (style.css)の部分です。

3つの場所とは

  • styleタグ(内部参照)
  • インライン
  • 外部ファイル(外部参照)
    です。

以下の記述をもとにそれぞれ見ていきたいと思います。

<!DOCTYPE html>
<html lang=“ja”>
<head>
<meta charset=“UFT-8”>
<title>CSS練習</title>
</head>
<body>
<h1>CSSが書かれている場所はどこかな?</h1>
<p>3箇所あるんだね</p>
</body>
</html>

実際の表記は以下のようになります。

CSSが書かれている場所はどこかな?

3箇所あるんだね

ページに直接CSSを書き込む場合(内部参照とインライン)。
HTMLファイル内に書かれたCSSはそのファイル内でしか適用されませんが
そのコードが記述されたページに特化したCSSを書くことができます。

インラインは外部CSSを触る必要がないのでデザインの一部だけを変えたいときには便利ですが
コードが汚くなっていくので。
それは特に必要な場合のみにとどめ。

全記事共通の基本のデザインを外部CSSで作っておき(外部参照)
それとは別に特定のページを変えたいと思ったらそのページのCSSだけを
HTMLのstyleタグ内に書く(内部参照)のが一般的です。

CSSが適用される優先順位

この3つのCSSの優先順位ですが。

インラインのCSSが最優先で。
次が個別ページのstyle内に書いたCSS(内部参照)
外部CSSは優先度が最下位です。

ということは外部CSSで基本的なデザインを整えていても。
個別ページにCSSを書き込めばそのページのみ変更できるので
特に外部CSSをイジる必要がありません。

記述の仕方

styleタグに記述(内部参照)

styleタグで記述する場合には<head></head>内に記述をします。

<h1>タグを赤にしてみます。+

  <style>
          h1 {color:red}
  </style>

<head></head>内に記述

<head>
<style>
セレクタ {
プロパティ:値
}
</style>
</head>

という形になります。

<h1></h1>の中を赤にするようにCSSを記述します。

<!DOCTYPE html>
<html lang=“ja”> 
	 <head> 
	 	<meta charset=“UFT-8”>
	    <title>CSS練習</title> 
	     <style type="text/css">
              h1 {color:red}
             </style>
	</head> 
	<body> 
		<h1>CSSが書かれている場所はどこかな?</h1> 
	    <p>3箇所あるんだね</p>
	</body> 
</html>

実際の表示は以下。

CSSが書かれている場所はどこかな?

3箇所あるんだね

インラインに記述

インラインとは「その場に埋め込む」という意味でタグに直接書き込む方法です。

コードが汚くなるのでどうしても、というときに使います。

例えば<p></p>の文字をそれぞれ青、緑、赤にしたいというような場合。
以下のように記述すると

<!DOCTYPE html>
<html lang=“ja”> 
	 <head> 
	 	<meta charset=“UFT-8”>
	    <title>CSS練習</title> 
	</head> 
	<body> 
		<h1>CSSが書かれている場所はどこかな?</h1> 
		<p style="color:blue;">ここの文字が赤くなる</p>
		<p style="color:green;">ここの文字が赤くなる</p>
		<p style="font-size:18px;color:#f00;">フォントサイズが18pxで赤文字で書く</p>
	</body> 
</html>

実際の表示は以下のようになります。

CSSが書かれている場所はどこかな?

ここの文字が赤くなる

ここの文字が赤くなる

フォントサイズが18pxで赤文字で書く

外部CSS

外部スタイルシート(外部CSS)とはCSSファイルをページ(HTMLファイル)とは別に作ったもののことで。
HTMLファイル内には外部に作ったCSSファイルを読み込みなさいという指示を書いておき
それによってブラウザがCSSを読みに行けるようにしたものです。

やり方

1外部スタイルシートを作ります。

CSSファイルを新しく作るためのテキストエディターを開きます。

まずエディタに文字化け防止として文字コードを指定します。

@charset "UTF-8";

次に指定した情報を簡単に記入します。

body {background-color: red}

これは「背景を赤にする」と指定しています。

記入し終えたらそれをショートカットキーctrl+SまたはFile→saveをクリックするとで保存ウィンドウが開きます。

そしてそれに最後の拡張子を.cssとして名前をつけて保存します。

2 HTMLFileを開き外部CSSの読み込みコードを書き入れます。

書き込みコードは

<link rel="stylesheet" href="ファイル名.css">

です。

いかのHTMLは背景が白なんですが。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="external file.css">
  <title>CSS練習</title>
</head>
<body>
  <div id="headline">
  <h1>CSSの練習(見出し1です)</h1>
  <p>これは段落を意味します</p>
  </div>
  <div class="main">
  <h2>これは見出し2を意味します。</h2>
  <p>これも段楽です。</p>
  <p>
  <a href="https://maliajoy.com/">トップページ</a>
  へ戻ります。</p>
  </div>
</body>
</html>

と「背景を赤にする」と指定した外部CSSとリンクすると以下のように背景が赤になります。

実際の表示は以下。

エディタについて

テキストエディタはワードパットやメモ帳でも作成することができますが。
無料で高機能なテキストエディタが多数出ていますので。
その中から自分にあったものを選ぶといいかと思います。

テキストエディタATOM インストールから基本編集・操作を詳説(初心者向け)

ATOMは非常に素晴らしいテキストエディタですが。

初心者にはもっとシンプルなもののほうが扱いやすいと思います。
今回は高機能であるにもかかわらずよりシンプルな「Sublime Text」を使っていきます。

まとめ

CSSを書き込む場所は3つあり。
それぞれ用途に応じて使い分けていきます。

書き方は至ってシンプルで基本は

セレクタ { 
        プロパティ:値 
         }

のみです。

ただ様々なタグを使い分けることでデザインを変えることができます。

これについてはまた別記事にしますが。

意外とシンプルで簡単なものであることが理解できたかと思います。

今記事はここまで。

次の記事

HTML・CSSを実際に記事を作りながら覚えていこう

Sponsored Link

Sponsored Link

関連記事

  1. 知っておくと便利なセレクタまとめ
  2. HTMLで動画や画像を埋め込みする方法を詳説
  3. HTMLとCSS 初歩的な文字装飾 基本まとめ
  4. テキストエディタATOM インストールから基本編集・操作を詳説(…
  5. aタグの活用 記事の途中にジャンプさせたりCSSでリンクボタンを…
  6. ソースコードを記事中に表示させるために必要なことは?簡単にソース…
  7. HTMLの勉強で押さえておくべきこと②HTMLリンクタグ基本
  8. HTML・CSSを実際に記事を作りながら覚えていこう

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

サイト構築関連

  1. 【Basics of site construction】多すぎる選択肢 ホームページ作成方法  HTMLとCMSの長所と短所を知るべし
  2. WordPress新エディタ「Gutenberg」の使い方
  3. 独自ドメインのメールアドレスとメールソフトの設定について!Windows10やGmailでで簡単に送受信する方法や
  4. WordPressエディタ「Gutenberg」で用意されている各ブロックの解説 
  5. 【Basics of site construction】ドメインの選び方と名前の選定 サブディレクトリとサブドメインの役割について
  6. Windows10 でフォルダの拡張子を表示するには?
  7. HTMLで動画や画像を埋め込みする方法を詳説
  8. 【Basics of site construction】ワードプレスで日付を消す方法

プログラミング関連

Sponsored Link

おすすめ記事

知っておくと便利なセレクタまとめ

セレクタについてはその基本を以下の記事にまとめてありますが。https://maliaj…

WordPressエディタ「Gutenberg」の使い方 総まとめ

WordPressエディタ「Gutenberg」の使い方についていくつか記事を書いてみました。その過…

WordPressエディタ「Gutenberg」で用意されている各ブロックの解説 

前記事で新エディタ「Gutenberg」を使って記事を書くために必要な最低限のものについて解説しま…

WordPress新エディタ「Gutenberg」の使い方

使い勝手がかなり違うように見える新エディタだが使い方はシンプル。新エディタはブロックを…

aタグの活用 記事の途中にジャンプさせたりCSSでリンクボタンを作る

HTMLのリンク<aタグ>の書き方外部リンクタグの基本HTMLはハイパーテキストですので他の…

HTML ul ol liタグで作る箇条書きリスト 使い方の基本

箇条書きリスト作成の基本の基本箇条書きを作るタグにはul・li、 ol・liの組み合わせがあって…

HTML CSS テーブル(表)の作り方とその装飾の仕方 基本

表(table)の作り方表を作るには。テーブルタグを使います。&lt;TABLE&g…

HTMLとCSS 初歩的な文字装飾 基本まとめ

文字装飾の基本をまとめておきます。難しくありませんので、一つ一つ確実に押さえておきたいです。…

自己紹介

自己紹介

酒場マリアジョイ

酒場マリアジョイ

ウエブマーケティング入門酒場 
マリアジョイ
疲れたら一休み(^_-)-☆

AviUtl

AviUtl

AviUtlの初期設定・使い方の実際
・エンコードなどについて
書いた記事をまとめてあります。

Sponsored Link

普段使い画像編集ソフト

普段使い画像編集ソフト

普段遣い画像編集ソフト
軽快にちゃっちゃか編集できるすぐれものです。

人気の投稿とページ

MPC-BE 優れた動画再生ソフトの設定と使い方基本的なことの詳細
コーデックとしてUt Video Codec Suiteの特徴と設定の仕方
AviUtl合成モードの種類とその効果 使い方
AviUtlのすべてのエフェクトについての解説①色系エフェクト
AviUtlの初期設定 システム設定とフィルターの順序などを詳しく解説
AviUtil カメラ制御の基本の基本を詳しく解説
AviUtlのすべてのエフェクトについての解説⑧ラスター・波紋・極座標変換・ディスプレイスメントマップ
AviUtlのすべてのエフェクトについての解説⑩アニメーション効果・シーンチェンジ・基本効果・振動・ノイズ
AviUtlのすべてのエフェクトについての解説⑪アニメーション効果(1)
HTMLとCSS 初歩的な文字装飾 基本まとめ

ソフト・アプリの使い方

PAGE TOP