CSS(スタイルシート)の始め方|5分でわかる書き方、準備、出来ること

みなさんこんにちは!
フリーランスプログラマーのsatoです。

この記事にたどり着いたということは、

CSS、聞いたことあるけどなんかよくわからない…
WEBサイトを作る時に使うって聞いたけど、どうやって使うの?

という疑問をお持ちのようですね。

今回はそんな方のために、CSS(Cascating Style Sheets)の基礎をまとめてみました。

前半で「そもそもの書き方」や「読み込み方」を学び。

後半で「いろいろな課題の実現方法」を実践的に見ていきましょう。

CSSの基礎を学びたい人はぜひ前半から、明確な課題を持っている人は後半の特定箇所をそれぞれ役立てていただければ幸いです。

CSSとは

先ほども書いた通りCascating Style Sheetsを略してCSSと呼びます。

CSSは言語の一種で「webページの装飾を行うために」使用されます。

使いこなすことで、スムーズかつ、わかりやすくHTMLの装飾が行えますよ!

CSSの基礎!まずは書き方・読み込み方を学ぼう

「CSSの基礎を一から学びたい!」そんな人は、以下記事がオススメです。

HTMLとCSSの関係とは?基本的な書き方を4つのステップで理解しよう
更新日 : 2019年6月4日

こちらの記事に、CSSの基本的な構成や読み込み方をまとめてあります。

ぜひ参考にして、基礎知識と環境を整えましょう!

CSSでフォントや文字を装飾

CSSで最初に行いたくなることの一つが、文字の装飾だと思います。

装飾をしたのと、しないのとでは、サイトの質が変わってきます。

font-family3

CSSならば文字の装飾も非常に簡単ですよ!

例えば、サイト全体の文字サイズを変えたければ以下のような書き方になるでしょう。

これだけで、全体に影響が与えられるなんで非常に魅力的ですね!

以下に文字の装飾関係で有用な情報をまとめました。

ぜひ参考にしてみてください。

フォントの種類を変更しよう!

CSSでフォントの種類を変更するfont-familyの使い方
更新日 : 2018年11月27日

文字サイズを自由に変更!

CSSでフォントサイズを自由に変更! font-sizeの使い方
更新日 : 2018年11月27日

文字の太さを調整しよう!

CSSで太字設定!文字の太さを調整するfont-weightの使い方
更新日 : 2018年11月27日

文字に影をつけよう!

CSSのtext-shadowで文字に影をつける方法
更新日 : 2018年11月27日

背景の設定

サイトを綺麗に作るためには、背景の設定は欠かせません!

背景色のグラデーションや、画像を使用した背景設定がちゃんと行えると、サイトの見た目は劇的に変わりますよ!

background-image8
CSSのbackgroudはこれで完璧!見栄えが劇的に変わる手法
更新日 : 2019年3月27日

CSSで枠をつけるには

CSSで扱う枠は、非常に有用です。

例えば、「背景色」「枠」を組み合わせれば、強調表示のための綺麗な枠なんてものがすぐに作れます。

【CSS入門】borderを使いこなすための3つのステップ
更新日 : 2019年4月30日

CSSでのリスト装飾方法

箇条書きのような見せ方をする際も、CSSなら見た目を簡単に整えられます!

list4

わかりやすい説明のために箇条書きは重要です。

ぜひ覚えておきましょう。

CSSでリストを素敵にするlist-styleの使い方+もっと自由な作り方
更新日 : 2019年4月13日

CSSでテーブルの装飾をしよう!

CSSならテーブルも綺麗に作れます!

table-ex1

ただの白黒の四角い枠では味気ないですよね!

CSSで表を見やすく美しく! テーブルのデザインを調整しよう
更新日 : 2019年4月24日

[応用]JavaScriptでCSSを操作する方法

動的に処理を行いたい場合はJavaScriptを活用することになるでしょう。

その際にJavaScriptからCSSを操作することも可能です!

jQueryを使う方法

jQueryのcss()でスタイルの取得・追加・変更まとめ!
更新日 : 2019年5月2日

jQueryを使わない方法

【JavaScript入門】初心者でも分かる!CSS操作と変更方法について
更新日 : 2019年5月20日

[応用]WordPressでCSSを扱う場合

WordPressでサイト開発を行っている人も多いでしょう。

もちろん、WordPressでもCSSを使って、サイトの装飾が行えますよ!

初心者必見!CSS編集でWordPressを自分好みにカスタマイズする方法
更新日 : 2018年11月8日

[応用]RailsでCSSを扱う場合

RailsでCSSを使う場合はこちらを参考にしてみてください!

どこにCSSをおけばいいのか?などといった課題を始め、いろいろな前提知識を身につけることができますよ。

【Rails入門】スタイルシート(CSS)を使ってWebアプリを装飾しよう
更新日 : 2018年8月21日

CakePHPでCSSを扱う場合

CakePHPも、簡単ゆえに使っている人が多いでしょう。

CakePHP上でCSSを扱う場合、ぜひ最初に以下記事を読んでおいてください。

【CakePHP入門】スタイルシート(CSS)を読み込む方法
更新日 : 2019年3月10日

まとめ

今回はざっくりと、CSSの基礎から、よく使われる内容を書いた記事をまとめました。

この中にあなたの疑問が解消される記事があれば幸いです。

もし解決できていない場合、ここに貼られてない記事で解決できるかもしれません。

ぜひサイトの検索窓から、検索して記事を探してみてください!

あなたに役立つ記事が眠っているかもしれません。

お役に立てれば幸いです。

最短でプログラミングを習得したい方へ

元々ITリテラシーのある方やプログラムの学び方がわかっている方は独学で習得することも可能でしょう。

ただし、実際の学習期間中はつまづいている時間がほとんどです。

「もう挫折したくない」
「本業と両立しながら、好きな時間で自分のペースで勉強を続けていきたい。」
「自分だけのカリキュラムで効率的に勉強したい」

そんな方はお気軽に侍エンジニア塾までご相談ください。

弊社では、

  • プログラミング基礎学習
  • オリジナルアプリ開発
  • 仕事獲得

までをひと通り学習できます。

まずは無料体験レッスンで、弊社のコンサルタントと一緒にあなた専用の学習方法やカリキュラムを考えてみませんか?

挫折しない学び方や、通常1000時間以上かかる学習時間を1/3にする方法などより具体的なアドバイスもさせていただいています。

詳しくは下の画像をクリックして弊社サービス内容をご確認ください。

cta1

LINEで送る
Pocket

書いた人

sato

sato

学生時代を含めると、かれこれ10年以上プログラマーとして過ごしています。
様々な言語や環境、プロジェクトに関わってきましたので、より実践的な記事をみなさんにお届きるよう情報発信していきます!

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説