はじめに
プログラミングを学ぼうと思ったとき、はじめに見つかるのがHTMLとCSSです。この記事では、HTMLとCSSの学習方法について解説します。
実はHTMLやCSSはプログラミング言語ではなく、マークアップ言語と言われる言語なんです。そのため「プログラミングを今すぐ始めたい!」という方には、別の記事を読んでもらうべきです。しかしHTMLやCSSはとても簡単で、ウェブアプリ開発などによく使うので、知っておいても損はありません。ぜひ、この記事を読んではじめの一歩を踏み出してみてください。
なお、この記事はほとんどプログラミングやコーティングをしたことがない方向けに作っているので、ご了承ください。それではさっそく本題に入りましょう!
始め方
Windowsユーザーならデスクトップまたはフォルダを開いたエクスプローラ上で右クリックし、新規作成→テキスト ドキュメント と押していきます。
すると末尾に新規ファイル.txtなどと書かれたファイルが作成されます。表示されない場合はエクスプローラーを開いて上部メニューから表示→表示と進み、ファイル名拡張子にチェックを入れます。名前を変更し、末尾を.htmlに変更します。そしてそのファイルを右クリックし、「メモ帳で開く」を選んで開きます。
MacOSユーザーの場合、わたしはMacを持っていないので、何も言えませんというところなのですが、apple公式さんが解説していたので紹介しておきます。
書き方
まずは基本的な文法を理解しましょう。以下のコードを写すかコピペしてください。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>sample</title>
</head>
<body>
<h1>Hello,World!</h1>
<p>HTMLで書かれたページです</p>
</body>
</html>
保存して、ブラウザで開いてみてください。すると以下のようになります。
見出しとしてHello,World!、文章としてHTMLで書かれたページですと表示されています。このように、<body>から</body>に囲まれた部分の内容が表示されます。逆に<head>から</head>に書いた内容は直接的には表示されません。ここに描いたものは、タイトルや見た目などの変更に関わります。
そして、<body>~</body>等のように<から>に囲まれているものをタグといいます。タグには</~>と表される終了タグがあるものと、ないものがあります。
タグには、以下のように書いてクラスやidをつけることができます。クラス名やid名は自由につけられますが、英単語を使うようにしましょう。
<p class="text"></p>
<h1 id="top-title"></h1>
さて、ここで画面を右クリックし、Chromeユーザーなら「検証」、Edgeユーザーなら「検査」、Safariユーザーならメニューバーから Safari→設定→詳細と進み、一番下の「Webデベロッパ用機能を表示」にチェックを入れ設定を変更したあと右クリックから「要素の詳細を表示」を選択すると、開発者ツールというものがでてきます。
ここでは、HTMLの構造がどうなっているか確認できます。
テキストの部分の、h1タグの部分にカーソルを合わせてください。すると以下のようになります。
ここで、余白の関係や要素の大きさを確認できます。では、試しに余白をなくしてみましょう。
headタグ内に以下を追記します。
<style>
h1{
margin: 0;
padding: 0;
}
</style>
保存してから再読込してみてください。すると見出しの周りの余白がなくなり、左上にある形となります。
この、styleタグ内に書いたものがCSSです。
CSSは、以下のような形で書きます。
要素名(クラス名,id名も可){
属性名:値;
}
CSSは、headタグ内に以下のように書いてファイルから呼び出すこともできます。
<link rel="stylesheet" href="ファイルのパス">
終わりに
このように、HTMLやCSSはとても簡単に扱うことができます。タグやスタイルにはもっとたくさんの種類があるので、ぜひ色々使ってみてください。それでは良いHTML&CSSライフを！
初投稿なので何か間違っているところがあるかもしれませんが、ぜひコメントで教えていただけると幸いです。