学習過程

【2日目】プログラミング学習の報告 – CSSはHTMLのお供

こんにちは、MSKです。

無事プログラミング学習2日目に入ることができました。

MSK
MSK
一日坊主にならなくて良かった

 

1日目はこちら↓

【1日目】プログラミング学習の報告 - HTMLは理解しやすいこんにちは、MSKです。 これからプログラミング学習を続けていくということで、内容の復習・まとめも兼ねてブログ記事にしていきたいと...

プログラミング学習2日目

ちゃんと今日もドットインストールを開くことができてホッとしました。

なんだかんだ理由をつけて勉強さぼるとか、今までの自分なら十分あり得ましたからね。

MSK
MSK
続けるのって難しいよね

何はともあれ、今回も学んだことをまとめていきたいと思います。

学んだこと

CSS

HTMLを学ぶ際にCSSと呼ばれるものを同時に学んでいきます。

CSSとは?

CSSはHTMLと組み合わせて使用する言語。

HTMLがWebページの概要や細かな情報を定義し、CSSがそれらのフォントやサイズなどの見た目(スタイル)を定めていく。

MSK
MSK
一言で言うと、「CSS」は「HTML」をどんなスタイルにするか決めるものだよ!

設定の仕方

まずは、HTMLファイルとは別でCSS用のファイルを作ります。

その後、HTMLファイルの<head>タグ内に<link>タグを入れて、新しく作成したCSSファイルを読み込む方法が一般的です。

【例】

<head>

<title> サイト・ブログのタイトル </title>

<link rel=”stylesheet” href=”フォルダー名/ファイル名”>

</head>

これで、HTMLとは別に作ったCSSファイルが読み込まれます。

CSSの中身

CSSファイルの中には、HTMLファイルで作成した元となる文章や画像の配列を整えるためのコードを書いて行きます。

具体的には、「<h1></h1>で囲まれた文は赤色にする」「画像は中央揃えで配列する」と言ったことなどを決めて行きます。

【例】

h1{ color : red ; }

上のコードはh1タグで囲まれた文章を赤色で表現するためのコード。CSSの3つの要素と言われているセレクタ・プロパティ・値は以下の通り。

  • h1:セレクタ
  • color:プロパティ
  • red:値

 

 

コード例

color:色を指定する

font-family:フォントを指定する

width:幅を指定する

ここで紹介するコードは、ほんのちょっぴりなので興味のある方は調べて見てください。

まとめ

CSSは、HTMLを修飾するためのものです。

うまく使うことで簡素なデザインのWebページを鮮やかなものに作り変えることができます。

MSK
MSK
HTMLとCSSはセットで使うものだから合わせて覚えてしまおう!1

 

ではまた!

 

3日目はこちら↓

【3日目】プログラミング学習の報告 - Firebaseとターミナルこんにちは、MSKです。 今回はプログラミング学習3日目ということで、作成したサイトをウェブ上にアップロードする方法を学びました。...
Twitterやってるよ!

Twitterにアカウントがあるので、是非フォローして話かけて下さい!

また、この記事が役に立ったらSNSで紹介してもらえると嬉しいです!

 

MSKのTwitter