ブログ収益でAppleWatch6とスピーカー付き調光眼鏡を購入できました。ありがとうございます。

【超初心者向け】CSSとは!?【基本から簡単な書き方まで解説】

【超初心者向け】CSSとは!?

男性イラスト
CSSって何?
HTMLとどう違うの?
CSSを勉強しておくとどう役立つの?
CSSとスタイルシートって一緒?

こんな感じの超初心者向けに「CSSとは何か」について解説します。これからWebデザインを勉強したいという方や、今さらCSSが何かなんて人に聞けないよという方はぜひご参照ください。

CSSと一緒に覚えておきたいHTMLに関しては、こちらの記事で基礎から解説していますので合わせてお読みください。

[nlink url=”https://ksonoda.com/html-basic/”]

スポンサードサーチ

 

【基本中のキホン】CSS(スタイルシート)とは

【基本中のキホン】CSS(スタイルシート)とは

CSSは“Cascading Style Sheets” の略でスタイルシートとも呼ばれます。

HTMLは文字やフレームでサイトの骨組みを作るものでしたが、CSSはその骨組みをデザインし、サイトの見栄えを整える役割を担っています。

なので、あなたが普段見ているWebサイトはすべてHTMLとCSSの組み合わせで構築されいることになります。

WEBサイト = HTML(骨組み) + CSS(デザイン)

 

このブログの構造

実際にこのブログをHTMLのみの見え方とCSSが実装された見え方で見比べて見たいと思います。

 

HTMLのみ

This Blog Only HTML

HTML + CSS

This Blog HTML and CSS

 

CSSファイルの書き方【ファイル準備から実装まで】

CSSファイルの書き方【ファイル準備から実装まで】

CSSファイルを準備する

なんでもいいのでテキストエディタを開き、ファイル名を[style.css]で保存おきます。

これでファイルの準備は完了です。

 

CSSを書く

ファイルの準備ができたら実際にCSSを書いてみましょう。

前述の通り、CSSは【HTMLで構成されたフレームを装飾するもの】なので、まずは装飾するためのHTMLファイルが必要です。

 

このサンプルHTMLをテキストエディタにコピペ

練習用のHTMLを用意したので下記をコピーし、テキストエディタに貼り付けます。

<!DOCTYPE html>
<html>
  <head>
      <meta charset="utf-8">
      <link rel="stylesheet" href="style.css">
  </head>
  <title>スタイルシート練習</title>
  <body>
      <div class="main">
          <span class="text">CSSの練習だよ</span>
      </div>
  <body>
</html>

 

CSSを反映したい場合、HTMLファイルの<head>タグの中に、次の一文を記載してください。

<link rel=”stylesheet” href=”style.css”>

これで「このHTMLファイルを読み込むときにはstylesheetというファイル内に記載されたCSSの内容を反映してください」というリクエストを送ることができます。

 

HTMLだけの見え方を確認

HTMLファイルができたら、まずはそのままの状態を確認してみます。

コピペしたファイルの拡張子を[.html]にして保存し開いてみるとブラウザ上で下記のように見えるはずです。

 

これをCSSでデザインしていきましょう。

今回は文字の色と背景色を変更する方法です。

 

CSSで装飾

先ほど作った[stylesheet.css]に、次のテキストをコピペし保存します。

.main{
	width: 100%;
	height: 200%;
	background-color: black:
	text-align: center;
}

.text{
	font-size: 26px:
	color: #fff:
}

 

.mainの部分は背景のカスタマイズ、.textの部分はテキストの部分のカスタマイズです。

.mainでは背景の色を黒にするための記載、.textは文字の大きさを26ポイントにして文字色を白にカスタマイズするための記載です。

 

ファイルをサーバーにアップする

以上でHTMLファイルとCSSファイルの準備ができたので、サーバーにアップロードしCSSが反映した状態のページを表示させてみましょう。

2つのファイルはサーバー上の同じ階層に保存してください。

以上の作業を終えたら改めて先ほどのHTMLを表示させてみます。するとページのデザインはこのように変更されて表示されます。

HTML&CSSの見え方

 

WordPressでCSSをカスタマイズするには

WordPressでCSSをカスタマイズするには

以上がCSSの基本的知識になりますが、WordPressの管理画面からもCSSをカスタマイズすることができるので最後に紹介しておきます。

WordPressの管理画面からCSSを編集するためには下記の手順で行います。

1. 外観 > テーマエディターをクリック
2. スタイルシートを選択

 

WordPress管理画面のCSS編集手順

WordPress管理画面からCSSを編集

これで編集または追記していくことでサイトをカスタマイズすることが可能です。

 

このカスタマイズ方法の注意点

ただし、このカスタマイズ方法はテーマアップデートがあった際に更新してしまうと記載内容が消えてしまうので気をつけましょう。

カスタマイズ内容が消えないようにするためには子テーマを作っておくといいですよ。

WordPress子テーマの作り方に関してはこちらの記事をご覧ください。

[nlink url=”https://ksonoda.com/wordpress-child-theme/”]

 

スポンサードサーチ

まとめ:CSSをマスターするとカスタマイズ自由自在

まとめ

その他多くのプログラミング言語同様、CSSも全てのコードを覚えておく必要はありません。大切なのは、その構造と役割を知っておくこと。

そうすれば、必要なときに必要な情報をググって、必要な場所を変更するだけでサイトのカスタマイズくらいはできるようになります。

CSSの役割と構造を理解して思い通りのサイトカスタマイズライフをエンジョイしましょう。