【この記事で入門】 CSS 基礎 【初心者向け】

CSS基礎入門 IT関連

前回の記事「HTML基礎」は以下です。こちらをご覧いただけると、より理解しやすくなると思います!

図解を多用しているので、個人的にもオススメです✌️

【この記事で入門】 HTML 基礎 【図解多数!】
プログラミングに興味があるけど、どこから手を出したらいいか分からない。 そんな方にオススメなのが「HTML」です! この記事で、簡単なWebサイトを作ってみませんか?

さて、この記事では、CSSの触り部分を学んでいきます!

しかし、私自身けっこう端折って記載している部分もあるので不明点があるかもしれません。

そういった場合はお気軽にお問い合わせください!

CSSとは?

Cascading Style Sheets(カスケーティング スタイルシート)』の略称です。

CSSは、HTMLで構成されたWebサイトを、どのように表現するか指定をする言語です。

「スタイルシート」とある通り、見栄えを担います。

「どのように表現するか」を言い換えると「HTML(Webサイト)を使いやすくするためにどうするか」を指定する事ができます。

ちなみに、「カスケーティング」は直訳すると「段々になった滝の連なり」を意味します。

数珠つなぎのように、連鎖的に影響していくことを意味しています。

どういうことなのか、それは実習で実際に体験してもらった方が早いと思います!

後ほど、実際に書いてもらうときに詳しく解説しますね。

CSSの基本的な考え方

CSSは、見栄えを良くすることができる言語です。

HTMLに書かれている「何」を「どうする」のかを指定するのが最も基本的な考え方です。

そこで指定する際に必要になるのが、HTMLの「タグ」。

HTMLの学習でも触れましたが、「構造を記述することができる言語がHTML」でした。

CSSで「aタグを赤文字にするよ!」のように指定する際に使うため、

HTMLにタグが必要である理由が理解できたと思います。

HTMLとCSSの関係は密であることがわかります。

CSSの基本構文

「構文」とは、実際にコードを書く際に使うルールのことです。

この構文と異なる書き方をすると、正常に動作しない場合があるので注意しましょう。

さて、CSSは「ルールベースの言語」とも呼ばれることもあり、構文は単純です!

HTMLの「特定の要素」か「グループ」に適用するスタイリング(見栄え)を定義します。

以下は、その例です。

CSSの基本構文の解説

大きく分けて以下の3つです。

  • セレクタ(タグのこと)から書き始める
  • 波カッコの中に、設定値を記述する
  • 設定値は「プロパティ」と「プロパティ値」のペアで宣言する(以下は例)。
  • プロパティ:ここでいう「color」のこと
  • プロパティ値:ここでいう「red」のこと

設定値の最後には「 ; 」をつけるのを忘れないように気をつけましょう!

実際に書いてみよう!

はい、恒例の「習うより慣れろ」のコーナーです。

上司
上司

一度にたくさん言わないでくれ…😭

大丈夫!

全てを理解しようとせず、1つ1つ読み解いていきましょう!

以下のような感じのサイトを作っていきます。

CSSで加工したイメージ1

以下は、手順です。

  • フォルダを新規作成します(「learning_css」など適当な名前で結構です)
  • HTMLとCSSファイルを作成します。(ファイル名は「index.html」と「styles.css」です。)
  • 新規作成したフォルダに、2つのファイルを格納します。
  • 以下の内容を記述し、保存します。
  • index.htmlを開いてみましょう!

以下は、HTMLの内容です。

以下は、CSSの内容です。

構造の解説

先ほどの内容を軽く解説します。

linkタグについて

HTMLファイルの head タグに記載した「link」タグについて見ていきましょう。

<link rel="stylesheet" href="styles.css">

  • rel属性:CSSを使うことを伝える
  • href属性:CSSのある場所を伝える

href属性のファイル名が異なると、うまく読み取れず、反映されません。ご注意ください!

複数の要素にスタイリングする

上記を見て分かるとおり、「p, li」のようにカンマで複数の要素に対して指定することが可能です。

クラスを使う

これまで、HTMLのタグに対してスタイル指定を行ってきました。

しかし、一般的なWebサイトを作る際に、繰り返し使うHTMLタグに対してスタイリングしていると、おかしなことになってしまいます。

ある特定の要素に、この指定をしたい」というときにはどうするのでしょうか。

そこで、「クラス」という概念が登場します。

HTMLの要素にクラスを追加し、それに対して焦点を当てて指定する方法があります。

CSSでは、「ピリオド(.)」から書き始めることで、クラスを指定することができます。

実際に、先ほどのHTMLとCSSファイルに追加してみましょう。

以下の添付画像は、イメージです。

CSSで加工したイメージ2

課題

CSSを使って、以下の問題に挑戦してみましょう!

  • spanタグにも、同じ special の指定を反映させてください。
  • 任意のクラスをh1タグに追加し、CSSで赤文字指定してください。

この他にもたくさんの方法があります。

…が、一旦さわりとしてはここまでにしておきましょう。

ヤベーCSSたち

最後に、CSSを使った凄いサイトがあるので、ご紹介します。

ここまでのレベルに到達しなくてもいいですが、、、CSSでこういうこともできるんだ!ということを知ると面白いかも知れません。

yui540

個人的に尊敬している方を紹介します。

「yui540」という方です。現在pixivで働いている方です。

彼がまだ学生だった頃から、界隈ではとても注目されています。

以下は、彼のポートフォリトサイトですが、アニメーションが凄いです。

https://www.yui540.graphics/

Evolution of the web

以下のサイトは、HTMLとCSSのみで作成されているそうです。

Webブラウザの年表を表現していますね。

というか、もう、何がなんだか分からん。職人レベル。

500 Server Error

British Museum

以下のサイトも、HTMLとCSSのみで作成されています。

ロンドンにある「大英博物館」という世界最大の博物館にある収蔵品の紹介サイトのようですね。

CSSを使って3D表現できるのは知らなかった……。

The Museum of the World
I'm exploring the Museum of the World. See how our history is connected.

次に学習すべき事

今回は、CSSの入門の入門程度に体験しました。

これで、HTMLと組み合わせて、あなた好みのWebサイトを作ってみてください!

以下は、課題です。

●CSSのプロパティを1つでも多く使って試す(覚えなくて問題なし!)
→実際に自分が作ってみたいサイトのイメージを出しておき、どうやれば作れるか自分で検索してみましょう!
検索する力も大切な要素です。

●使ったCSSのプロパティをメモしておきましょう。
→好きなエディタを使って、自分だけのメモを作成しましょう。
勉強したことが蓄積していく楽しさを味わえます!

さいごに

お疲れさまでした。

一度に全てを理解しようとせず、何度も読み返したり、自分で検索して、少しずつ理解していきましょう。

誰とも競う必要はないので、自分のペースを大切にしてください。

Slackというコミュニケーションツールを使って、初学者向けのコミュニティを運営しています!

気になる方は、お気軽に お問い合わせ からご連絡ください。

次にオススメ

次は、Javascriptという言語を使って、Webサイトに動きを加えていきます。

乞うご期待!

Javascriptは、正真正銘のプログラミング言語です。

基本的な概念から入っていきますので、気を楽にして進めていきましょう!

参考文献

MDN CSS入門サイト

CSS - ウェブ開発を学ぶ | MDN
Cascading Style Sheets — CSS — はHTML を学んだら、まず次に勉強すべき技術です。HTML はコンテンツの構造と意味論を定義するのに使用されるのに対し、CSS はそのコンテンツにスタイルを与えたりレイアウトを決めるために使われます。例えばフォント、色、サイズ、余白を変更したり、コンテンツ...
タイトルとURLをコピーしました