初心者必見!WordPressで0からブログを作ってみよう!HTMLの入門編

初心者必見!Wordpressで0からブログを作ってみよう!HTMLの入門編

今回から連載という形でブログを更新していこうかなと思います。ブログはじめたいけどHTMLとかCSSとか分からないというかた向けです。その延長線上でブログを作れるWordPressで実際にブログを作って見るとこまでやってみたいと思います。

こんなブログサイトを作る

一緒に作っていくブログサイトは以下のようなものになります。ほとんどこのブログと同じ感じですけど、一般的なブログを作るという意味ではいいのかなと思います。
こんなブログを作ろう

とはいえいきなり上記のようなサイトは作れないので順を追って進めていきます。まずは、HTML編の完成例として以下のところまでやってみましょう!!

画像やhtmlファイルなどを一式ダウンロードできます。

作れるようになるまでの流れ

実際に作っていく手順としては以下のように進めていこうかと思っています。HTML,CSSできるよってかたは3番のWordPressテーマ作成編から進めていただくといいかもしれません。

1. HTMLの入門編 ←いまここ
2. CSSの入門編
3. WordPressテーマ作成編
4. カテゴリメニュー・パンくずリスト・ページャー作成編
5. 検索できるようにしよう編
6. WordPressで問い合わせページを作ろう編
7. レスポンシブでスマートフォンにも対応させよう編
8. 作ったブログをサーバーにアップしてみよう編

上記以外にも、CSSの管理をしやすいようにSassやGulpを使ってみたり、WordPressのショートコードを作ってみたり、Javascriptでフォームのバリデーションも、その他応用編として記事にしてみようかなと思っています。

HTMLの基本

まずは初めての方向けにHTMLの基本からやっていきますね。

HTMLとは

HTMLとは一体なんでしょう。HTMLというのは文書構造をマークアップする言語です。ちょっと難しいですね。わかりやすく例えると、学校の先生や会社の上司にレポートを提出するときにワードで文章を書きますよね。そのときにタイトルがあって見出しがあって本文というように書きますよね。あとは、文章が多ければ見出しも増えたりページも増えます。

じつはHTMLもワードの文章と同じでタイトルや見出しを使いながらわかりやすい文章を書いて相手(ブログの場合はみてくれるユーザー)にみてもらうものなんです。

HTMLの場合は、「ここが見出し」でとか「ここが段落」などを「タグ」というものを使って表現をします。これをマークアップといいます。これを生業としている人をマークアップエンジニアとか言ったりしますね〜。

HTML5について

すこしでもWEBに興味のあるかたなら聞いたことがあるかもしれませんが、HTMLにもバージョンがあります。現在一番新しいバージョンがHTML5というものになります。今回は業界の標準に則りHTML5で進めていきます。

ブラウザソフトについて

ところで、インターネットを見るときって何でみていますか?

IEの画像

上記のマークのようなものをクリックしてインターネットをみていませんか?
これはInternet Explorerというブラウザソフトです。これはワードとかエクセルと同じようなもので、ようはインターネットを見るためのソフトなんです。

そしてさらに、このブラウザソフトはInternet Explorerだけではありません。もっというと、お仕事でHTMLを書いているかたのほとんどはChrome(クローム)というブラウザソフトを使っていることがほとんどです。というのも、HTMLを書くときなどに助かるツールが付いているからんですね〜

※なので、この記事ではこれ以降Chromeで確認していくことを前提として進めます。

これを機にChromeをダウンロードしてみては?

Chromeダウンロード

ほかにもあるブラウザソフト
Firefox のダウンロード

HTMLのソースコードを見てみよう

みなさんは普段そのブラウザソフトを使ってインターネットを閲覧してますよね?
そのインターネットには星の数ほどのWEBサイトが公開されています。これから勉強するかたにとってはそれらのWEBサイトが実は最高のお手本でありサンプルです。というのも、公開されているWEBサイトはHTMLを覗くことができるんです。

覗きかた
では実際に覗いてみましょう。今回はグノシー 無料で読めるニュースまとめにしましょう。

Chrome
画面右クリック > ページのソースを表示

ソースコードの画像

いかがです?こんな感じでぐわぁーとよく分からないコードがでてきていませんか?
そう!これがHTMLなんです。なんだか難しそうって感じるかもしれませんが、先ほども書いたようにワードの文章を作るのと一緒です。やり方やルールさえわかれば誰にでもできます!!

HTMLを書くに当たってテキストエディタを用意しよう

これはメモ帳のようなものでもいいんですが、おすすめはSublime Text(Win/Mac 有料)かAtom(Win/Mac 無料)というテキストエディタです。ほかにもWindowsならTerapad(Win 無料)というのもあります。
作業の効率等もあるのでぜひダウンロードしてくださいね。

Sublime Text: The text editor you’ll fall in love with
Atom
TeraPad – 窓の杜ライブラリ

イチマルニデザインブログでも過去に記事にしています。よかったら合わせて読んでみてください。

HTMLの書き方

では実際に書いてみましょう!!
まずはHTMLのファイルを作らなければいけません。ということで、今回はとりあえずデスクトップに「study」というフォルダを作りましょう。そしてその中に、「index.html」というファイルを作ってみましょう。

テキストエディタで新規作成 > 保存 > 「study」に保存

フォルダの様子

index.htmlとは

これは実はindexというのは基本的にサイトのトップページに付けられるファイル名です。yahooだったらYahoo! JAPANがトップページですね。

そして「.html」は拡張子というものです。実はパソコンを使ったことあるかたならほとんどのかた方が、似たようなものを見たことあります。ワードのファイルを保存するときは「.docx」エクセルは「.xlsx」というように拡張子が自動で選ばれるんです。この拡張子というのは、簡単にいうとこのソフトで開いてね〜という合図のようなものです。なので「.docx」で保存されたものは間違ってエクセルで開かれたりせず、ワードで開きますよね?

「.html」で保存すると任意のブラウザソフトで開いてね〜という合図なんですね。

実際にHTMLを書いてみよう

下記のコードをテキストエディタを使ってindex.htmlに書いてみましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>タイトル</title>
</head>
<body>
	サンプル
</body>
</html>

では実際にブラウザソフトでみてみましょう。Chromeにindex.htmlのファイルをドラッグ&ドロップすることでみることができます。

ドラッグ&ドロップの画像

サンプルのように表示されていればOKです!!たったの一文ですがこれでHTMLのファイルをブラウザでみることができましたね。

書くときの基本は「< >」です。このカッコで書かれている部分がHTMLタグというものになります。そして、このタグは一部の例外を除いて対のタグが必要になります。それが「/」が付いているものですね。

なので、5行目をみていただくと

<title>タイトル</title>

となっています。これはtitleというタグが書かれています。さらに最初に書いてある「title」のことを開始タグ、後に書いてある「/」があるのが終了タグといいます。この開始タグと終了タグで挟まれたものがブラウザに表示されています。titleはどこかというと

タイトルの場所

になります。では次に詳しく中身を説明していきます。

html,head,bodyの説明

コードをよく見てみると大体のタグが開始タグと終了タグの対でできているのがわかりますね。

<html lang="ja">

</html>

これはこの中身がHTMLですよっていう意味になります。ちなみに「lang=”ja”」はタグ以外の文章は日本語で書かれていますよ〜っていうおまじないです。

<head>

</head>

これはヘッドと言ってHTMLの情報を載せる部分になります。titleも情報になります。

<body>

</body>

ここはボディといって本文にあたる部分です。実際にいつも僕らがみているWEBサイトはここになります。

DOCTYPEタイプ

<!DOCTYPE html>

これは文書型宣言といって簡単にいうとHTMLのバージョンを宣言するものです。今回の場合だとHTML5でこれから書きます!っていう意味になります。

文字コードについて

<meta charset="UTF-8">

文字コードの指定をしています。簡単にいうと文字化けが起きないようにするためのおまじないです。さらにこのタグは終了タグがありませんね。ほかにも終了タグお必要としないタグがあるのですがこれも開始タグのみでOKのタグです。

文書構造を意識してマークアップしてみよう

index.htmlに追記変更をしてみましょう。改行なども同じようにしてみてくださいね。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>タイトル</title>
</head>
<body>
	改行させてみよう
	改行させてみよう
	改行させてみよう
</body>
</html>

あれ?これだと意図した場所で改行されていませんね。改行するのにもタグが必要になります。次に改行をしてみましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>タイトル</title>
</head>
<body>
	改行させてみよう<br>
	改行させてみよう<br>
	改行させてみよう
</body>
</html>

改行ができました。このようにHTMLの場合は改行をしたいときでもタグを書かなければいけません。

しかし、これだと文書構造がない状態ですね。なのでこれから紹介するタグで文章に意味と役割を与えて構造化していきます。

文書構造とは

ここが見出しでとか、ここが段落でと言ったように文章に意味づけをしていくものです。役割をつけるでもいいですね。なので、まずは今回作るブログの文章構造を確認しましょう。

文書構造について

ざっくり色分けをするとこのようなイメージになります。見出しや段落といった具合にしていますが、HTMLの場合はタグで意味づけをしていくのでしたね。

hxタグ

これは見出しを表すタグです。見出し1や見出し2のように階層があり、h6まであります。

<h1>見出し1</h1>
<h2>見出し2</h2>
<h3>見出し3</h3>
<h4>見出し4</h4>
<h5>見出し5</h5>
<h6>見出し6</h6>

h6まであるのですが、ほとんど使うことはないです。だいたいh4位までです。

pタグ

これは段落を表すタグです。

<p>段落</p>
<p>長い文章の場合、どこかで改行したい場合は<br>で改行</p>

段落内で改行したい場合にはbrタグを使って改行をします。

ulタグ、liタグ

これは二つセットで覚えておくといいでしょう。リストや箇条書きの意味があります。よくWEBサイトではメニューなどで使ったりします。

<ul>
	<li>メニュー1</li>
	<li>メニュー2</li>
	<li>メニュー3</li>
</ul>

のようにulタグでliタグを挟むようにしてマークアップします。そして、ここでのポイントはこのように挟むこと「入れ子にする」といいます。さらにその「入れ子」をたくさん使う場合などはソースコードがものすごく読みづらくなることがあります。なので、[tabキー]でタブを挿入して、開始タグと終了タグがどこで対になっているかをわかりやすくします。

sectionタグ

これは基本的に見出しをともなう文章のひとかたまりのことをいいます。

<section>
見出しや文章
</section>

見出しと文章を含むグループって感じですね。

articleタグ

sectionの仲間ですが、これはブログの記事などのように、独立しても意味が通るような部分のことをいいます。おそらくsectionよりもイメージしやすいと思います。

<article>
ブログの記事など
</article>

asideタグ

これもsectionの仲間なんですが、そのコンテンツに関係してはいるものの、切り離すことができるコンテンツを示します。よくサイドバーなどで使います。

<aside>
コンンテンツ
</aside>

headerタグ

ページのヘッダー(冒頭)を表すsectionの仲間

<header>
ヘッダー
</header>

footerタグ

ページのフッター部分を表すsectionの仲間

<footer>
フッター
</footer>

navタグ

ページのナビゲーションを表すsectionの仲間

<nav>
メニュー
</nav>

divタグ

グループを意味するタグ。sectionと似ていますが、sectionとは違い要素内に見出しがある必要はありません。用途としてレイアウトしたいときに使います。

<div>
コンテンツ
</div>

タグの分類

新しいバージョンのHTML5ではタグは7つに分類されます。

  • メタデータ・コンテンツ
  • フロー・コンテンツ
  • セクショニング・コンテンツ
  • ヘッディング・コンテンツ
  • フレージング・コンテンツ
  • エンベッディド・コンテンツ
  • インタラクティブ・コンテンツ

しかし、これは初心者の方にはものすごく分かりづらいんですね。覚えることも多くなってしまいます。なので、旧バージョンではブロック要素とインライン要素の2種類でした。まずはその2種類を覚えてしまいましょう。ざっくりいってしまうとHTML5のほうの7つの分類もこの2種類に分類されます。

  • ブロック要素
  • インライン要素

この2つだけです。簡単ですね。レイアウトする際にこのブロック要素とインライン要素を理解しておくことが必要になります。

ブロック要素

これははこのようなものをイメージしていただくといいと思います。さらにいうと先ほど紹介したタグありましたね。h1とかpタグとか。これらはブロック要素です。

主なブロック要素
hx,p,ul,section,aside,article,header,footer,nav,divなど

インライン要素

ではインライン要素はというと、ブロック要素内に存在するタグです。正確にいうと別にブロック要素内にしか書くことができないというよりも、そうゆうルールです。

主なインライン要素
br,a,img,spanなど

などが挙げられます。とはいってもまだ紹介していないのでそんなものがあるのか程度で結構です。

ブロック要素とインライン要素の違い

では見た目上で判別できるのでしょうか?
試しに以下のHTMLを書いてみます。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>サンプル</title>
</head>
<body>
	<div style="border:solid 1px #ccc;">
		あいうえお<span style="border:solid 1px #00f;">かきくけこ</span><div style="border:solid 1px #f00;">さしすせそ</div>
	</div>
</body>
</html>

とするとどうですか?「かきくけこ」の部分は改行されませんが、「さしすせそ」の部分は改行されましたね。実は、枠線を見てみるとわかるのですがブロック要素であるdivタグは画面の端から端まで自分の領域を持っているのがわかります。反対にインライン要素のspanタグは文字の部分しか領域を持っていないのがわかります。

マークアップしてみよう

これらを踏まえてサンプルのコーディングをしてみましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>タイトル</title>
</head>
<body>
	<header>
		<h1>Logo</h1>
		<nav>
			<ul>
				<li>HTML</li>
				<li>CSS</li>
				<li>Javascript</li>
			</ul>
		</nav>
	</header>
	<nav>
		<ul>
			<li>Home</li>
		</ul>
	</nav>
	
	<div>
		<section>
			<ul>
				<li>
					<p>HTML</p>
					<div>
						スマホサイトってリキッドレイアウトと固定幅どっちで作った方がいいの?の画像
					</div>
					<h2>スマホサイトってリキッドレイアウトと固定幅どっちで作った方がいいの?</h2>
					<p>
						スマートフォンサイトの制作時に、リキッドレイアウトと固定幅の2パターンがあります。正直どちらも見た目上がそんなに違いはありませんが、どっちで制作するの...
					</p>
					<p>2015/07/08</p>
				</li>
				<li>
					<p>CSS</p>
					<div>
						知っておくと便利!ちょっとのコードで書ける役立つcssの小技集の画像
					</div>
					<h2>知っておくと便利!ちょっとのコードで書ける役立つcssの小技集</h2>
					<p>
						今回は、現場で常に使うわけではないけど、知っておくと便利で使える簡単なCSSのコードを紹介します。文字に装飾したりとかが多めです。
					</p>
					<p>2015/07/07</p>
				</li>
				<li>
					<p>CSS</p>
					<div>
						CSSだけでできちゃう!overflow:scroll;を使った簡単なスライダーの画像
					</div>
					<h2>CSSだけでできちゃう!overflow:scroll;を使った簡単なスライダー</h2>
					<p>
						今回はcssのoverflow:scroll;を使って簡単なスライダーを紹介します。Spotlightとかグノシー(アプリ)でも使われていますね。
					</p>
					<p>2015/07/06</p>
				</li>
				<li>
					<p>CSS</p>
					<div>
						Handlebars.jsっていうjavascriptのテンプレートエンジンを勉強したのでそのまとめの画像
					</div>
					<h2>Handlebars.jsっていうjavascriptのテンプレートエンジンを勉強したのでそのまとめ</h2>
					<p>
						今日は、現場で使っているjavascriptのテンプレートエンジン、Handlebars.jsについて勉強したのでまとめます。結構、わかりやすいので学習コストが低いのが
					</p>
					<p>2015/07/05</p>
				</li>
			</ul>
			<!-- 繰り返しなので省略します -->
		</section>
		<nav>
			<ul>
				<li>1</li>
				<li>2</li>
				<li>3</li>
			</ul>
		</nav>
	</div>

	<div>
		<aside>
			<!-- 検索フォームがここに入ります -->
			<div>
				<h2>
					Follow us
				</h2>
				<ul>
					<li>
						<div>
							Facebook
						</div>
					</li>
					<li>
						<div>
							Twitter
						</div>
					</li>
					<li>
						<div>
							Feedly
						</div>
					</li>
				</ul>
			</div>
			<div>
				<h2>
					新着記事
				</h2>
				<ul>
					<li>
						<div>
							画像
						</div>
						<div>
							<p>2014/07/08</p>
							<h3>最近気になった記事をまとめてみました 2015/06/29〜2015/07/3</h3>
						</div>
					</li>
					<li>
						<div>
							画像
						</div>
						<div>
							<p>2014/07/08</p>
							<h3>子持ちWEBデザイナーが情報収集やスキルアップの時間を確保するときに実践している7つのこと</h3>
						</div>
					</li>
					<li>
						<div>
							画像
						</div>
						<div>
							<p>2014/07/08</p>
							<h3>最近気になった記事をまとめてみました 2015/06/29〜2015/07/3</h3>
						</div>
					</li>
					<li>
						<div>
							画像
						</div>
						<div>
							<p>2014/07/08</p>
							<h3>子持ちWEBデザイナーが情報収集やスキルアップの時間を確保するときに実践している7つのこと</h3>
						</div>
					</li>
					<li>
						<div>
							画像
						</div>
						<div>
							<p>2014/07/08</p>
							<h3>最近気になった記事をまとめてみました 2015/06/29〜2015/07/3</h3>
						</div>
					</li>
					<!-- 繰り返しのため省略 -->
				</ul>
			</div>
		</aside>
	</div>

	<footer>
		<nav>
			<ul>
				<li>お問い合わせ</li>
				<li>このサイトについて</li>
			</ul>
		</nav>
		<p>コピーライト</p>
	</footer>
</body>
</html>	

ではブラウザで確認してみましょう。確認する際は先ほどすでにドラッグ&ドロップでChromeで表示していますね。なので更新をすれば大丈夫です。
windowsの場合は「F5」
Macの場合は「command + R」

で更新されます。

ちなみに「繰り返しのため省略」の部分などで使われいる部分はコメントアウトといって実際にブラウザ上では表示されていない部分になります。マークアップする上でわかりやすくするためや、このようにコメントを残すために使われたりします。

画像を載せてみよう

このままでは味気ないですね。サンプルと同様に画像を載せてみましょう。

画像の形式

これはjpg,png,gifを代表的なものが3種類あります。話せばきりがないですが、簡単に説明しますね。

jpg
写真のように色の多い画像の場合に使います。さらに、そうゆう写真のような画像の場合はpngやgifよりも画像がきれいでかつファイルサイズを抑えることができます。しかし、画像の劣化が起きる場合があります。

png
画像の劣化がなく高画質です。さらに、背景が透明の画像を作成することもできます。が、写真のように色の多い画像の場合はファイルサイズが重くなってしまうデメリットがあります。

gif
主に、アイコンやロゴなど色の数が少ない画像で使います。

詳しい説明はjpg,png,gifの違いと比較と簡単に分かる最適な使い分け方を参考にするといいと思います。

タグの書き方

<img src="images/sample.jpg" alt="画像を説明する文章" width="100" height="100">

というようにかきます。ですが、中身がいろいろ書いてありますね。そちらを説明していきます。

src属性

「=””」と書かれているものは全て属性といいます。このsrcは実は画像が置いてある場所を書く属性になります。
その場所のことをパスといいます。

パスについて

そのパスの書き方は2種類あります。相対パスと絶対パスです。
絶対パスは「http://」などURLから画像のパスを参照します。自分のサイトなのにURLから書く必要はないですよね?全部同じURLですもんね。なので、自分のサイトの画像を使う場合には相対パスを使います。

表示させたいhtmlファイル、今回ならindex.htmlからみた画像の場所を記述します。

index.htmlからみた画像の場所

のばあいであれば

<img src="images/sample.png" alt="画像を説明する文章" width="100" height="100">

となります。index.htmlと同じ階層の「imagesフォルダ」の中の「sample.png」といった具合になります。

さらに詳しく知りたい場合は絶対パスと相対パスを参考にしてください。

※よそさまのサイトの画像を絶対パスを使うと表示させることができますが、人ものを盗んでいるのと同じ行為です。絶対にやってはいけません。

alt属性

これは簡単にいうと画像の説明をいれます。厳密にいうと違うのですが・・・。
何かしら問題が起きて画像が表示されない場合などにも意味が通じるような文言を入れる必要があります。SEO的にもすごく重要な要素です。

widthとheight

これはwidth(幅)、height(高さ)というように画像の大きさを表します。実際の画像のサイズを同じものを入力するようにしてください。でないと画像が荒れてしまったりします。

実際に画像を出してみよう

今回は以下の部分に画像がでるようにしてみます。

<li>
	<p>HTML</p>
	<div>
		スマホサイトってリキッドレイアウトと固定幅どっちで作った方がいいの?の画像
	</div>
	<h2>スマホサイトってリキッドレイアウトと固定幅どっちで作った方がいいの?</h2>
	<p>
		スマートフォンサイトの制作時に、リキッドレイアウトと固定幅の2パターンがあります。正直どちらも見た目上がそんなに違いはありませんが、どっちで制作するの...
	</p>
	<p>2015/07/08</p>
</li>

こんな感じで書き換えてみましょう

<li>
	<p>HTML</p>
	<div>
		<img src="images/img_blog_sample_01.png" alt="スマホサイトってリキッドレイアウトと固定幅どっちで作った方がいいの?" width="390" height="240">
	</div>
	<h2>スマホサイトってリキッドレイアウトと固定幅どっちで作った方がいいの?</h2>
	<p>
		スマートフォンサイトの制作時に、リキッドレイアウトと固定幅の2パターンがあります。正直どちらも見た目上がそんなに違いはありませんが、どっちで制作するの...
	</p>
	<p>2015/07/08</p>
</li>

いかがですか?これで画像が出たと思います。

他のページとリンクさせよう

インターネットってクリックしたら他のページに移動しますね。これはリンクでつながっているからなんです。

リンクさせたいところに

<a href="リンク先">リンクしたい文言</a>

とします。href属性には画像のときのように相対パスや絶対パスでリンク先をかきます。今回はfacebookの部分をまずはやってみましょう。

サイドバーのこの部分を修正します。

<div>
	<h2>
		Follow us
	</h2>
	<ul>
		<li>
			<div>
				Facebook
			</div>
		</li>
		<li>
			<div>
				Twitter
			</div>
		</li>
		<li>
			<div>
				Feedly
			</div>
		</li>
	</ul>
</div>

下記のように変更してみましょう。

<div>
	<h2>
		Follow us
	</h2>
	<ul>
		<li>
			<div>
				<a href="https://www.facebook.com/ichimarunidesign">Facebook</a>
			</div>
		</li>
		<li>
			<div>
				Twitter
			</div>
		</li>
		<li>
			<div>
				Feedly
			</div>
		</li>
	</ul>
</div>

これで、イチマルニデザインのFacebookページに移動しましたよね?自分のサイト内でリンクするときは画像同様相対パスでhref属性のリンク先を記述します。ですが、まだこのサンプルブログはindex.htmlしかありません。その場合は仮のリンクとして「#」を書きます。お作法として覚えておくといいでしょう。

他の部分も画像やリンクのマークアップをしてみよう

まだまだ他の部分も画像が出てなかったり、リンクにしたいとこがあります。下記のようにマークアップしてみましょう!!

liの中で、h2やpタグなどを全体を囲っている部分何箇所かありますね。これはHTML5からできるようになったのですが、全体をクリックできるようにするテクニックです。

Logoの部分を画像にしていますが、ここはリンク先がindex.htmlになっていますね。WEBサイトの多くはロゴをクリックするとトップページに移動するようになっています。その慣例に習ってこのサンプルでもトップページに行くようにしています。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>タイトル</title>
</head>
<body>
	<header>
		<h1><a href="index.html"><img src="images/logo.png" alt="Logo" width="110" height="50"></a></h1>
		<nav>
			<ul>
				<li><a href="#">HTML</a></li>
				<li><a href="#">CSS</a></li>
				<li><a href="#">Javascript</a></li>
			</ul>
		</nav>
	</header>
	<nav>
		<ul>
			<li>Home</li>
		</ul>
	</nav>
	
	<div>
		<section>
			<ul>
				<li>
					<a href="#">
						<p>HTML</p>
						<div>
							<img src="images/img_blog_sample_01.png" alt="スマホサイトってリキッドレイアウトと固定幅どっちで作った方がいいの?" width="390" height="240">
						</div>
						<h2>スマホサイトってリキッドレイアウトと固定幅どっちで作った方がいいの?</h2>
						<p>
							スマートフォンサイトの制作時に、リキッドレイアウトと固定幅の2パターンがあります。正直どちらも見た目上がそんなに違いはありませんが、どっちで制作するの...
						</p>
						<p>2015/07/08</p>
					</a>
				</li>
				<li>
					<a href="#">
						<p>CSS</p>
						<div>
							<img src="images/img_blog_sample_02.png" alt="知っておくと便利!ちょっとのコードで書ける役立つcssの小技集" width="390" height="240">
						</div>
						<h2>知っておくと便利!ちょっとのコードで書ける役立つcssの小技集</h2>
						<p>
							今回は、現場で常に使うわけではないけど、知っておくと便利で使える簡単なCSSのコードを紹介します。文字に装飾したりとかが多めです。
						</p>
						<p>2015/07/07</p>
					</a>
				</li>
				<li>
					<a href="#">
						<p>CSS</p>
						<div>
							<img src="images/img_blog_sample_02.png" alt="CSSだけでできちゃう!overflow:scroll;を使った簡単なスライダー" width="390" height="240">
						</div>
						<h2>CSSだけでできちゃう!overflow:scroll;を使った簡単なスライダー</h2>
						<p>
							今回はcssのoverflow:scroll;を使って簡単なスライダーを紹介します。Spotlightとかグノシー(アプリ)でも使われていますね。
						</p>
						<p>2015/07/06</p>
					</a>
				</li>
				<li>
					<a href="#">
						<p>CSS</p>
						<div>
							<img src="images/img_blog_sample_02.png" alt="Handlebars.jsっていうjavascriptのテンプレートエンジンを勉強したのでそのまとめ" width="390" height="240">
						</div>
						<h2>Handlebars.jsっていうjavascriptのテンプレートエンジンを勉強したのでそのまとめ</h2>
						<p>
							今日は、現場で使っているjavascriptのテンプレートエンジン、Handlebars.jsについて勉強したのでまとめます。結構、わかりやすいので学習コストが低いのが
						</p>
						<p>2015/07/05</p>
					</a>
				</li>
			</ul>
			<!-- 繰り返しなので省略します -->
		</section>
		<nav>
			<ul>
				<li>1</li>
				<li><a href="#">2</a></li>
				<li><a href="#">3</a></li>
			</ul>
		</nav>
	</div>

	<div>
		<aside>
			<!-- 検索フォームがここに入ります -->
			<div>
				<h2>
					Follow us
				</h2>
				<ul>
					<li>
						<div>
							<a href="https://www.facebook.com/ichimarunidesign">Facebook</a>
						</div>
					</li>
					<li>
						<div>
							<a href="#">Twitter</a>
						</div>
					</li>
					<li>
						<div>
							<a href="#">Feedly</a>
						</div>
					</li>
				</ul>
			</div>
			<div>
				<h2>
					新着記事
				</h2>
				<ul>
					<li>
						<a href="#">
							<div>
								<img src="images/thumb_blog_sample_01.png" alt="Handlebars.最近気になった記事をまとめてみました 2015/06/29〜2015/07/3" width="80" height="80">
							</div>
							<div>
								<p>2014/07/08</p>
								<h3>最近気になった記事をまとめてみました 2015/06/29〜2015/07/3</h3>
							</div>
						</a>
					</li>
					<li>
						<a href="#">
							<div>
								<img src="images/thumb_blog_sample_02.png" alt="子持ちWEBデザイナーが情報収集やスキルアップの時間を確保するときに実践している7つのこと" width="80" height="80">
							</div>
							<div>
								<p>2014/07/08</p>
								<h3>子持ちWEBデザイナーが情報収集やスキルアップの時間を確保するときに実践している7つのこと</h3>
							</div>
						</a>
					</li>
					<li>
						<a href="#">
							<div>
								<img src="images/thumb_blog_sample_01.png" alt="最近気になった記事をまとめてみました 2015/06/29〜2015/07/3" width="80" height="80">
							</div>
							<div>
								<p>2014/07/08</p>
								<h3>最近気になった記事をまとめてみました 2015/06/29〜2015/07/3</h3>
							</div>
						</a>
					</li>
					<li>
						<a href="#">
							<div>
								<img src="images/thumb_blog_sample_02.png" alt="子持ちWEBデザイナーが情報収集やスキルアップの時間を確保するときに実践している7つのこと" width="80" height="80">
							</div>
							<div>
								<p>2014/07/08</p>
								<h3>子持ちWEBデザイナーが情報収集やスキルアップの時間を確保するときに実践している7つのこと</h3>
							</div>
						</a>
					</li>
					<li>
						<a href="#">
							<div>
								<img src="images/thumb_blog_sample_01.png" alt="最近気になった記事をまとめてみました 2015/06/29〜2015/07/3" width="80" height="80">
							</div>
							<div>
								<p>2014/07/08</p>
								<h3>最近気になった記事をまとめてみました 2015/06/29〜2015/07/3</h3>
							</div>
						</a>
					</li>
					<!-- 繰り返しのため省略 -->
				</ul>
			</div>
		</aside>
	</div>

	<footer>
		<nav>
			<ul>
				<li><a href="#">お問い合わせ</a></li>
				<li><a href="#">このサイトについて</a></li>
			</ul>
		</nav>
		<p>コピーライト</p>
	</footer>
</body>
</html>

どうですか?画像やリンクのマークアップできたでしょうか?

完成例はこちらで確認してください。

おわりに

ここまでがHTML入門になります。初心者の方を対象としているのでだいぶ省いている部分もあります。しかし0から作るには最低限必要なことを念頭にいれて記事にしました。初めてHTMLに触れる方や興味のあるかたのお役に立てればと思います。

次回は、CSSの入門として今回作ったindex.htmlに対してスタイル(装飾)を変えていきたいと思います。

イチマルニデザインブログをフォローしよう

イチマルニデザインブログではTwitterアカウントでWebに関する情報をつぶやいています。フォローすることで最新情報をすぐに受け取ることができます

同じカテゴリーの記事

ページの先頭へ