「プログラミング学習のツボ」へようこそ！
管理人のKENです。
本サイトでは、文系・初心者の私が、プログラミング学習を進める中でつまづいたこと、
最初から知ってれば良かったということをまとめていきます。
これからプログラミング学習を始める方の一助になれば幸いです。
詳しい方からすれば、
プログラミング言語とは言えないかもしれませんが、
今回は『CSS』のお話です。
『CSS（シーエスエス）』とは何か？
『CSS』を一言で言うと、
インターネット上にあるウェブページを装飾する為の言語です。
同じくウェブページを作る言語、
『HTML（エイチティーエムエル）』
の表示を制御する為の言語ですので、
『HTML』とセットで学習することがほとんどです。
『HTML』って何？という方は、
以下も合わせてご参照下さい。
-
-
【プログラミング初心者必見！】『HTML（エイチティーエムエル）』学習のツボ
「プログラミング学習のツボ」へようこそ！ 管理人のKENです。 本サイトでは、文系・初心者の私が、プログラミング学習を進める中でつまづいたこと、 最初から知ってれば良かったということをまとめていきます ...
続きを見る
『HTML』でウェブページの文字を表現し、
それを『CSS』で大きく表示したり、
赤色の文字にしたりするイメージです。
ちなみに、『CSS』とは、
『Cascading Style Sheets（カスケーディング・スタイル・シート）』の略です。
試験を受ける方は、たまに問題になりますので、
豆知識として覚えておいても良いでしょう。
『CSS』で出来ること
以下、出来ることの一例です。
-
文字のフォント（大きさ・太さ・字体等）を変える
-
文字の色や背景を変える
-
文字を強調する
-
行の高さや間隔を変える
-
リンクを作る（他のウェブページにとぶ）
-
ウェブページの配置（位置・幅・高さ・余白等）を変える
-
カーソルの形状を変える
-
印刷の設定を指定する
-
テキスト入力の補助をする
-
様々な視覚効果（グラデーション・傾ける・回転・透過・ぼかし等）を付与
-
テキスト読み上げ音声の設定
なんとなく、『CSS』のイメージが湧いてきましたでしょうか？
『HTML』でウェブページの基本的な文章等を作成し、
『CSS』で前述したような装飾・設定をいじるイメージです。
全て覚える必要はありません。
どんなことが出来るかなんとなく掴んでおき、
やりたいことに合わせて、
都度調べるスタンスで十分だと思います。
『CSS』で出来ることや書き方を詳しく知りたい方は、
以下のようなサイトも参考になります。
HTMLクイックリファレンス
MDN Web Docs
色の感じを見ながら、
デザインの参考にしたい方は、
以下のようなカラーコード一覧表も参考になります。
COLOR カラーコード一覧表
『CSS』のオススメ学習法は？
『HTML』と同じく、
『CSS』の参考書と、
学習アプリのProgate（プロゲート）
で十分だと思います。
私が学習に使ったオススメの参考書も載せておきます。
こちらも『HTML』と同じく、
ある程度学習が進んだら、
以下のような試験にもチャレンジしてみましょう！
どちらも実践形式で勉強になります。
ウェブページをソースコードで見てみよう！
「『HTML』学習のツボ」でもお伝えしましたが、
気になるデザインのウェブページがあったら、
CSSの書き方（ソースコード）が見えるツールを使って、
サイトの中身を見てみるのもとても勉強になります。
オススメはGoogleChromeの検証機能（デベロッパーツール）を使うやり方。
Googleで検索して気になるウェブページがあったら、
ページ上で右クリック、
表示されるメニューの中から「検証」をクリックするだけです。
それだけで、コードが表示されますので、
実際の表示画面とコードを比較しながら見ることで、
書き方の参考になります。
その他、「HTML Viewer Q」というアプリ等を使い、
スマホで見るやり方もあります。
どんなやり方でも構いませんので、
実際のウェブページをコードで見てみましょう！
どういう風にコードを書いてそのウェブページを表現しているのか、
自分の目で実際に確認しておくと、
自分で何かつくる際、
そういえばあのウェブページはこういう書き方でやっていたなあと、
閃きに繋がります。
色々なサイトを覗き見して、
いろんな表現方法を学んでみましょう！
まとめ
・『CSS』はウェブページを装飾、制御する為の言語
・文字を大きくしたり、色を変えたり、『HTML』だけでは出来ない表現が出来る！
・『CSS』の学習は、参考書とProgate（学習アプリ）の独学で十分！
・『HTML』とセットで学習しよう！
・ある程度学習が進んだら、資格試験にチャレンジしてみよう！
・実際のウェブページをコードで見てみることも勉強になる
今回は、『CSS』学習のツボについてまとめてみました。
皆さんの学習の一助になれば幸いです！