記事の詳細

こんにちは!今回はHTMLとCSSで知っておきたい記述方法やタグの意味など、
基礎知識について書いていきます!
はじめての方も改めて基本を学びたい方も必見です!

環境構築にはxamppがあると便利です。インストールする場合は、下記記事を参考にしてくださいね。
※インストールしなくても今回の内容は確認できます。

XAMPPで仮想環境を構築してwordpressをインストールする方法
はじめまして、網干と申します。本日は表題の通り、XAMPPで仮想環境を構築してwordpressをインストールする方法を掲載します。※本記事ではセキュリティの設定を考慮して...

まずはフォルダ&ファイルを準備

①デスクトップでもどこでも構いませんのでフォルダを適当にフォルダを作ってください。(※以下の例では、xamppのhtdocs内にフォルダを作成)

②テキストエディタでhtmlファイルを作成。ファイル名に.htmlとつけてhtmlファイルとして保存。

③以下の基本コードをコピー&ペースト。

④cssファイルを②と同様の方法で作成(ファイル名に.cssとつけることに注意)。
以下の基本コードをコピー&ペースト。

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に下記をコピー&ペースト。

⑧style.cssに下記をコピー&ペースト。カラーを変えたいときはこちらから選んでくださいね。

⑨作成したHTMLファイルをブラウザにドラッグ&ドロップしてみてください。

以下の画像のようになりましたか?

以上となります。

今回はWebサイト制作の第一歩として重要な骨組み部分を解説しました。
HTMLにはタグに意味があり、SEO対策にも関わる部分なので適切なタグか考えながら制作を進めてみてくださいね!

またcssはご紹介したほかにもたくさんの種類があります。
自分のイメージするデザインを再現するにはどれがベストか..今後もブログに書いていきますのでぜひ読んでください!
では!

 

この記事であなたの課題を解決することができましたか?

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

The following two tabs change content below.
小林紗絵

小林紗絵

Web制作担当をしています。Adobeソフトを使用したデザインやコーディングを中心にサイト制作に携わっております。今後はWordpressのテーマ作成やマーケティングなど少しずつできることを増やしていきたいと思います!

ほかの投稿も読んでみませんか?

コメントは利用できません。

AD

ページ上部へ戻る