2019年12月25日スポンサーリンクプログラミング初心者の方のほとんどが通る道となるHTMLとCSSのうちのCSSの方を今回は紹介していきます。CSSにはいろんな書き方があり、思っている以上にできることがたくさんありますし奥が深いです。今回はCSSの説明と簡単な書き方から、反映方法までを紹介していきます。Sheets、カスケーディング・スタイル・シート)は正式名称が長いんですが、省略されてCSSと呼ばれています。HTMLとCSSはいつもセットで出てきます。HTMLをまだ学習してないんだったら先にHTMLそのあとCSSでいいと思います。簡単にCSSが何かと説明しますと、色や文字のサイズや要素の位置を変えたりできます。人でいう化粧とか服とか整形でしょうかね。作り変えて見た目を変えることができちゃうんですね!この文字が赤いのもCSSで書かれているためです。CSSがあるだけで見た目をキレイに整えたりできちゃうんですね!CSSを書いてみよう!手順CSS用のファイルを用意HTMLに読み込む書き込む1〜3の手順でCSSを書いていきたいと思います。始めにサンプルのHTMLとCSSのファイルを表示させときます。これを参考に、説明していくので最初に目を通しといてください。それとHTMLのファイルは先に作成した前提で話していきます。エンジニアに興味が出てくるとプログラミングについても気になってくるはずです。Code)は、マイクロソフトが開発したテキストエディタです。上のサンプルのようにindex.htmlのファイルとstyle.cssのファイルを作ります。CSSのファイル名はなんでもいいですが、最後は『.css』にしてください。『〇〇〇〇.css』このファイルをindex.htmlと一緒の場所に保存してくださいね!またはCSSのフォルダを作ってその中にCSSのファイルを入れることも可能です。(こっちの方がよく使う)下を参考にしてください。同じディレクトリの場合ファイル名index.htmlstyle.css別のディレクトリの場合ファイル名index.htmlcssstyle.cssとりあえず簡単な方は同じディレクトリの場合なんで簡単な方からやってみましょう!*cssのフォルダを作った場合はHTMLから読み込むパスが少し変わるので気をつけてください!2.HTMLからCSSを読み込むCSSはHTMLから読み込む場合と直接HTMLに書き込むやり方の2つがあるんですが、ファイルを分けたほうがキレイなので、今回は別のファイルに分けるやり方でしますのでHTMLからCSSファイルを読み込む必要があります。HTMLには<head>のタグ内に呼び込むための記述をしていきます。href=”./css/style.css”>この書き方は、どうなってるのって考えなくてもこのまま覚えちゃいましょう!考えてても時間が勿体無いので、数学の公式みたいに覚えちゃって大丈夫です!読み込む時に重要となるのは、『href=””』この部分でもしCSSが反映されていないときはこの部分が間違っていると覚えてもらって間違いないです。『./フォルダ名/ファイル名』の書き方でフォルダが無い時は『./ファイル名』だけですので注意してください!3.CSSを書き込むCSSの書き方は、HTMLの要素の名前やタグを指名してその部分に対して表示などを変えていきます。red;}こんな感じです。色の指定)CSSは表示の仕方を変えるだけでもものすごい種類があるので全部は紹介しきれないんですが、その都度やりたことに関して検索すれば紹介してくれるとこあるので、つまずくたびにどんどん検索しましょう!最後にサンプルで書いてたのを表示したのを紹介します。表示方法はHTMLのファイルをダブルクリックしたら反映されてるはずです!まとめHTMLと同じく簡単に最初は表示をできますが、実際にCSSを使って書いているとあとあと難しくなります。ある程度プログラミングを自分で学ぶことができた人は壁にぶち当たりプログラミングスクールに行こうかなと思う人も多いと思います。ケビンケビンブログプログラミングは簡単!っていう人が有名な方々が言うもんで、みんな簡単と思ってプログラミングに挑戦する人が多いと思います。ケビンケビンブログ社会人の人でプログラミングのを勉強したいなーと思った人多いと思います。僕もそのうちの1人でした。ケビンケビンブログプログラミングしてみたいって思うけどどうしたらいいかわからんとかよく聞きます。≫このブログについてエンジニアの僕がプログラミングの良さと可能性について書いています。ブログについても触れています。これからもより良い情報やノウハウを伝えていきたいと思います。みんなが実践できるようなこともどんどん書いていくので挑戦してみてください。