1-1.コーダーのスキルを身につけよう!(HTML編)

こんにちは!Webエンジニアのたけです!

前回は、ざっくりと学習のロードマップについて7つの行程についてまとめましたが、今回その1つ目のHTML/CSSの学習についてまとめていきたいと思います!今回の記事ではHTMLの記述とその事前準備についてまとめています!

htmlcss

HTMLを編集してみよう!

事前準備

まずはじめに、HTMLとCSSのファイルを編集するにあたって2つのツールが必要です。それはテキストエディターとWebブラウザです。テキストエディターとはテキストファイルを編集するツールで、テキストーエディターを利用してソースコードを記述していきます!WebブラウザはWebサイトを閲覧するためのツールでGoogle Chrome、Safari、Fire Fox、Edge、Interner Explorerなどのことです。(Internet Explorerは将来的にサポートが終了するので他のブラウザに切り替えましょう)

それぞれ僕が使っているオススメの物をここでは紹介いたします!

テキストエディター

Atomアイコン

Atom

HTML/CSSを扱うときには僕はAtomエディターを利用しています!便利なパッケージをインストールできるので自分好みのエディターにすることができます!

ダウンロードはこちら:https://atom.io/

Webブラウザ

chrome

Google Chrome

有名なWebブラウザですね!ディベロッパーツールというエンジニアには欠かせないツールがとても便利なので開発の際はGoogle Chromeを重宝しています!

ダウンロードはこちら:https://www.google.com/intl/ja_jp/chrome/

Atomエディタの日本語設定(日本語にしたい方はいれて下さい)

  1. 起動時に表示されるWelcome Guideからinstall a packageを選択
  2. Open Installerをクリック
  3. japanese-menuと入力しinstallをクリック

エディター設定

 

ディレクトリ(フォルダ)、ファイルを作成しよう!

実際にHTMLを記述していきます!コーダーとしての第一歩です!

まずデスクトップに「study」というディレクトリ(フォルダ)を作ります!Atomエディタでプロジェクトにフォルダを追加します。ここで先ほど作成したstudyフォルダを開きましょう!

左にstudyフォルダが追加されましたか?そうしたら、フォルダのアイコンのところで右クリックをして新しいファイルを作成します。ファイル名は「index.html」として下さい。

ファイル追加

HTMLの雛形を作成しよう!

ここからいよいよソースコードを書いていきます!以下の画像のように記述して下さい。「html」と記述して「tabキー」を入力すると自動で補完されます!ここでは、HTMLの雛形を作成しタイトルを「初めてのHTML」としました。

初めてのHTML

このようにHTMLでは<title></title>というような記号で文字を挟んで記述します。<title>という記号を開始タグ</title>という記号を終了タグと呼びます。この二つの総称を「タグ」と呼びます。

ここに書かれていることを簡単に説明してきます。HTMLは<html>、<head>、<body>の3種類のタグで文書の構造を定義します。<html>タグはその文書がHTMLであることを定義するタグであり、文書全体を囲うように記述します。(htmlタグで挟む) そして、lang=”ja”というところは、日本語であるということを定義しています。(jaをenにした場合は英語である)headタグには文書のタイトルなどの基本的な情報を記述するヘッダ情報を記述します。そして、bodyタグには実際にブラウザ上で表示される文書本体を記述します。

headに書かれているヘッダの情報はサーチエンンジン向けのキーワードや説明、文書のタイトル、利用するスタイルシート、文字のエンコードなどのメタ情報などの情報が記述され、タイトル以外はほとんどブラウザ上では表示されません。

文字のエンコードは日本語の場合基本的にUTF-8を利用します。詳しく知りたい方は調べて見て下さい!

<body>タグに文章を記述しよう!

では実際にブラウザ上で表示されるようにbodyタグに情報を記述してみましょう!以下のように記述してみて下さい!

Hello World

では実際にブラウザで表示させてみます。デスクトップのstudyフォルダからindex.htmlファイルを選択し、ドラッグしてGoogle Chromeの上でドロップしてみて下さい!以下のように表示されましたか?(僕のブックマークは気にしないで下さいw)

ブラウザ

ここでは、<h1>タグと<p>タグを表示させました。<h1>タグは見出しを記述するもの(基本的には1ページに1つのみ)、<p>タグは段落(paragraph)を記述するもので、それぞれ表示させてみました!HTMLではこのように文章の構成を記述していきます。

画像を表示させてみよう!

次に、画像を取り込んでいきます。「study」フォルダの中に「images」というフォルダを作って下さい。そして、「images」の中にはお好きな画像を保存して下さい。そして、以下のように記述して下さい。Atom上では以下のようになります。

犬

ここでは、<img/>タグを使いました!<img/>タグは画像を表示させるタグです。今まで出てきたタグとなんか違いますよね?そうです、開始タグがなく終了タグの「/」の位置が後ろに来てますよね?そして「src」、「alt」と見慣れない文字も・・

安心して下さい。順を追って説明していきます!

<img/>タグは開始と終了を省略して書きます。省略する場合は「/」を後ろにつけます。他にも改行を表すタグ<br/>タグもこのように書きます!

次に「src」「alt」について説明します。これらは属性と呼ばれます。srcにはファイルパスを書き表示する画像を指定します。ここはつまずきやすいポイントです!index.htmlファイルから読み込むので同じ階層にあるのはimagesフォルダです。imagesフォルダの中に「dog.jpg」を保存したのでファイルパスを書くときは「images/dog.jpg」となります。(studyフォルダの中に画像を保存した場合は「dog.jpg」となります。)

alt属性は、画像の説明を書きます。画像が読み込まれなかった場合にその説明が表示されるようになるものです。

では実際にブラウザで確認しましょう!

犬

ちゃんと犬の画像が表示されましたね!


今回はここまでにします!実際にタグは多く種類があるのでこの記事では紹介しきれませんでした。ネットで検索したり、参考書を一冊買っていただければ詳しく記載されておりますのでそちらをご参照ください!

オススメ書籍:1冊ですべて身につくHTML-&-CSSとWebデザイン入門講座

ポイントを整理すると、

  • HTMLの編集にはテキストエディターとWebブラウザが必要である
  • ディレクトリ(フォルダ)とファイルの作成の仕方
  • HTMLは<html>、<head>、<body>の3種類で文書の構造を定義する
  • <h1><p><img/>タグの使い方
  • ファイルパスを指定する場合は読み込み元のファイルから考えて「images/dog.jpg」のような形で記述する

です!

次回はCSSでHTMLで作成した文章のレイアウトを整えていきます!お楽しみに〜👋

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です