【初心者】CSSって 何?でも大丈夫! CSSのやり方をシンプルに解説。

プログラミング

  • CSSファイルの用意
  • CSSの記述
  • ブラウザでの確認

本記事では、このあたりに触れていきます。なお、この記事では、↓でつくったHTMLを使います。

まだの方は、以下記事からHTMLファイルの準備をしてください!

【初心者】htmlを最速で表示させる。シンプルかつ具体的な手順。
HTMLを体験してみたい。HTMLの勉強を始めたから、自分でも何か作ってみたい、、こんな方に向けての記事です。この記事では、HTMLファイルの作成HTMLのコード入力・説明ブラウザで成果物の確認ここ...

また、テキストエディタは『Visual Studio Code』を使います。まだの方は↓でインストールおなしゃす!

【初心者】プログラミング学習を始めるのに必要なアプリはこれだけ!
プログラミング学習を始めたいけど、どんなアプリが必要なの?プログラミングって難しいアプリが必要そう、、こういった方に向けての記事です。結論からいうと、プログラミング学習を始めるのに必要なものは、『テキストエディタ』...

前回はHTMLを書いて、↓のようなWebページを作りました。

嬉しかったけど、ちょっと地味だ、、

そこで、CSSの出番です!
今回もゆるーくやっていきましょう

CSSとは

CSSとは、ウェブページのスタイルを指定するための言語です。
具体的に出来ることをリストアップします!

  • テキストの色を変更する
  • テキストにマウスカーソルを合わせたときの背景色を変更する
  • アニメーションをつけることができる

HTMLがブラウザの表示内容を形成します。
CSSは、HTMLをデザイン・レイアウトすることが可能です!

イメージできないな、、、やってみてよ!

もちろん!早速みてみましょう!

CSSファイルの作成

前回、HTMLは、『〜.html』ファイルを作成して、そこに記述しました。
ではCSSはどうするでしょうか??

まさか、、、『〜.css』というファイルを作る、、?

ピンポーン!
では、さっそく作っていきます。
前回と同じで『新しいファイル』から、『sample.css』ファイルを作成しましょう

そして、sample.cssに、以下のコードを入力して保存してください。
cssも書く時も、途中で予測変換が出てくるので、Tabキーを押せば楽に記述できます!

さぁ、次はCSSファイルを読み込みましょう。
前回作成した、index.htmlの<head>タグに、以下のコードを入れて保存してください。

これは、先ほどの、CSSファイルを読み込む呪文です!
rel=”stylesheet”はcssファイルを表していて、href=”sampe.css”は、ファイル名をさします。

よーし!これで準備できた??

完璧です!では、ブラウザ確認してみましょう。
index.htmlをブラウザで開いてください。

あっ、見出しが青くなってる!

そうです!まさしくこれがCSSの力です!
軽くコードの説明をしましょう

h1の部分が、CSSを適用させるhtmlタグです。ここに、h1じゃなく、pを入れると、『知識をつけて楽に生きる』の部分が青くなり、文字の大きさが、20ピクセルになります。
font-sizeとcolorはcssのプロパティです。文字幅の調整や背景色の指定など目的別にたくさんの種類があります。↓に代表的なプロパティをまとめます。

HHTMLとCSSでWebページは作れる!

前回の記事と合わせて、html,cssの基本の始め方を解説しました。

もちろん詳しいタグの説明や、プロパティの勉強は必要になります。が、最初はこのくらいのゆるさでいいのです。

簡単なWebブラウザ表示はできたから、次は〇〇に挑戦しよう

という気持ちが出る事が肝心です。

プログラミングの知識練習を休めず、実践練習も休めず、バランス良くいきましょう!

ではっ!

コメント