特集

Webデザインやhtml制作に関連する事、最近話題になっているサイトなどをピックアップし、お届けします。

Back Number

今更聞けないWebのギモン!!~DOCTYPE宣言文って何?~

2012年04月05日
今更聞けないWebのギモン!!~DOCTYPE宣言文って何?~

Webページを作成する際に最初に記述する「DOCTYPE宣言文」。
何のためにあるものなのか、理解できていますか?

07

2012年07月17日
気になるWebの動向!~HTML5とCSS3って何が違うの?~

最近よく耳にするHTML5とCSS3は今までのHTMLやCSSと何が違うの?
新たに勉強し直さなければいけないの?

06

2012年07月17日
既存サイトから学ぶWebデザインのコツ ~グローバルナビゲーション~

ユーザがストレスを感じることなく、目的のページにたどり着く為には、どのような事に注意すべきでしょうか。

index_img

2012年09月11日
レイアウトの基本1 ~「整列」~

今回は、Webページをデザインする際に気をつけなければならないレイアウトの基本、「整列」についてご紹介します。

知っておきたい!基本のショートカット ~Photoshop編~

2013年02月12日
知っておきたい!基本のショートカット ~Photoshop編~

今回はよく使うと思われるショートカットをまとめてみました。 普段何気なく使っている人も、まだ知らない便利なショートカットがあるかも?

レイアウトの基本2~繰り返し~

2013年03月08日
レイアウトの基本 2 ~繰り返し~

レイアウトの基本1 ~整列~ に引き続き、第2弾!Webだけでなく、デザインする際の基本である「繰り返し」についてご紹介いたします。

レイアウトの基本3 近接

2013年07月05日
レイアウトの基本 3~「近接」~

レイアウトの基本 第3弾!今回は「近接」についてです。近接とは簡単に言うと、近づける事。これをちょっと気にするだけで直感的にわかりやすいデザインになります。

index_img

2013年07月12日
レイアウトの基本4 ~「関係性」~

関係している物は近づける。関係していない物は遠ざける。
今回は、前回の「近接」の補足になる「関係性」について紹介します。

index

2013年07月12日
夏向けイラスト素材

デジナーレカフェからの御中元!
夏向けのイラストやアイコンの素材を無料でプレゼント。

index_img

2013年07月19日
レイアウトの基本 5 ~白黒配置で目的を明確にする~

レイアウトの基本5は「白黒配置で目的を明確にする」です。
今回は、伝える目的を明確にするレイアウトの方法について、説明したいと思います。

index_img

2013年08月02日
今更聞けないWebのギモン!! ~そもそもHTMLって何?~

言葉は知っていても、何をするのか?何が出来るのか?正体は何?と言う人のために、今回は実はとっても身近なHTMLについて、出来るだけわかりやすい解説で説明したいと思います。

index_img

2013年08月07日
暑中見舞いを作ろう! イラレで作る暑中見舞いレシピ

イラストレータで作るポストカード。
今回は暑中見舞いを作って、皆に送ってしまおうという企画です。

特集一覧ページを見る

Special 特集

catch_balloon

2018年11月13日
【フリー素材】手書きふきだし素材スペシャル Ver.1

今回は3種類の手書きのふきだしです。シンプルで幅広く使えるので、制作物のちょっとしたアクセントにどうぞ。ふきだしの手書き…

Interview インタビュー

index

2014年10月15日
イラストレーターを目指し活動中!~後編~

※今回は少し趣旨を変えて、織田さんのイラストをページにちりばめました。 学校で広告を学び、色々やってみたくなった。 ─ …

Seminar セミナー

短時間で学ぶInDesign初心者講座
2018年11月20日(火) 16:00-18:30

デザイン

InDesign

Technic テクニック

catch_file_034

2018年11月06日
Photoshopブラシを使った簡単な雲の描き方

写真やイラストに雲を描き足したいけど、どうやって描くのか分からない… そんなお悩みに答えます! Step1 雲を描く下準…

Books オススメ書籍

レイアウト、基本の「き」

2018年08月28日
レイアウト、基本の「き」
  • デザイン

デザイン初心者向けのレイアウトの本 初歩的なレイアウトの基礎を 理論的なしっかりとした説明を元に、豊富な図案で説明 全部…

Award アワード

「海の日」ポスターコンクール
2018年12月5日(水) 締め切り

main

パソコンを使って、インターネットを見ている人は、耳にした事があるかも知れません。言葉は知っていても、何をするのか?何が出来るのか?正体は何?と言う人も少なくないと思います。
今回は、実はとっても身近なHTMLについて、出来るだけわかりやすい解説で説明したいと思います。ちょっと前置きが長いかも知れませんが。

自然に生まれた言葉と機械語

HTMLから少し話はそれますが、人と人が会話する際に用いられる言語、これを自然言語と言います。自然に発生したからだと思います。
コンピュータ同士が会話する為にも、言語が必要でこれを「機械語」と言います。機械語って、聞いただけで拒絶しちゃいそうですが。
人間とコンピュータが会話する場合にも、機械語を使わなければなりません。機械が人間の言葉を分かれば一番ですが、いまいち理解が低いんですね。
(最近は、音声認識とかありますけど)
会話と書きましたが、「命令」ですね。これをしなさい、あれをしてください、と言った事をコンピュータに伝えるのです。それが機械語です。
kikaigo

HTMLも機械語

人間が使う自然言語も、多くの種類があります。英語、ドイツ語、フランス語・・・。機械語にも種類があるんです。HTMLもその中の一つです。例えば、日本語にあって、英語には無い表現があります。これは環境によるものだと思います(多分)。
機械語も同じなんですね。得て、不得手もありますし、環境によって使い分けないといけません。
html
一言で言ってしまうと、HTMLも機械語です。
使う環境も定められていますし、なんと言っても言語ですから「相手が理解していないと伝わらない」わけです。ボディーランゲージできませんし、絶妙なニュアンスもわかりません。決められたルールで伝える必要があります。

HTMLを使う環境

いよいよ、核心のHTMLを使う環境ですが、今、読まれているこのブラウザがその環境なのです。
ブラウザに命令を送る場合、HTMLと言う言語を使う事が義務づけられています。
ブラウザはHTMLを言葉として受け取り、「文法があっていれば受け付ける」のです。
間違っていると、スルーされます。日本語で書きたいところですが、英語の略語が使われています。
kankyo
英語の略語で書いていく、と言うと「凄く大変そう」だと思われるかも知れませんが、実はウェブサイトを作る際には、ほとんど同じHTMLを繰り返して使います。
ウェブサイトは、画像、文字、表くらいでしょうか。最近は動画をおいたりもしますね。
画像を置くと言うのは下記のように書きます。

<img src=“img.jpg” />

短いですね。
このHTMLを書いた場所に、画像が読み込まれます。
img src とか書いてありますが、重要なのはその先。「img.jpg」という画像のファイル名しか書かれていません。これだけです。簡単そうじゃありませんか?
次に文字を書いてみます。

<p>おはようございます。</p>

日本語以外にはPしか書かれていません。
簡単だと思いませんか?
PはParagraph(段落)の略です。ここは一つの段落ですよ、とHTMLで書いています。ブラウザは「なるほど、ここは文章だな」と思ってくれます。
pの前後に<と>がついていますね。これをタグといいます。

Tシャツにもついてるタグ

文章を書きたい場合、段落を意味するpを使いました。
その前後にあるしょうなり「<」、だいなり「>」ですが、これに挟まれる単語を「タグ」と言います。
tag
洋服についている、タグと同じです。
付け札・付箋と言った意味があるようです。
HTMLでは、このタグを「意味をつける」ために使います。
段落であればpです
これらを組み合わせて、HTMLは成り立っています。
まとめると下記のようになります。
  • ・コンピュータに命令する機械語
  • ・命令には、画像を表示や、文章を表示などがある。
  • ・タグで意味づけしている。

HTMLをコンピュータが理解するには

人間が話す言葉、自然言語も相手がそれを理解していないと成り立ちません。
英語が理解出来ない人に、幾ら英語で話しかけてもちんぷんかんぷんです。
HTMLも同じで、HTMLを理解しているコンピュータで無いと、分かって貰えません。
使える場所としては、メールやブラウザです。ブラウザはインターネットをするのに必要ですね。だから、HTMLはネットでは大活躍と言うか、なければほとんどの場合が見られません。
ウェブを作る上で、最も基本的な言語なので、最初に覚えるには簡単な内容です。
記事担当者のコメント
HTMLっていう響きだけで、なんだか難しそう…って思ってしまいますが、基本の構造はシンプルです。デザインばかりで、HTMLは触ったことがないという方もコーディングにチャレンジしてみてはいかがでしょうか?
[ コメント・デザイン担当:白川 ]