人間が使う自然言語も、多くの種類があります。英語、ドイツ語、フランス語・・・。機械語にも種類があるんです。HTMLもその中の一つです。例えば、日本語にあって、英語には無い表現があります。これは環境によるものだと思います（多分）。
機械語も同じなんですね。得て、不得手もありますし、環境によって使い分けないといけません。
- 2012年04月05日
- 今更聞けないWebのギモン！！～DOCTYPE宣言文って何？～
Webページを作成する際に最初に記述する「DOCTYPE宣言文」。
何のためにあるものなのか、理解できていますか？
- 2012年07月17日
- 気になるWebの動向！～HTML5とCSS3って何が違うの？～
最近よく耳にするHTML5とCSS3は今までのHTMLやCSSと何が違うの？
新たに勉強し直さなければいけないの？
- 2012年07月17日
- 既存サイトから学ぶWebデザインのコツ ～グローバルナビゲーション～
ユーザがストレスを感じることなく、目的のページにたどり着く為には、どのような事に注意すべきでしょうか。
- 2012年09月11日
- レイアウトの基本1 ～「整列」～
今回は、Webページをデザインする際に気をつけなければならないレイアウトの基本、「整列」についてご紹介します。
- 2013年02月12日
- 知っておきたい！基本のショートカット ～Photoshop編～
今回はよく使うと思われるショートカットをまとめてみました。 普段何気なく使っている人も、まだ知らない便利なショートカットがあるかも？
- 2013年03月08日
- レイアウトの基本 2 ~繰り返し~
レイアウトの基本1 ～整列～ に引き続き、第2弾！Webだけでなく、デザインする際の基本である「繰り返し」についてご紹介いたします。
- 2013年07月05日
- レイアウトの基本 3～「近接」～
レイアウトの基本 第３弾！今回は「近接」についてです。近接とは簡単に言うと、近づける事。これをちょっと気にするだけで直感的にわかりやすいデザインになります。
- 2013年07月12日
- レイアウトの基本4 ～「関係性」～
関係している物は近づける。関係していない物は遠ざける。
今回は、前回の「近接」の補足になる「関係性」について紹介します。
- 2013年07月12日
- 夏向けイラスト素材
デジナーレカフェからの御中元！
夏向けのイラストやアイコンの素材を無料でプレゼント。
- 2013年07月19日
- レイアウトの基本 5 ～白黒配置で目的を明確にする～
レイアウトの基本５は「白黒配置で目的を明確にする」です。
今回は、伝える目的を明確にするレイアウトの方法について、説明したいと思います。
- 2013年08月02日
- 今更聞けないWebのギモン!! ～そもそもHTMLって何？～
言葉は知っていても、何をするのか？何が出来るのか？正体は何？と言う人のために、今回は実はとっても身近なHTMLについて、出来るだけわかりやすい解説で説明したいと思います。
- 2013年08月07日
- 暑中見舞いを作ろう！ イラレで作る暑中見舞いレシピ
イラストレータで作るポストカード。
今回は暑中見舞いを作って、皆に送ってしまおうという企画です。
パソコンを使って、インターネットを見ている人は、耳にした事があるかも知れません。言葉は知っていても、何をするのか？何が出来るのか？正体は何？と言う人も少なくないと思います。
今回は、実はとっても身近なHTMLについて、出来るだけわかりやすい解説で説明したいと思います。ちょっと前置きが長いかも知れませんが。
自然に生まれた言葉と機械語
HTMLから少し話はそれますが、人と人が会話する際に用いられる言語、これを自然言語と言います。自然に発生したからだと思います。
コンピュータ同士が会話する為にも、言語が必要でこれを「機械語」と言います。機械語って、聞いただけで拒絶しちゃいそうですが。
人間とコンピュータが会話する場合にも、機械語を使わなければなりません。機械が人間の言葉を分かれば一番ですが、いまいち理解が低いんですね。
（最近は、音声認識とかありますけど）
（最近は、音声認識とかありますけど）
会話と書きましたが、「命令」ですね。これをしなさい、あれをしてください、と言った事をコンピュータに伝えるのです。それが機械語です。
HTMLも機械語
一言で言ってしまうと、HTMLも機械語です。
使う環境も定められていますし、なんと言っても言語ですから「相手が理解していないと伝わらない」わけです。ボディーランゲージできませんし、絶妙なニュアンスもわかりません。決められたルールで伝える必要があります。
使う環境も定められていますし、なんと言っても言語ですから「相手が理解していないと伝わらない」わけです。ボディーランゲージできませんし、絶妙なニュアンスもわかりません。決められたルールで伝える必要があります。
HTMLを使う環境
いよいよ、核心のHTMLを使う環境ですが、今、読まれているこのブラウザがその環境なのです。
ブラウザに命令を送る場合、HTMLと言う言語を使う事が義務づけられています。
ブラウザに命令を送る場合、HTMLと言う言語を使う事が義務づけられています。
ブラウザはHTMLを言葉として受け取り、「文法があっていれば受け付ける」のです。
間違っていると、スルーされます。日本語で書きたいところですが、英語の略語が使われています。
間違っていると、スルーされます。日本語で書きたいところですが、英語の略語が使われています。
英語の略語で書いていく、と言うと「凄く大変そう」だと思われるかも知れませんが、実はウェブサイトを作る際には、ほとんど同じHTMLを繰り返して使います。
ウェブサイトは、画像、文字、表くらいでしょうか。最近は動画をおいたりもしますね。
画像を置くと言うのは下記のように書きます。
ウェブサイトは、画像、文字、表くらいでしょうか。最近は動画をおいたりもしますね。
画像を置くと言うのは下記のように書きます。
<img src=“img.jpg” />
短いですね。
このHTMLを書いた場所に、画像が読み込まれます。
img src とか書いてありますが、重要なのはその先。「img.jpg」という画像のファイル名しか書かれていません。これだけです。簡単そうじゃありませんか？
このHTMLを書いた場所に、画像が読み込まれます。
img src とか書いてありますが、重要なのはその先。「img.jpg」という画像のファイル名しか書かれていません。これだけです。簡単そうじゃありませんか？
次に文字を書いてみます。
<p>おはようございます。</p>
日本語以外にはPしか書かれていません。
簡単だと思いませんか？
PはParagraph（段落）の略です。ここは一つの段落ですよ、とHTMLで書いています。ブラウザは「なるほど、ここは文章だな」と思ってくれます。
pの前後に＜と＞がついていますね。これをタグといいます。
簡単だと思いませんか？
PはParagraph（段落）の略です。ここは一つの段落ですよ、とHTMLで書いています。ブラウザは「なるほど、ここは文章だな」と思ってくれます。
pの前後に＜と＞がついていますね。これをタグといいます。
Tシャツにもついてるタグ
文章を書きたい場合、段落を意味するpを使いました。
その前後にあるしょうなり「＜」、だいなり「＞」ですが、これに挟まれる単語を「タグ」と言います。
その前後にあるしょうなり「＜」、だいなり「＞」ですが、これに挟まれる単語を「タグ」と言います。
洋服についている、タグと同じです。
付け札・付箋と言った意味があるようです。
HTMLでは、このタグを「意味をつける」ために使います。
段落であればpです
付け札・付箋と言った意味があるようです。
HTMLでは、このタグを「意味をつける」ために使います。
段落であればpです
これらを組み合わせて、HTMLは成り立っています。
まとめると下記のようになります。
まとめると下記のようになります。
- ・コンピュータに命令する機械語
- ・命令には、画像を表示や、文章を表示などがある。
- ・タグで意味づけしている。
HTMLをコンピュータが理解するには
人間が話す言葉、自然言語も相手がそれを理解していないと成り立ちません。
英語が理解出来ない人に、幾ら英語で話しかけてもちんぷんかんぷんです。
HTMLも同じで、HTMLを理解しているコンピュータで無いと、分かって貰えません。
使える場所としては、メールやブラウザです。ブラウザはインターネットをするのに必要ですね。だから、HTMLはネットでは大活躍と言うか、なければほとんどの場合が見られません。
ウェブを作る上で、最も基本的な言語なので、最初に覚えるには簡単な内容です。
英語が理解出来ない人に、幾ら英語で話しかけてもちんぷんかんぷんです。
HTMLも同じで、HTMLを理解しているコンピュータで無いと、分かって貰えません。
使える場所としては、メールやブラウザです。ブラウザはインターネットをするのに必要ですね。だから、HTMLはネットでは大活躍と言うか、なければほとんどの場合が見られません。
ウェブを作る上で、最も基本的な言語なので、最初に覚えるには簡単な内容です。
記事担当者のコメント
HTMLっていう響きだけで、なんだか難しそう…って思ってしまいますが、基本の構造はシンプルです。デザインばかりで、HTMLは触ったことがないという方もコーディングにチャレンジしてみてはいかがでしょうか？[ コメント・デザイン担当：白川 ]