Home > スポンサー広告 > きっと初心者でもわかる、HTMLの書き方の考え方。

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Comments: -

Comment Form
サイト管理者にのみ通知する

Trackback+Pingback: -

TrackBack URL for this entry
http://vanidesign.blog.fc2.com/tb.php/124-fe50c288
Listed below are links to weblogs that reference
スポンサーサイト from バニデザノート

Home > スポンサー広告 > きっと初心者でもわかる、HTMLの書き方の考え方。

Home > ウェブ > きっと初心者でもわかる、HTMLの書き方の考え方。

きっと初心者でもわかる、HTMLの書き方の考え方。

  • vanillate
  • 2014-12-14 Sun 12:39:46
  • ウェブ
html.jpg

ブログを書いているときにちょっとコードを足したいような初心者さんから、仕事では使っているけどオーサリングツールを使っているから不安なところがあるひと、仕事にしたいけど、自信がないひと。
そんな人達のための考え方を書いてみたいと思います。

HTMLは「プログラム」ではなく、「マークアップ言語」

まず、最初に理解してもらいたいのが、HTMLは「プログラム」じゃないってことです。
「プログラムのような思考がいらない」と言ったほうがいいかもしれません。

マークアップ言語の基本は、「文章を装飾」することにあります。
タグとタグを装飾したい文字列に対して挟むだけ。

例えば、文の一部を太字(強調)にしたい場合、

文章の中で<strong>ここだけを太字</strong>にするよ。

というように、タグで挟んでやればいいのです。

ね、できそうな気がしてきませんか。

開始タグと終了タグ

HTMLには、「開始タグ」と「終了タグ」があります。
先ほどの例でいうなら、

■開始タグ
<strong>

■終了タグ
</strong>

になります。さて、どこが違うでしょうか。
そうです。「/」スラッシュがあるかないかですね。

HTMLでは、基本、開始タグからはじまり、終了タグで終わります。
(いくつか終了タグがないものもあります。有名なのは画像を貼り付ける <img> タグとかですかね。)

タグで挟んで、その間に何があるかをブラウザは解釈していきます。
なので、「始まり」と「終わり」の両方に「しるし」が必要なんです。

プロのひとでもたぶんよくやるのが、「終了タグ」の書き忘れ。
書き忘れると、ページ全体がリンク化されたり、太字化されたりと、「いじってたらおかしくなっちゃった状態」になります。

*表示がおかしくなったり、段落ちしたりしたら、最初にチェックするのは、「終了タグ」が正しい位置に書き込まれているかどうかです。

タグには意味がある

なんとなく使っているかもしれないタグには、文脈的な意味があります。
意味と一緒に覚えれば、覚えやすいです。
あと、意味付けして覚えておけば、「HTMLの文章的におかしいソースコード」というのが減りますので、きちんと理解したコードを書ける技術につながっていきます。

■見出しタグ(Hxタグ)
<h1>ここに文章タイトルが入ります</h1>
<h2>ここに文章タイトルが入ります</h2>
<h3>ここに文章タイトルが入ります</h3>
<h4>ここに文章タイトルが入ります</h4>

Hとは「Heading」のこと。日本語でいうところの「文章内の見出し文字」に対して装飾したいときに使います。Hxのxには、数字が入ります。1が一番大きな見出しで、数値が増えるほど強さが弱まります。
スタイルシートで装飾せずとも、現在のブラウザでは太字の大きめの文字で表現してくれます。

■文章タグ
<p>ここに文章が入ります。</p>

文章のひとまとり、段落を挟むタグです。ブラウザでは自動で前後に空間を空けてくれます。昔も今も、この空間が邪魔でスタイルシートで打ち消しちゃうんですが、本当は便利なタグなんです。
段落ごとに挟んでいけば、読みやすい文章が出来上がります。

改行タグ
<br>
<br />

文章タグがでてきたので、必要になってくる改行タグについても書いておきます。
<br>と、<br />タグの動きは同じです。
<br />は、XHTML1.0というバージョンのときに、「閉じタグがないタグにはタグの最後にスラッシュをつけましょう」というような動きがあって、HTML5ではまた<br>に戻そうか。ということになり、いろいろ触ってますが両方見かけます。

HTML5が主流になってきていますので、<br>でいいのかなーと思うのですが、見かけた時に?が出てはいけないので、同じもの、とちょっと強引に言わせてもらいました。

改行タグは、その名の通り改行をしていくんですけど、適当に空間が開くので、<br>を連続で書き込んで無理やり空間を作ることがあります。本当は、こういうのはスタイルシート側でやるべきです。けれど、外枠が触れないようなものの場合、時々使ったほうが良い場合もあります。
本当はスタイルシートでやろうね、ということだけ覚えていて下さい。

参考:brタグに閉じスラッシュは必要か?

■リンクタグ
<a href="ここにリンク先URLを書きます">ここにリンク文字列が入ります</a>

リンクタグの「a」は「Anchor」の頭文字から来ています。
同じページ内の別の位置へ飛ばしたり、他のサーバーのファイルへのリンクを示します。
イメージ的には、イカリで他の場所への基点をつくっているようなイメージでしょうか。イカリの鎖でページがつながっていきます。

■画像タグ
<img src="画像のURL" alt="画像の説明">
<img src="画像のURL" alt="画像の説明" />

画像を貼り付けるタグです。これも、閉じタグがないタグとなりますので、<br>タグと同様ラストにスラッシュのあるバージョンがあります。

画像を「貼り付ける」とよく表現されるんですが、HTMLのしくみ的には「外部ファイルを読み込む」ということをやっているだけなので、HTML内に埋め込むイメージではちょっとズレがあるように思います。
見た目には、貼ったように見えるんですけど・・。

画像タグを使う際には、別途画像ファイルを作ってサーバーに置いておく必要があります。この1行に対して、画像ファイルが「セット」であると覚えておきましょう。

HTML構文という「枠」

とりあえず、ここまでで簡単なHTML文章を作ることが出来ます。メモ帳などに書いて、拡張子を「.html」にして保存し、ブラウザで開いたら装飾されます。
ただ、これだけではいろいろと乱暴なので、HTMLでは、「この文章はHTMLですよー」ということを明示する「枠」があります。


<html>
<head>

<title>ここにページのタイトルが入ります</title>

</head>
<body>

ここにhtml文章を入れていきます。

</body>

</html>

HTMLのバージョンを書いたり、文字コードや言語を設定したりと、実際はいろいろありますが、一番シンプルなのはこれです。
見ていただいたらわかるように、外枠さえ、挟んでます。HTMLは挟む言語ですねー。

一番大きな枠を<html>で挟みます。

<head>タグには、ページのタイトルタグ(検索結果や、ブラウザのタブなどに表示されるもの)や、他に参照するCSSファイルや、jsファイルなどを入れる「メタ情報」エリアです。メタってよくわからないかもですが、実際のHTML文章に直接表示されない、「情報をいれておくところ」と考えてみてください。

<body>に、今回説明したようなタグを入れていきます。実際にブラウザで表示されるエリアです。

実践してみましょう

本当にこれだけで装飾できるのか、確認してみましょう。
使うのは、今回説明したタグだけです。本当に空間が空くでしょうか・・?

→実践してみたのがこちらです。

そっけないですが、読めますね。これが、HTMLの基本です。
ここに、もっと装飾をつけたり、読みやすくしたり、デザインっぽくしていくのがスタイルシートだったり、jsだったりするわけです。


厳密には、そういう解釈じゃない等いろいろあるとおもいますが、全体的に強引に説明してみました。

ここが基本で、基本は簡単なんですけど
デザイン性を求めるといろいろとテクニックが必要になっていきます。挟むだけは挟むだけなんですが、複合技になっていく感じです。あと、ブラウザごとの解釈の違いも必要になっていきます。
興味がある人は、いろいろ調べてみてください。

HTMLを勉強する上で便利なのは、
ウェブ上なら、「HTMLクイックリファレンス」を見たり、
書籍ならHTML辞典をさがして読みやすそうなのを1冊買うとよいです。
よく使うタグを覚えて、あとは、「こういうことができる」っていうのだけ覚えておいてあとで検索ー。みたいなのが効率いいのかもです。

ご参考にどうぞ。
関連記事

Comments: 0

Comment Form
サイト管理者にのみ通知する

Trackback+Pingback: 0

TrackBack URL for this entry
http://vanidesign.blog.fc2.com/tb.php/124-fe50c288
Listed below are links to weblogs that reference
きっと初心者でもわかる、HTMLの書き方の考え方。 from バニデザノート

Home > ウェブ > きっと初心者でもわかる、HTMLの書き方の考え方。

Sponsored Link
▲WordPress初心者向けに、ばにが書きおろしたオンライン授業です。上記バナーから受講いただくと、33%OFF!
ホームページ・ウェブサイトデザイン・制作ならバニレートデザイン事務所まで。Wordpress(ワードプレス)、カラーミーショップのカスタマイズから、レスポンシブ、Retina対応、スマホ用サイトもできます♪デザインカンプのみの納品や、バナーのみの納品などでも受付いたします!お気軽にご相談くださいませ。
Books - 寄稿させていただいた本たち
WordPressデザイン 仕事のネタ帳 見た目と効果を向上させるプロのテクニック
WordPressを利用して、趣味〜お仕事が可能なレベルの実践的な内容になっています。 ブログ風、Pinterest風、CMSとしてWordPressを利用する方法の3つをメインに、さらにこれらを拡張していきやすいような考え方や、きっかけを掴んでいただければという想いで書かせていただきました。担当Chapter:9chapter (メイン3、サブ6。110ページ前後ぐらい。)
【Amazon.co.jp限定】神速Photoshop [Webデザイン編] CC対応 特製PSショートカットステッカー for Mac 付
Photoshopの作業をすばやく行って、デザイン自身に集中できるように。基本動作であっても、考え方としてどのように持っていくか、ということをテーマに書かせていただきました。(担当:本編の全体89のテクニックのうち、23ぐらいのテクニックと、特典PDFの中にもいくつか。)
レスポンシブWebデザインテクニックブック プロが教えるマルチデバイス対応の手法
「レスポンシブWebデザインテクニックブック プロが教えるマルチデバイス対応の手法」にてCase Studyの1つを寄稿させていただきました!
Popular Posts
Recent Entry
Category
about:vanillate
vanillate

author: vanillate(バニレート)

フリーランスのウェブクリエイター。
wordpressやカラーミーショップのデザインなど、シンプルで可愛いサイトを作っています。






Link
Recommend
レンタルサーバー 【ヘテムル】 なら、 独自ドメイン【無制限】、データベース【50 個まで】を追加費用無料で設定できます。 しかも、サーバー容量は余裕の 42.195GB! 1 つの契約でたくさんのサイトを運営したい方にぴったりのサービスです。
★【カラーミーショップ】なら本当に安心!★
かわいいテンプレートが続々登場するから、初心者のあなたにも安心!
オンラインショップ・ショップブログ・モバイルショップなど、こんなに揃って月額875円~!
有名ショップ様にも多数ご利用をいただいているから、どんどん参考にしちゃおう!
Design Items
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。