特集

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日(水) 締め切り

気になるWebの流行!~HTML5とCSS3って何が違うの?~

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

HTML5とCSS3って今までと何が違うの?

新人デザイナー 佐藤(以下、佐藤)HTML5って最近よく聞きますけど、今までと何が変わるんですか?

ディレクター 田中(以下、田中):新しい要素や属性が追加されたんだよ。

佐藤:もう一度HTMLを勉強し直さないといけないんでしょうか?

田中:基本的なマークアップは今までと変わらないよ。

ヘッダには<header>というような、これまでは主に<div>にIDを指定していたものが追加されているんだ。

佐藤:その要素が増えると何が違うんでしょう?今まで通りでも同じじゃないんですか?

田中:コンピューターがそのページ内でどこがメニューで、どこが本文なのか、文章の意味をより正確に読み取れるようになるんだよ。HTMLの書き方もシンプルになって書きやすくなるしね。

佐藤:コンピューターが正確に情報を読み取ると何か利点があるんですか?

田中:例えば、検索エンジンにサイトの構造が正しく伝わって、情報の重要度や内容を正しく判断してくれるようになる。

佐藤:なるほど、重要な内容が検索結果に拾われやすくなるんですね!

田中:あとは新しく追加された要素で、画像を配置するのに近い感覚で簡単に動画や音声データを埋め込めるようになったんだ。これでiPhoneやiPadなどのFlashが表示出来ない端末でも動画を見る事が出来るね。

佐藤:要素が追加されただけなんでしょうか?

田中:今まであまり使われていなかった要素や、<center>や<frame>みたいな”見栄え”を整えるだけの要素は廃止される。HTMLはよりシンプルに記述して、見栄えはCSSで整えるようになるね。

佐藤:CSSと言えば、CSS3って言葉もよく聞きますね。CSSの新しいバーションが出るってことですか?

田中:そうだね、CSS3も新しく指定できる要素が追加されるんだ。

佐藤:今までのCSSは使えなくなってしまうんですか?

田中:追加されただけなので、もちろん今まで通りのCSSも使えるよ。

佐藤:具体的にはどんなことが出来るようになったんですか?

田中:角丸やグラデーションみたいな、これまで画像を使って表現してきた事がCSSで指定出来るんだ。アニメーションを作る事も出来るんだよ。

佐藤:HTMLとCSSのみで、より多くの表現が出来るようになったんですね。

まとめ

HTML5は、ページの内容をより厳格にマークアップでき、シンプルな記述が出来るようになりました。
これまで特別なプラグインや技術を必要とした事が、HTML5,CSS3で簡単に行なえるようになりました。

さらに詳しく!HTML5で変わった事
新しい要素や属性が追加されて、より明確に文書構造を示すことができる。
ヘッダを示す<header>、フッタを示す<footer>、ナビゲーションであることを示す<nav>などの属性が追加されます。
動画や音声データをHTMLから埋め込む事ができる
<video>、<audio>などの要素を使い、動画や音声データを簡単に扱う事が出来るようになります。
記述例
<audio src=”sample.ogg” controls></audio>
表示例(Google Chromeの場合)
audioの表示例
※インターフェースはブラウザに依存します。
フォームの入力補助やチェック機能が追加された
これまではJavaScriptを使用して作成していたフォームの入力補助や、エラーチェックが新たに指定出来るようになります。
表示例(Google Chromeの場合)
フォームの入力補助の例
※インターフェースはブラウザに依存します。
HTML4以前の要素や属性のいくつかが廃止される
<center>、<font>、<s>などの主に見栄えを整えるものが廃止されます。HTMLはよりシンプルに、見た目はCSSで整えるという書き方になります。
さらに詳しく!CSS3で出来るようになった事
CSSで表現出来る幅が大きく広がった。
角丸やグラデーション、影といった、これまで画像を使って表現してきたものがCSSで実装可能になります。
表示例
CSS3で作るボタンの表示例
アニメーションが作れるようになった。
これまでCSSでアニメーションが作れるようになり、これでまでJavaScriptなどを使用していたスライドショーやアコーディオンがCSSで実装可能になります
box系プロパティでレイアウトが簡単になった。
display: box; を使えば、指定された要素の中のブロック要素を横並びにして高さを揃えることができるなど、カラムレイアウトが簡単になります。
記事担当者のコメント
特別な技術やプラグインが必要だった動画や音声データを手軽に扱えるようになったり、画像を使わずに細かな装飾が可能になったHTML5とCSS3。
現在はまだ対応ブラウザが限られていますので、PCサイトでの使用には注意が必要です。
スマートフォンに搭載されているブラウザはHTML5とCSS3が使用出来ますので、積極的に使っていきたいですね。