
はじまり

はるまき
HTMLは前回の記事で触ってみたけど、これだとなんか簡素な感じだね。


こめつぶ
そうだね。
装飾をするのは『CSS』になるから、今日はそれを使ってみようか!
装飾をするのは『CSS』になるから、今日はそれを使ってみようか!

はるまき
CSSで装飾・・・・?
また新しい英単語が出てきたな!
また新しい英単語が出てきたな!
第1話のHTMLに続き、第2話は『CSS』を使って、文章を装飾することになった私(はるまき)。
「CSSって何?装飾って何するの?」状態ですが、前回の簡素な状態から脱出できるなら物は試し!
という事で、実際にCSSを使ってみることにしました。

はるまき
もし「第1話まだ読んでないよ~」って方はこちらからどうぞ!
CSSとは?

はるまき
どうやってCSS使うの?
そもそもCSSって何?
そもそもCSSって何?

こめつぶ
じゃあまずは、CSSとは?から学んでいこうか
CSSとは『カスケーディング・スタイル・シート(Cascading Style Sheets)』の略になります。
カスケーディング
訳すと「何段にも連なった連続的な滝」になります。
指定された内容がいくつあっても、優先順位を決めておくことで1つだけが有効になる仕組みです。

スタイルシート
文章を構成するための複数要素(文字の色、大きさ、図など)の情報をまとめたデータやファイルを指します。
簡単にお伝えすると、私たちが普段調べ物をする時などに何気なく使っている
WEBサイトの見た目を指定するための言語が『CSS』です。

はるまき
オシャレなWEBサイトにするには『CSS』が必須ってことだね!
非エンジニアがCSSを実際に使ってみた
CSSを使うための環境
OS:Windows10
コードエディタ:Visual Studio Code
CSSを使う流れ
①Visual Studio Codeの『フォルダーを開く』を選択します。
※第1話の『index.html』ファイルを開く手順です

②デスクトップのtestフォルダーを選択します。

③赤枠から新規ファイルを作成して『style.css』と名前を付けます。

④赤枠のコードを打ち込んで、htmlとcssをリンクさせます。

はるまき
ここからコピーできるよ
<link rel="stylesheet" href="style.css">

文字色の変更
『colorコード』を入力して文字色を変更します。

#66cdaaはこんな感じ↓


はるまき
「色コード」で検索して、好きな色を指定しよう。
今回私が使った実際のソースコードはこちら!
今回私が使った実際のソースコードはこちら!
h1 {
color: #66cdaa; /* 文字色を指定 */
}
文字の大きさ変更
『font-sizeコード』を入力して文字の大きさを変更します。

200pxにするとこんな感じ↓


はるまき
大げさに変更しちゃった(笑)
実際のソースコードはこちら!
実際のソースコードはこちら!
h1 {
color: #66cdaa; /* 文字色を指定 */
font-size: 200px; /* 文字の大きさを指定 */
}
背景色の変更
『background-colorコード』を入力して背景色を変更します。

#ffffe0はこんな感じ↓


はるまき
文字色と同じで好きな色に設定してね。
実際のソースコードはこちら!
実際のソースコードはこちら!
h1 {
color: #66cdaa; /* 文字色を指定 */
font-size: 200px; /* 文字の大きさを指定 */
}
body {
background-color: #ffffe0; /* 背景色を指定 */
}

はるまき
今回はCSSを使って、文字色・文字の大きさ・背景色を変更してみたよ

こめつぶ
すごいじゃん!
他にも文字の太さ・表示位置など色々と変更できるから可能性は無限大だね
他にも文字の太さ・表示位置など色々と変更できるから可能性は無限大だね

はるまき
装飾をたくさん付けたらオリジナリティの高いWEBサイトが作れるね!
ところで、次は何をやればいいかな?
ところで、次は何をやればいいかな?

こめつぶ
じゃあ次は、デバッグ環境の構築をしてみよう!

はるまき
デバッグ・・・・・
また知らない言葉だよ・・・・!
また知らない言葉だよ・・・・!
第3話はこちらからご覧ください!