実践コーディングスキル - 第8章 Lesson1

第1回:必要なHTMLとCSSファイルを新規作成しよう

   

テクノロジーとクリエイティブのプロを目指す人のためのオンラインスクール
月額2500円で500以上のレッスンが受けられます

このスキルのデータをダウンロード: Windows Mac

ウェブマガジンを作成するためのファイルを新規作成する方法を解説しています。
ここでは、既存のまっさらなファイルをエディターで開き、タイトル等の設定を行います。



この動画で学べること

・新規ファイルの作成方法
・CSSの準備方法



新規ファイルの作成の仕方

上級者向けのブログサイトを作成していきましょう。
今回はまず、Webページを作るときに必ず必要になる土台を作成していきたいと思います。
まずは、こちらのコードをindex.htmlにコピー&ペーストしてください。



<!DOCTYPE html>
<html lang="ja">

<head>
</head>

<body>
</body>

</html>



貼り付けができたら、<head>タグの中に文字コードやタイトルなど、ページに必要な情報を書いていきましょう。



<head>
<meta charset="UTF-8">
<title>Design Leaker | ウェブ関連の情報集収ならDesign Leaker</title>
</head>



CSSにスタイルを書く準備をしよう

HTMLの記述に入っていく前にスタイルシートを準備したいので、スタイルシートを開いて1行目に文字コードの指定をします。
文字コードを指定したらデザインが適応されるかを確認するため、背景に赤色を設定してみましょう。



@charset "utf-8";
body{
background-color: red;
}



では保存してブラウザで見てみます。
何も変化がありません。
これは、まだHTMLファイルにスタイルシートを読み込ませるタグを書いていないからです。
次回、スタイルシートが適応できるようにタグを書いていきましょう。