基本が大事？HTMLのコードって何で書くの？

基本が大事？HTMLのコードって何で書くの？

ぼくの、大失敗談をお読みいただけた方は、
基本が大事だという事が、多少なりとも理解いただけたかと思います。

そこで今回は、じゃッHTMLってどう書くの？から、
ご説明したいと思います…。

まず、その前にエディターソフトがありますよね！
と記載すると、それなんですか？

といわれそうなので、
ドリームウィーバーやホームページビルダーなど、
特にWindowsでは、一般的なソフトですね…。

がしかし、上記のソフトは有料なんですよね…。

HTMLを記載したことの無い人が、いきなり有料ソフトを
購入するのは、少し冒険ですね…。

そこで、今回は最後にエディターソフトも紹介しますが、
その前に、Windowsに付属のメモ帳で行ってみましょう～！！

それでは、とりあえず私が作った楽天市場のページより

季節がら今回はクリスマス特集～☆

地酒のかどや「クリスマス特集」

雪が降っていますねッ…。

コチラのページを開いていただき、
Ctrl+Uのキーを押して頂くと、ページのソースを見ることが出来ます。

このソースではXHTMLで記載してありますが、
今回はエディターソフトの説明なので、このソースコードを
簡略化したHTML5のコードを記載いたしました。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>クリスマステスト！</title>
</head>

<body>

<h1 class="con_title"><img src="https://www.rakuten.ne.jp/gold/sake-kadoya/christmas/images/con_title1sp.png"></h1>

<ul>

<li>
<a href="https://item.rakuten.co.jp/sake-kadoya/1155470/">
<img src="https://www.rakuten.ne.jp/gold/sake-kadoya/christmas/images/item1.png">
<h2>奥の松 純米大吟醸<br>
スパークリング720ml</h2>
<div>発泡性のある純米大吟醸の贅沢な香りと味わい。冷やして楽しむ、新しいスパークリング日本酒です。</div>
<div>5,500円（税込）</div>
<div><img src="https://www.rakuten.ne.jp/gold/sake-kadoya/christmas/images/botton.jpg"></div>
</a>
</li>


<li>
<a href="https://item.rakuten.co.jp/sake-kadoya/10000349/">
<img src="https://www.rakuten.ne.jp/gold/sake-kadoya/christmas/images/item2_2.png">
<h2>吉乃川<br>
甘酒仕立てにごり酒720ml</h2>
<div>新潟県産の新米を100％の麹でつくった吉乃川こだわりの甘酒をベースに仕立てた冬季限定のにごり酒。</div>
<div>935円（税込）</div>
<div><img src="https://www.rakuten.ne.jp/gold/sake-kadoya/christmas/images/botton.jpg"></div>
</a>
</li>

<li>
<a href="https://item.rakuten.co.jp/sake-kadoya/10001941/">
<img src="https://www.rakuten.ne.jp/gold/sake-kadoya/christmas/images/item3.png">
<h2>赤城山 純米<br>
ｽﾊﾟｰｸﾘﾝｸﾞ300ml×6本ｾｯﾄ</h2>
<div>近藤酒造特有のドライタイプの酒に、炭酸を封じ込めた、のど越し爽やかな和風シャンパンです。</div>
<div>送料無料4,480円（税込）</div>
<div><img src="https://www.rakuten.ne.jp/gold/sake-kadoya/christmas/images/botton.jpg"></div>
</a></li>

</ul>


</body>
</html>

上記のソースコードをコピーをして、
メモ帳に貼り付けてみてください…。

そして名前を付けて「test.html」でデスクトップ上に保存！

その際に、ファイルの種類は、すべてのファイル、保存ボタンの左側、文字コードはUTF-8を選択して下さい。
文字コードは、現段階では分からなくても大丈夫です…。

保存が出来たら、今度はデスクトップにできたアイコンをダブルクリックしてみると、
クリスマス特集の、一部が表示されるかと思います。

今回は、あくまでもエディターソフトの説明ですので、
もっとも簡単なHTMLを記載していますので、
表示はクリスマス特集と異なります…。

クリスマス特集の様なデザインで表示させたい場合は、
CSSとjQueryも、お勉強いたしませんと不可能です。

しかしながら、基礎からゆっくりでも続けてお勉強できれば、
半年もしないで、クリスマス特集の様なページ作成も可能かと思います。

という事で、Windowsに付属のメモ帳でもエディターソフトとして
使えるという事が、理解できたかと思います。

初めのうちは、これでも十分に無料で練習可能です！

出来そうだな～ッ、続けられそうだぁ～と思ったら、

下記に紹介するエディターソフトを使ってみるのもよいかと思います。

それでは、エディターソフトのご紹介！