【超絶入門】html/css記述法パート1
まず今回は初めてhtml,cssを触る人に向けての記事です。超わかりやすいのでご了承ください！
ファイルの作成から行いますのでvscodeで書く準備万端な人はこちら↓↓までスキップ！！
なお分かりにくい点はユーチューブで解説しておりますのでそちらもご覧ください。
一番楽しい覚え方をご紹介するので今回はホームページ的なものを作成します😍
完成画像はこちら！！
htmlとcssがあればこういったものが作れます！
逆にhtmlだけだとこうなります😂🤣😂🤣🤣🤣
一気にダサくなりましたね( ´∀｀ )
htmlとはただの骨組みなのです。
そこにcssをつけることで華やかになります！！😍
まずコードを記述するエディタはvscodeを使います。😁
まだインストールしていない人はグーグルでvscodeなどと検索してインストールしましょう😆
それでは用意ができたら始めます😍🤣😍🤣😍🤣😍🤣😍🤣😍🤣
第一章 htmlファイルとcssファイルを作成しよう！
この章の流れは以下の通りです
1フォルダを作成
2その中にhtml,cssファイルを作成
それでは始めます😍😍
1フォルダ作成
まずフォルダを作っていきます😁フォルダ📁のイメージは以下の通りです
フォルダーを開いてデスクトップにフォルダーを作っていきます（お好きな場所にどうぞ）
今回名前はzennとしておきます。以下のように作れれば📁作成は完了
2フォルダの中にhtmlとcssファイルを作って入れる
vscodeを開いてください
開くとこんな画面が出ると思います
多少違うと思いますが全く問題ありません！
・画面の左上にファイルという項目がありますのでそこをクリックしてください
・フォルダーを開くをクリックしてください😍
・そして先ほど作成したフォルダを選んでフォルダーの選択をクリックしてください😂
🤗😁これでフォルダーが開けました😍🥰今度はその中にhtmlファイルとcssファイルを作って入れていきます！
上の写真の赤い丸で囲ったところを押せばファイルを作成できます
名前はindex.htmlとします※.htmlは絶対に変えないでください。変えるとhtmlファイルとして認識されません！！！！
それが完了すると以下のようにhtmlファイルが作られます
次にcssファイルも同じやり方で作ります。
名前はstyle.cssとします※こちらも同じで.cssは変えないでください！！！
完了すると以下のようになります。
第一章完了！！！😍😍😎お疲れさまでした！！第二章へ行こう！！！！😂😁😁😀😋🙄😏😘😍
第二章 実際にコードを書いていこう！
この章の流れは以下の通りです
１htmlを書こう😂
２cssを書こう🤣
それでは始めましょう！
１htmlを書こう😂
・左側に表示されているindex.htmlをクリックしてファイルを開きます
・コードを書く画面で【！】マークを打ちます（打ち方はシフトキーを押しながら数字のの１を押してください）！ ←このマークですよぉ
・そしてエンターキーを押してください。
・するとhtmlのひな型が自動で作られます（超便利！）以下参照
・コードはこの中のbodyというタグの中に書いていきます
それでは書いていきましょう！と言いたいところですがこのままではcssが機能しません
cssはhtmlファイルで読み込まないと機能しないのです
なのでhtmlファイルにcssを読み込む記述をしましょう！😂簡単です
<title>タグのしたでlinkと打ち込みエンターキーを押してください。
するとまた雛形が現れるのでhref=""の中にstyle.cssと記入し先ほど作成したcssファイルを読み込んでください。
😨😨😨😨😨😨😨😨😨😨😨😨😨😨😨😨😨😨😨😨😨😨😨😨😨😨😨😨😨😨😨😨
！！！ここで急ですがやはりstyle.cssからstyle.scssに変えてください！！絶対！！😧
cssからscssに変更します！！
cssよりscssを覚えたほうが絶対に有意義ですし、将来役に立ちますし簡単です！！
変更するのは以下2点
『cssのファイル名の変更』
『htmlに読み込むcssの名前の変更』
『cssのファイル名の変更』
１。左のファイルからstyle.cssを選択
２。右クリックしてRenameを選択（または名前の変更）
『htmlに読み込むcssの名前の変更』
<link rel="stylesheet" href="style.min.css">
これで完了！！😍😍
😨😨😨😨😨😨😨😨😨😨😨😨😨😨😨😨😨😨😨😨😨😨😨😨😨😨😨😨😨😨😨😨
style.scssを作成するとstyle.cssとstyle.min.cssが自動で作成されます！
読み込むのはsyle.min.cssのほうにしてください！ファイルが軽いので！
改めて変更点は以下の2点をおさらい！
<link rel="stylesheet" href="style.min.css">
これでcssの読み込みが完了しました！！実際にコードを書いていきましょう！
！！！！！！！！！！！！！！！！！！続きは次回！！！！！！！！！！！！！！！！
Discussion