先日、WordPressでアフィリエイトBlogを運営するには、Webの知識（html、css）が必要不可欠だと記事にしました。
マツカタもWebデザイナーの専門学校で学んだので、学校等で学ぶのが一番の近道な気がしますが、webデザイナーを目指さない方には、大きな出費です。
html、cssについて、マツカタが教えるよりも詳しいサイト、ブログなんかがたくさんありますので、
マツカタは、触りの部分だけを、なるべく簡単簡潔に説明したいと思います。
htmlのコードは半角英数で記述
htmlのコードを記述するのに、絶対のルールが半角英数での入力です。
記事の内容なんかは、普通に全角で書いて構わないのですが、これから説明するhtmlコードは必ず、半角英数で記述して下さい。
マツカタのパソコンの環境がMacなので、Windowsの方には申し訳ないのですが、マツカタの環境に沿って話を進めます。
テキストエディター（メモ帳）でhtmlを編集してみましょう
PCには、標準でテキストエディターのソフトが入ってますよね？
- Macだと、テキストエディター
- Windowsだと、メモ帳
それらのソフトでhtmlは編集できます。
その際に、Macのテキストエディターの場合だと、デフォルトでの設定がリッチテキストと言って、文字が装飾できる設定のテキストなので、標準テキストに変更します。
テキストエディターのパソコン画面の一番上のリンゴマークの並びのフォーマットから、標準テキストにするをクリックして選択します。
Windowsのメモ帳を最近触ってなく、メモ帳はシンプルなテキストエディターだった気がしますが、リッチテキスト形式になってるならば、同様に標準テキストの編集モードにして下さい。
標準テキストでの編集モードになってるのを確認できたら、
htmlのコードを入力します。
絶対のルールなので、何度も言いますが、htmlコードは、必ず、半角英数での入力です。
htmlの入力によく使う、キーボードのキーですが、
丸で囲った部分です。
- shiftキーを押しながら < を押すと、<
- shiftキーを押しながら > を押すと、>
- /スラッシュは普通に/キーを押せば入力できます。
<と>（大なり、小なり）の名称がわからなくて、すいません、、
<html> <body> こんにちは、初めてのhtmlです。（好きな文字を入力して下さい。） </body> </html>
htmlの基本は、<html>の開始タグで始まり、頭に/がついた</html>閉じタグが基本的にワンセットになります。
タグの中に、htmlページの内容を記述します。
記述みてもらえば、わかるんですが、<html></html>タグの中に、<body></body>タグが入ってますよね？
その構造を入れ子と言います。htmlページは、こうした入れ子構造だらけです。
編集できたテキストを、拡張子、.html形式で保存しましょう。
その際の、文字のエンコードはutf-8を選択して下さい。
保存場所は、分かりやすいように、デスクトップにhtmlって名称のフォルダーを作り、その中に保存しましょう。
保存する名前はindex.htmlにしましょう。
utf-8でのエンコードは、今のhtmlでの標準（推奨）だからです。
保存できた、htmlファイルをブラウザーの上にドラッグ&ドロップ。
どうですか、htmlコードは表示されず、入力した文字だけが表示されましたよね？
ちなみに、こんな感じで表示されて入れば、正解です。
ここまで、理解できた方は、もうhtmlの触りは理解できてますよ。
後は、同じような事の繰り返しです。
タイトルを入れてみます。
では、先ほどの.htmlファイルをさらに編集し、ブラウザーで表示された際に、タブ等に表示されるタイトルを入れてみましょう。
<html> <head> <title>初めてのhtmlです。</title> </head> <body> こんにちは、初めてのhtmlです。（好きな文字を入力して下さい。） </body> </html>
ハイライトで表示されて部分を追加してます。
先ほど同じように、拡張子を.htmlで保存。
ブラウザーで見てみましょう！
どうですか？タイトルが表示されましたよね？
また、続きは次回以降に
簡単、簡潔にhtmlの事を書くつもりでしたが、思いのほか情報量が多いですね、、
今回は、この辺りまでとしましょう！！
リンクの貼り方や、画像の表示くらいまでは、知りたいですよね？
また、順を追って説明しますね。
全然、テキストエディターでも編集できるのですが、htmlのエディターあれば、編集が楽で、便利です。
無料でダウンロードできますので、htmlの編集に使うのをお勧めします。
htmlエディターについては、
htmlに興味が湧いた方は、htmlの辞書を一冊持ってると良いですよ。
色々なhtmlタグが掲載されているので、今回の流れを理解できたならば、辞書で自己流でhtmlを編集していけます。
この記事が気に入ったら
いいね！しよう
最新情報をお届けします
Twitter でマツカタをフォローしよう！
Follow @matsukataweb
