記事の詳細
【はじめてのHTMLとCSS】最初に作るHTML 入門編①～コピペできるテンプレート付
こんにちは！今回はHTMLとCSSで知っておきたい記述方法やタグの意味など、
基礎知識について書いていきます！
はじめての方も改めて基本を学びたい方も必見です！
環境構築にはxamppがあると便利です。インストールする場合は、下記記事を参考にしてくださいね。
※インストールしなくても今回の内容は確認できます。
今回のブログの見出しはコチラです！
まずはフォルダ&ファイルを準備
①デスクトップでもどこでも構いませんのでフォルダを適当にフォルダを作ってください。（※以下の例では、xamppのhtdocs内にフォルダを作成）
②テキストエディタでhtmlファイルを作成。ファイル名に.htmlとつけてhtmlファイルとして保存。
③以下の基本コードをコピー&ペースト。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title></title> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> </body> </html> |
④cssファイルを②と同様の方法で作成(ファイル名に.cssとつけることに注意)。
以下の基本コードをコピー&ペースト。
|
1 |
@charset "utf-8"; |
html、cssの記述について解説
⑤基本のhtmlタグについては下記の通りです。
■<!DOCTYPE html>：テキストがhtmlであることをブラウザに説明するための宣言。
■<html lang=”ja”>：このhtmlが日本語を扱うことをブラウザに説明するための宣言。
■<head>：metaタグやtitleタグの記載、必要ファイルを読み込む部分。
■<meta>：このhtmlの文字コードはUTF-8だとブラウザに説明するための宣言。
■<title>：サイトタイトル。タブに表示されます。
■<body>：ページに表示される部分。
■<h1>：見出しです。h1～h6まであります。
■<p>：文章を入力するときに使います。
⑥今回使う基本のcssプロパティについては下記の通りです。
●background-color：背景色
●color：文字色
●font-family：文字フォント
●font-size：文字サイズ
解説の記述を使ってデザイン
⑦lesson_001.htmlに下記をコピー&ペースト。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>レッスン1|htmlとcss</title> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> <p>さっそくはじめていきましょう！</p> </body> </html> |
⑧style.cssに下記をコピー&ペースト。カラーを変えたいときはこちらから選んでくださいね。
|
1 2 3 4 5 6 7 8 |
body{ background-color: #adff2f; } p{ color: #000000; font-family: 'Yu Gothic'; font-size: 20px; } |
⑨作成したHTMLファイルをブラウザにドラッグ＆ドロップしてみてください。
以下の画像のようになりましたか？
以上となります。
今回はWebサイト制作の第一歩として重要な骨組み部分を解説しました。
HTMLにはタグに意味があり、SEO対策にも関わる部分なので適切なタグか考えながら制作を進めてみてくださいね！
またcssはご紹介したほかにもたくさんの種類があります。
自分のイメージするデザインを再現するにはどれがベストか..今後もブログに書いていきますのでぜひ読んでください！
では！
この記事であなたの課題を解決することができましたか？
疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。
ほかの投稿も読んでみませんか？
相模原のお店やサービスをどんどん紹介！
飲食店
サービス
