初心者「が」教える CSS の始め方

CSS

こんにちは!みかん星人です。

前回は「 HTML の書き始め方」について書きました。
そして今回は「 CSS の始め方」について現初心者超初心者目線で書いていこうと思います。
始め方なので CSS の中身は確認するときだけしか書きません。
CSSの書き方は「 CSS の書き始め方」というのを次回書こうと思っているのでそちらでよろしくお願いします!

  は?てかまずCSSってなんだよ  

まずはここから説明をしていきます。
簡単に言うと 文字の大きさ文字の位置を変えたり色を変えたり…説明してたら日が暮れてしまうぐらい色々できます。そんな CSS を今回 HTML に設定したりします!

では早速CSSを始める準備をしていきましょう。
初めに前回まで作っていた HTML を開きます。

ちなみになのですが、パソコンの一番左下にある「Ctrl」ボタンを押しながらマウスのホイールをぐりぐりしますと文字の大きさが変えられます。
自分の一番見やすいと思う大きさまで変更すると良きです!
僕は210%でやってます。

次に CSS を書く場所を作っていきましょう!
GIF(動く画像)を載せるのでその通りにやればOKです!

何もないところで 右クリック をすると色々出てくるのでそこからGIFの通りにやっていただければ同じような感じになるかと思います!

一番の注意点は「 HTML と同じフォルダ内に作る」ということです。設定がちょっと面倒になってしまうのを避けられます。

歯車のような模様が出てくれば成功です!

「CSS始め方」という名前を付けました。ここは変えてもらっても大丈夫です。
ですが、「 .css 」の部分は変えてしまってはダメです!動かなくなってしますので!

次にメモ帳のファイル(F)と書かれているところから「新しいウィンドウ」を選択し、新しい2つ目のメモ帳を開きます。

そしたら2つ目のメモ帳の方にCSSのをドラッグ&ドロップ。
メモ帳の左上にある名前が変わったら成功です!

ここまで出来たらこっちのもんです!
最後にHTMLちゃんとCSSちゃんを会わせてあげましょう!!

HTMLの方でタイトルの下に青くなってる部分を書きます。
簡単に説明しますと

CSS始め方.css っていう名前のCSSちゃんがいるよ!

っていうのをHTMLに紹介してるみたいな感じです。

これを書いてあげるだけで2人は会えます。
最後に確認だけ書いてみます。

h1(見出し)の
color(色)を
red (赤色)にする。というものを書きました。

これが書けましたら「上書き保存」をしてwebを更新してみましょう!

できてた~~~~~~

良かった、無事会えてたみたいです。

確認ができましたので今回はここまでです!


次回予告して終わります!

次回! CSS の書き始め方!!

CSSの中身をかいてHTMLを色々変えていきます。
なるべく分かりやすいように工夫して解説しようと思っているのでよろしくお願いします!!では!

コメント

  1. porno より:

    These are genuinely great ideas in concerning blogging. Lilia Blair Romelle

トップへ戻る
タイトルとURLをコピーしました