yoppa.org


多摩美 - メディアリテラシー 2010

HTML5+CSS3 入門


Webを記述する言語の標準の現状

昨年度であれば、HTMLを記述する授業では自信をもって以下の基準を推薦していました。

  • HTML (文書の構造を記述する言語) – XHTML 1.0 もしくは XHTML 1.1
  • CSS (文書の体裁・デザインを指定する言語) – CSS 2

しかしながら、ここ数年で、とくに去年あたりから状況は大きく変動しつつあります。現状の変化を理解するには、ここに至るまでの歴史的な経緯について簡単に理解する必要があります。ここまでの経緯を整理した上で、将来の展望を探りたいと思います。その上で、この授業ではどのような基準にのっとって「正しい」ということを定義するのか決めていきたいと考えます。

HTML (Webサイトの記述言語) の標準化巡る闘争の歴史

HTML年表AppleInsider: なぜ Apple は HTML 5 に賭けているのか: ウェブの歴史 [Page 2] より

HTMLを巡る標準化の動きは、様々な組織や企業が、それぞれの思惑を抱えながら覇権争いをくりひろげた闘争の歴史でもあります。Webブラウザの開発者、ソフトウェアメーカー、MicrosoftやAppleなどのOSの開発会社、標準化団体などが、それぞれの立場で標準を主張してきました。その結果、HTMLのバージョンの歴史はとても複雑怪奇なものとなっています。

長年にわたる闘争の末、数年前にようやくHTMLの標準は落ちつくかと思われました(XHTML + CSS)。しかしながら、現実は予想に反してXHTML 1.0という当初の規格は思うように普及せず、その後継として計画されてたXHTML 2の標準化も途中で頓挫してしまい、最終的に標準化のためのワーキンググループは解散するという事態になってしまいました。

そのため、標準化を巡る流れはおおきく方向転換を余技なくされ、そこでいままでの標準化団体とは別にブラウザのベンター(Apple, Mozilla, Opera, Google) 達が新たな標準化を押しすすめるようになり、その結果XHTML 2.0に代わるものとして提案された規格が、HTML 5 です。

現在 HTML 5 は2012年の勧告(一般に向けて仕様を公開する)に向けて、標準化の仕様策定の作業が続けられています。その機能は徐々に現状のブラウザにも反映され、一部の機能は既に様々な分野で仕様され始めています。しかしながら、現状ではまだブラウザによってその進度は大きな差があります。現状での HTML 5 の進行状況は、◎Chrome、◎Safari、○Firefox、○Opera、△IE8、(× IE6) といったところです。

HTML 5 とは何なのか?

では、HTML 5とは何なのでしょうか。その機能は多岐にわたります。下記の資料がその全貌をわかりやすく解説しているので、参考にしてみましょう。

HTML 5 の特徴を要約すると、だいたい以下のような感じになるでしょう。

  • Webアプリケーションを実現するための、機能の拡張
  • HTMLに、新しい要素や属性の導入
  • ローカルの記憶領域、DBとの連携強化
  • UIの向上 (ドラッグ&ドロップ、FORMの拡張)
  • 地図情報
  • オーディオ、ビデオの取り扱い
  • キャンバス (図形の描画)
  • CSS (文書の要素のデザイン機能) の大幅な拡張

これらの機能の追加により、今まではHTML文書単体では不可能であった様々なリッチなユーザ体験が可能となることでしょう。

HTML 5 になると、古い記述(XHTML 1.0)が使えなくなるわけではない

では、HTML 5 を導入すると、以前仕様していた古い記述方法を仕様することはできなくなるのでしょうか。実は、そのようなことはありません。HTML 5 はいままで普及していた書式、HTML 4.xや、XHTML 1.0 の書式を包括するより広い範囲での記述の仕様となります。いままでの古い記述の方法もまた、HTML 5 に含まれているというイメージです。下記のマンガがこの概念をわかりやすく解説しています。

今学期のイメージリテラシーでのHTMLの方針

以上の点を踏まえて、この授業では以下のような基準で「正しい」HTMLというものを決定していきます。

  • 基本的な文法は、現状普及している XHTML 1 に準拠する。
  • ただし、現在でも使用可能な機能に関しては、積極的に HTML 5 と CSS 3 に関するトピックスも扱っていく

現在のWebブラウザに配慮しつつ、将来を見据えた標準についても同時に学んでいこうというのが、この授業での基準となります。

HTML 5 の新要素、文書の構造を示すための要素を使用する

HTML 5 の導入として、HTML 5 から導入された数多くの新機能の中から、HTML 5 から加わったページ全体の構造をマークアップする新要素を使用してみましょう。

これまでのHTMLでは、ヘッダーやフッター、サイドメニューなどのページ全体のアウトラインを画面上で実現しようとした場合、古くはtable要素、CSS2によってある程度レイアウトができるようになると、div要素にidやclass属性としてheaderやfooterなどと命名してマークアップしていました。これらはページの中で全く違う役割を果たしているにもかかわらず、全て同じdiv (tableの場合は、trやtd) 要素でマークアップしています。HTML 5 以前にはこれ以外に方法がなかったためです。

しかし、HTTML 5 からは、最初からページ内での役割を明示した、論理区域を区別するための新要素が導入されました。ヘッダーやフッター、記事など文書を意味によって区分していく際に、tableやdivで区分するのではなく、意味に応じて新規の構造化要素の使用が奨励されています。またページ制作者にとっても新しい構造化要素を使用することで、非常にシンプルにページ全体のアウトラインを行うことができるようになり、とても便利になりました。

実際に新要素を使用しながら、HTML 5 の利便性を体感してみましょう。

ページ全体の構成

要素の理解のために、今回は典型的なヘッダーとフッターをもった2コラムのレイアウトを想定してページを作成します。ヘッダーとフッターに挟まれた左側のコラムにはナビゲーションのメニューが、右側にはメインのコンテンツが入り、メインのコンテンツの中には複数の記事が格納されるものとします。このページの構造を簡単に図示すると下記のようになります。

この構造を今までのXHTML 1 + CSS2 によってレイアウトしようとした場合、div要素で範囲を分割し、それぞれのdiv要素の中身にclass属性もしくはid属性をつけることでCSSから参照する方法が一般的でしょう。図にすると下記のようなイメージです。

しかし、div要素は複数の要素をまとめて、ページを分割するという意味はあるものの、それ事態に「ヘッダー」や「フッター」「サイドバー」といったレイアウトに相当する意味は本来付与されていません。また、実際にCSS2でブラウザ上で崩れないようにレイアウトするには、さらに複数のdiv要素を包括するためのdiv要素が必要になることもあり、気付くとdiv要素が幾重にも入れ子上に複雑に配置されていることも少なくありません。

そうした問題を解決するのが HTML 5 から導入された構造化のための新要素になります。

HTML 5 から導入された構造化要素

HTML 5 から導入されたページの構造を指定する要素には下記のものがあります。

  • section: 本の一部あるいは章、章のセクション、あるいは基本的に HTML 4 で独自の見出しを持つすべてのもの。
  • header: ページに表示されるページ・ヘッダー。head 要素と同じではありません。
  • footer: 細かい文字での説明が入るページ・フッター。Email・メッセージの署名。
  • nav: 他のページへのリンクの集まり。
  • article: ブログや Web マガジン、一覧記事などに掲載されている個々のエントリー。

これらの要素を利用して、先程のレイアウトを整理すると下記のようになります。

HTML 5 ではこれらの名称をdiv要素などの属性としてではなく、要素名として使用可能となります。このことは、HTMLページ自体にレイアウト構造の意味を指定しているという点で重要です。それぞれのサイトで独自に命名されたクラス名やid名ではなく、標準化された要素名としてそのセクションの役割を類推できるということは、様々なメディアや検索エンジンなどからページを参照する際に重要な役割を果たします。

※ ただし、ページのコンテンツを区切るためにsection要素を使用すべきかどうかという部分には、議論があります。詳しくは、「section 要素 – html5doctor – HTML5.JP」の記事を参照してください。

実際に HTML 5 の構造化要素を試してみる

では早速 HTML 5 の構造化要素を試してみましょう。サンプルとして以下の簡単なHTMLファイルで試してみることにしましょう。サンプルとして下記のようなシンプルなHTMLファイルを用意しました。

このHTMLファイルの意味構造を整理すると以下のようにまとめられるでしょう。

  • ヘッダー
    • 大見出し h1
    • 中見出し h2
    • ヘッダーメニュー ul, li
  • セクション
    • 記事
      • 大見出し h1
      • 段落 p
      • 中見出し h2
      • 段落 p
    • 記事
      • 大見出し h1
      • 段落 p
  • ナビゲーション
    • 大見出し h1
    • ナビゲーションメニュー ul, li
  • フッター
    • 段落

このHTMLに先程学んだ構造化要素を意味の構造に準拠してマークアップしてきます。使用する要素は、header, hgroup, section, article, nav, fotter になります。

しかし実際にこのHTMLファイルをブラウザから開いてみても、想定したレイアウト(ヘッダーやフッター、ナビゲーション)にはなっていません。実は、HTML 5 の構造化要素は文章の区分構造をマークアップするだけで、そのレイアウトの具体的な方法を指示しているわけではありません。この意味構造を受けて、どのようにレイアウトするのかは、いままでのHTMLと同様にスタイルシートを使用してレイアウトの方法や視覚的な効果を指定していくことになります。

ブラウザで開く

CSS3を使用してレイアウトする

まず、head要素内に外部スタイルシートへのリンクを指定します。style.cssというファイルにスタイルを書いていくこととします。

また、現状ではInternet Explorerの HTML 5 への対応状況があまり良くありません(対応していない要素がほとんど)。このサンプルでは、IE対策のために、html5shimというIEをHTML 5に対応させるためのJavascript (html5.js) を利用しています。

次にこのHTML 5のレイアウトを行うCSSを記述します。全体の幅を960pxとして、ヘッダー(header要素)とフッター(footer要素)に挟まれて、左にナビゲーション(nav要素)、右にメインのコンテンツ(section)が2コラムで並ぶようにします。

このスタイルシートを適用すると、以下のように設計した通りのレイアウトになります。

ブラウザで開く

CSS3の視覚効果を利用する

CSS3では、以前のバージョンに比べて大幅に機能が強化されました。ドロップシャドウやグラデーション、角丸などの様々な視覚効果や、フォントの読み込み、マルチコラムレイアウトなど多彩な機能が追加されています。(参考:HTML 5 Rocks Slide)

ここでは、そのいくつかの効果を利用してページの視覚効果をより詳細にデザインしています。外部画像は一切使用しなくても多彩な視覚効果を生成できることが実感できるでしょう。指定されたCSSファイル style.css を下記のように書き換えると多彩な効果が付加されます。

このスタイルシートを適用してみましょう。

ブラウザで開く

今日のまとめ

今回の授業では、HTML 5 とCSS3の導入として、構造化のための新要素を利用してHTMLに意味要素を与え、それを利用してCSS3でレイアウトやデザインを行う方法について学びました。

しかし、HTML 5 で可能となったことはより広範囲に渡ります。今回は静的なサンプルでしたが、HTML 5 とJavascriptを使用することで、グラフィックの生成や、アニメーション、地図との連携など様々な動的なページをFlashPlayerなどのプラグインを使用することなく実現することが可能となっています。次回はより動的な表現についてとりあげいきたいと思います。

サンプルファイルのダウンロード

今回の授業で使用した全てのサンプルは、下記からダウンロード可能です。

2010年 はてなブックマーク 年間ランキング トップ100をジャンル別に分けて判った事 — 23 December 2017 19:18
[…] 98.ASCII.jp:40分で覚える!jQuery速習講座 100.HTML5+CSS3 入門 | yoppa org まとめ系 1.ネットで見れるすごい企画書 – NAVER まとめ […]
【超入門編!】HTML5が今すぐ身につく学習サイト5選 — 05 October 2015 16:51
[…] https://yoppa.org/ […]
arinon — 24 December 2013 18:25
ようやくHTML5が理解出来た! ありがとうございます!
vaximo — 14 December 2013 16:49
構造的にはleftだけどheaderを見て回り込んだ結果左下に落ちたって考えると 意味的には全然あっていると思います。
HTML5入門!超速でHTML5をものにするノウハウ — 11 April 2013 08:04
[...] HTML5+CSS3 入門 [...]
これなら分かる!WEB制作を無料で「学べる」サイトまとめ | コムテブログ — 04 February 2013 08:32
[...] HTML5をもう少しだけ知りたいなら HTML5+CSS3 入門 | yoppa org [...]
セマンティックスなマークアップHTML5編(概要) | Digi-Cyber.net — 07 May 2012 21:59
[...] : Webを記述する言語の標準の現状 参考サイト : [HTML5]アウトラインで迷わない! [...]
iPadにPDFファイルをiTunesで簡単に転送する方法 | Digi-Cyber.net — 11 April 2012 22:30
[...] : Webを記述する言語の標準の現状 参考サイト : [HTML5]アウトラインで迷わない! [...]
時間が無い人のためのシーン別CSS3に関する記事のまとめ | ひよっこWebデザイナーブログ — 28 February 2012 22:49
[...] HTML5+CSS3 入門 https://yoppa.org/taumedia10/1695.html [...]
セマンティックなマークアップHTML5編(概要) - Digi-Cyber.net — 11 February 2012 21:58
[...] : Webを記述する言語の標準の現状 参考サイト : [HTML5]アウトラインで迷わない! [...]
こねこまろ — 09 December 2011 07:16
とても奇麗なデザインです。気に入りました。参考にさせていただきます。
Yukiko Ishihara — 05 September 2011 04:34
参考になりました!ありがとうございます!
gigi — 03 September 2011 10:58
navのCSSは float:right; → float:left; かな?
Yuki Seike — 30 August 2011 08:33
すごくわかりやすくとても勉強になりました。
webのメモ帳 — 17 August 2011 22:34
[...] HTML5+CSS3 入門 [...]
Kazuharu Ohbayashi — 16 August 2011 08:03
分かりやすくて良かったです。
仁 意味 — 03 July 2011 11:18
[...] HTML5+CSS3 入門 | yoppa orgージを分割するという意味はあるものの、それ事態に「ヘッダー」や「フッター」「サイドバー」といったレイアウトに相当する意味は本来付与されていません。また、実際にcss2でブラウザ上で崩れないようにレイアウトするには、さらに複数のdiv要素を包括するためのdiv要…はてなブックマークより [...]
命名 — 25 June 2011 07:27
[...] HTML5+CSS3 入門 | yoppa orgぞれのサイトで独自に命名されたクラス名やid名ではなく、標準化された要素名としてそのセクションの役割を類推できるということは、様々なメディアや検索エンジンなどからページを参照する際に重要な役割を果たします。 実際に html 5 のレイアウト要素を試してみる …はてなブックマークより LNG船「SERI BALHAF」の命名式08年12月15日飽の浦岸壁で LNG船「SERI BALHAF」の命名式が行われました。 短いので 3回繰り返しています。 音声はありません。YouTubeより [...]
ネオフリック — 22 June 2011 14:44
とてもわかりやすいです。ありがとうございます。
ぽるち — 20 June 2011 05:56
わかりやすいけど、h1を複数使用してるのは違和感。
ぽるち — 20 June 2011 05:56
わかりやすいけど、h1を複数使用してるのは違和感。
担当者A — 13 June 2011 05:43
かゆい所に手の届く説明。この授業、受けてみたいのだが。HTML5とCSS3、改めて無視できないと認識。
HTML — 01 June 2011 12:42
[...] HTML5+CSS3 入門 | yoppa org推薦していました。 html (文書の構造を記述する言語) – xhtml 1.0 もしくは xhtml 1.1 css (文書の体裁デザインを指定する言語) – css 2 しかしながら、ここ数年で、とくに去年あたりから状況は大きく変動しつつあります。現状の…はてなブックマークより [...]
反映 | 大切なことはすべて君が教えてくれた・ドラマ情報 — 31 May 2011 18:14
[...] HTML5+CSS3 入門 | yoppa orgに現状のブラウザにも反映され、一部の機能は既に様々な分野で仕様され始めています。しかしながら、現状ではまだブラウザによってその進度は大きな差があります。現状での html 5 の進行状況は、◎chrome、◎safari、○firefox、○opera、△ie…はてなブックマークより Debussy Reflets dans l’eau 水の反映 練習中 水槽Debussy Reflets dans l’eau 水の反映ただいま練習中ですので下手&ミスタッチはご容赦下さい(笑) 水槽を眺めながらお聴き下さい。YouTubeより [...]
稲垣誠 — 31 May 2011 04:04
分かりやすくとても参考になりました!
: zorozoro: HTML5+CSS3 入門 | yoppa org | MiloRiano: Computers news, tips, guides... — 31 May 2011 02:55
[...] Read more from the original source: : zorozoro: HTML5+CSS3 入門 | yoppa org [...]
CreaMo! — 31 May 2011 02:05
[入門編]超簡単にHTML5を書いてみよう... まだXHTMLで書いてあるサイトがほとんどですが、WEBデザイナーの個人的なサイトや新規コンテンツサイト等は着々とHTML5化が進んでいます。 ソースで見ないとHTML5ということは分かりませんが、HTML5+CSS3+JavaScriptの組み合わせは非常に魅力的で、わざわざ画像を用意しなくてもコードだけでビジュアル面を強化することが出来ます。 そのおかげでHTML5やCSS3はホームページ作成が流行した時期に比べると、初心者にはちょっと壁が高くなってしまいました。 ということで、まずはこれだけや...
_watercolor — 20 May 2011 15:12
 勉強になります٩(*❛◡❛)۶
じー — 18 May 2011 01:46
 勉強させていただきました
ダディー — 14 April 2011 11:29
とっても分かりやすかったです。HTML5+css3
HPのデザイン変えました - Kasumiya — 06 April 2011 14:04
[...] https://yoppa.org/taumedia10/1695.html [...]
HTML5とCSS3でWebサイトを作るときのサンプルセット(HTML5編) | bontaro.net::blog — 19 February 2011 08:24
[...] HTML5+CSS3 入門 | yoppa org [...]
HTML5入門-とりあえず5で書いてみた-|mayy — 08 February 2011 13:45
[...] ・yoppa.org|HTML5+CSS3 入門 ・しらぎくのWWW作成入門メモ|HTML 5での<section>要素と<article>要素の違い。 ・html5doctor HTML5.JP|section 要素 ・FindMeByIP|HTML5 & CSS3 Support [...]
P-mtg アーカイブ » Blog Archive » HTML5と少し仲良くなってみる — 27 January 2011 19:16
[...] →参照:yoppa.org「HTML5+CSS3 入門」 ★ちなみにGoogle先生に「html5 css3」と入れると「死にたい」という [...]
2010年 はてなブックマークランキングベスト100 をカテゴリ別に分ける | アイビースター — 11 January 2011 09:02
[...] HTML5+CSS3 入門 | yoppa org [...]
はてなブックマーク 2010年 - totofund! — 31 December 2010 05:55
[...] HTML5+CSS3 入門 | yoppa org [...]
CSS3で広がるWebサイトの表現力 | いろはにちゃんねる Blog — 22 December 2010 04:40
[...] ・HTML5とCSS3を分かりやすく紹介 [HTML5+CSS3 入門] https://yoppa.org/taumedia10/1695.html [...]
2010年 はてなブックマーク 年間ランキング トップ100をジャンル別に分けて判った事 | A!@attrip — 14 December 2010 11:11
[...] 98.ASCII.jp:40分で覚える!jQuery速習講座 100.HTML5+CSS3 入門 | yoppa org まとめ系 1.ネットで見れるすごい企画書 – NAVER まとめ [...]
最終課題「オンライン・ポートフォリオ」制作について | yoppa org — 13 December 2010 02:19
[...] HTML5+CSS3 入門 [...]
ソーシャルメディアのブランドの役割とHTML5 | WEB DREAM — 06 October 2010 09:55
[...] 良質なコンテンツを作るには?SEO対策は最終的にここにある!という記事を僕は、NET JUNKIE2に昨日更新をした。そんなあとHTML5+CSS3 入門という記事を目にした。これこそが良質なコンテンツだとも感じた。もちろん、HTML5について、興味のない人には、なんの意味もないコンテンツとなる。 [...]
続々増えるHTML5+CSS3情報サイト。10月速報版。 | ブクマ! — 05 October 2010 18:29
[...] HTML5+CSS3 入門 | yoppa org [...]
サムネイル画像からpv測定ランキングが面白い!#attrip — 04 October 2010 15:14
[...] 1. HTML5+CSS3 入門 | yoppa org TweetWebを記述する言語の標準の現状昨年度であれば、HTMLを記述する授業では自信をもって以下の基準を推薦していました。HTML (文書の構造を記述する言語) – XHTML 1.0 もしくは XHTML 1.1CSS (文書の体裁・デザインを指定する言語) – CSS 2しかしながら、ここ数年で、とくに去年あたりから状況は大きく変動しつつあります。現状の変化を理解するには、ここに至るまでの… 2. コア・JavaScript ( JavaScript. The Core. ) – oogattaの勉強日記 (絶賛推敲中!)この文章は、 Dmitry A. Soshnikov さんの、 ECMAScript に関する優れた記事 ”JavaScript. The Core.” を許可を得て翻訳したものです。世の中に、 JavaScript のブラウザ API や、実装系に関する記事は多々あれど、 ECMAScript の仕様に則って、ここまで詳しく説明してくれている記事は殆ど無いと思います。今回は翻訳で… 3. ついにNASAが認めた!地球温暖化詐欺!:ハムスター速報 – ライブドアブログ ついにNASAが認めた!地球温暖化詐欺!カテゴリ☆☆☆1:以下、名無しにかわりましてVIPがお送りします:2010/09/25(土) 03:18:30.72 ID:6fcA5WHv0 地球温暖化の原因=太陽の異常活動 NASAも認めたら 今までの温暖化原因=二酸化炭素騒ぎは詐欺決定だな エコで食ってるやつざまぁwwww ソース http://www.dailytech.com/NASA 3:以下、… 4. 金融日記:勝間和代がネットで叩かれるようになった本当の理由とネット・メディアの未来 2010年10月04日勝間和代がネットで叩かれるようになった本当の理由とネット・メディアの未来自己啓発の女王とも呼ばれたカリスマ勝間和代がAmazonのレビュー・システムについてクレームをつけていた。僕自身は勝間和代のファンでもなければ、勝間和代がいうところの「アンチ」でもない。勝間和代は外資系企業でサラリーマンをしていて、その後はネットで人気になり、一気にテレビでもブレークした。少なくとも最初の… 5. 笑顔を創りたいWeb屋の日常  中小企業や個人経営規模相手のWebディレクションで気をつけている15のこと。 笑顔を創りたいWeb屋の日常Web業界からひょんなことで専門学校の先生に。そしてまたWeb現場に戻ったWedディレクターのブログ。情報デザインやWebの勉強をしています。あくまで”僕が”です。そこ大変重要ですw 僕もまだまだ勉強中で、これが全て正しいと思えるほど見極めていません。 他にもあるだろうし、もっと大事なものもあるかもしれません。 それは各々考えてもらって(もしよろしければ教えていただいて… 6. 【賃貸】物件選び、こんなことで失敗した成功した:アルファルファモザイク ■編集元:一人暮らし板より「【賃貸】物件選び、こんなことで失敗した成功した4」 1 774号室の住人さん :2010/06/13(日) 14:16:51 ID:/9/GYtn4 いざ暮らし始めてみると、ここが不便だった、 見学の際は気づかなかった・・ここをしっかりチェックしとけばよかった! そんな点語り合いましょう。 不満があるからってまたすぐ引っ越すのはお金も手間も精神疲労もかかるので大変なので… 7. 最近リリースされた高品質なフリーのデザインフォント -2010年9月 | コリス Archive by month2010年10月 (5)2010年9月 (47)2010年8月 (59)2010年7月 (49)2010年6月 (43)2010年5月 (35)2010年4月 (48)2010年3月 (53)2010年2月 (51)2010年1月 (45)2009年12月 (65)2009年11月 (38)2009年10月 (49)2009年9月 (58)2009年8月 (35)2… 8. まったく絵が描けなくてもマンガが「ポッ!」と作れちゃう「コミPo!」登場 [特長1] キャラクターや背景を画面に並べていくだけの簡単操作! まったく絵が描けなくてもマンガが「ポッ!」と作れます。特長1 9. 【PSP】アーカイブス、これだけは落とせ!【PS3】:アルファルファモザイク ■編集元:携帯ゲーソフト板より「【PSP】アーカイブス、これだけは落とせ!【PS3】 3」 1 枯れた名無しの水平思考 :2010/09/27(月) 02:27:07 ID:dyLssPD90 ソフトウェア検索 http://search.jp.playstation.com/search?site=FIZ02WOB&group=1&design=2&charset=utf-8&query=&ps… 10. 伝えたいことを伝えるための8つのテクニック – かみんぐあうとっ 考えたこと, メモ「どうしたら、複数の人に伝えたいことを伝えられるか」そのことについて考えていること多いです。今日は、これまで考えてきたことを整理するために書いてみたいと思います。伝えたいことを伝えるための8つのテクニック1.一文をできるだけ短くしよう。2.直球ストレートな文にしよう。3.箇条書きで書いてみよう。4.順序だてよう。5.具体例をあげよう。6.専門用語に気をつけよう。7.ゆっくり話そう… 11. 「IS03」超速攻フォトレビュー、auが本気を出したシャープ製Androidスマートフォン – GIGAZINE 本日発表されたKDDIのシャープ製Androidスマートフォン「IS03」の速攻フォトレビューをお届けします。 「IS03」はiPhone 4に匹敵する960×640の3.5インチマルチタッチ液晶や960万画素カメラなどを備えたハイスペックモデルであることに加えて、ワンセグやおサイフケータイといった日本人ユーザー向けの機能も搭載した、まさに「日本人向けのハイエンド国産スマートフォン」であるのが大き… 12. VIPワイドガイド : 毛穴の黒ずみ落とす方法教えろ 毛穴の黒ずみ落とす方法教えろ カテゴリ:心・身体 | 日常・生活3 名前:豆 [] 投稿日:2010/08/08(日) 23:30:49.20 ID:6hw1ro+J 強力な掃除機で吸い出す 7 名前: ファシリティマネジャー(滋賀県) [] 投稿日:2010/08/08(日) 23:32:24.25 ID:U30eZadG セロテープ貼りつけて、剥がすといい 12 名前: 社員(北海道) [] … 13. CSS3が日本語の禁則処理、傍点、縦書きなど対応へ、ドラフト公開 - Publickey スタイルシートの新たなWeb標準として現在策定が進められているCSS3に対して、日本語に対応した禁則、傍点(圏点)、縦書き仕様などの機能が追加されたドラフトが公開されました。9月28日にPublickeyで公開した記事「電子書籍フォーマット「EPUB」で縦書きとルビのサポート、来年5月には仕様完成の見通し」では、EPUBでの縦書きやルビ、傍点などの仕様を策定中であることを紹介しましたが、EPUBは… 14. 痛いニュース(ノ∀`) : 「尖閣、渋谷2600人デモ」 CNNが報道する一方、日本のマスコミは… – ライブドアブログ 「尖閣、渋谷2600人デモ」 CNNが報道する一方、日本のマスコミは…1 名前: 韓国人(千葉県):2010/10/02(土) 20:08:21.20 ID:X/C060gb0 ?PLT China accused of invading disputed islands – CNN.com(本文略) http://edition.cnn.com/2010/WORLD/asiapcf/10/02/… 15. 尖閣衝突、証拠ビデオにうっかりポルノ上書き 尖閣諸島で起きた中国漁船衝突事件で、中国側漁船からぶつかったとされる海上保安庁撮影の証拠ビデオに、検察職員が誤って成人向けポルノビデオを一部上書き録画していたことが明らかになった。職員はこの証拠映像に自分だけが分かる変名のタイトルを書き込んでいたため、映像の内容を確認せず上書きしてしまったと言う。 検察当局が3日明らかにした。発表によると、中国側漁船が海上保安庁の巡視船に「挑発的・意図的に」衝突し… 16. ”Web廃墟”貼ってくれ:ハムスター速報 – ライブドアブログ ”Web廃墟”貼ってくれカテゴリ1:以下、名無しにかわりましてVIPがお送りします:2010/10/01(金) 19:18:16.31 ID:Dv9lK+Wd0 WEB廃墟・大体の目安 ・現段階で誰でもアクセスできる ・明確な目的やテーマをもっている ・一時期、相当の人数が関わっていた、  あるいは少数のスペシャリストが構築したものを多人数が見ていた ・最新更新日が数年前 ・終了の目安がはっきりし… 17. 実践で役立つPerl正規表現 完全解説 – サンプルコードによるPerl入門 Perlの正規表現の解説です。実践で困らないよう短時間でPerlの正規表現のテクニックを習得することを目標にしています。正規表現を使えば、文字列の集合を表現することができ、正規表現にマッチする文字列を検索したり、置換したりすることができます。 正規表現の例 正規表現を使って文字列の集合を表現できます。たとえば「a」「aa」「aaa」という三つの文字列を正規表現で表現してみましょう。連続する文字の個… 18. FeliCa、ワンセグに対応、メインで使えるAndroid携帯――auの「IS03」 – ITmedia +D モバイル ニュースFeliCa、ワンセグに対応、メインで使えるAndroid携帯――auの「IS03」auがワンセグやFeliCa、赤外線通信などを搭載したシャープ製のAndroid端末「IS03」を発表。11月下旬以降、日本市場のニーズに対応した“メインで使える1台”として発売する。Android 2.1を搭載した「IS03」KDDIは10月4日、「IS01」に続く2台目のAndroid端末「IS03」を… 19. 問題点の概要 – 「PHPで作成する携帯会員サイトの基本」の諸問題(1) – 徳丸浩の日記 ●問題点の概要 CodeZineから発表されている「PHPで作成する携帯会員サイトの基本」という記事はツッコミどころ満載で、既にいくつかの問題が修正されているのだが、まだ残っている問題があることや、修正内容にも疑問があるので、いくつか指摘してみたい。ざっと書いたところ、ものすごく長くなりそうだったので、小出しで「連載」の形で書く。忙しいので途中でやめるかもしれない。今回は、問題点の概要を報告する。… 20. 痛いニュース(ノ∀`) : 40代女性 「『金麦』CMに違和感。気楽で甘えたような妻の姿にイラつく」 – ライブドアブログ 40代女性 「『金麦』CMに違和感。気楽で甘えたような妻の姿にイラつく」1 名前:影の軍団ρ ★:2010/10/03(日) 17:54:41 ID:???0 発売から4年目を迎えた、サントリーの第三のビール『金麦』。売れ行きは相変わらず好調で、「今年は2000万ケースを目標にしています」(サントリー広報部)というが、その人気の一因として、なんといってもCMの魅力が挙げられる。作家・山下柚実氏の解… 21. タモリ式入浴法がスゴイ! お風呂に入るだけでお肌ツヤツヤ:アルファルファモザイク ■編集元:ニュース速報板より「タモリ式入浴法がスゴイ! お風呂に入るだけでお肌ツヤツヤ」 1 トリマー(千葉県) :2010/10/03(日) 20:49:48.93 ID:M9fccbIy0 ?PLT(30072) ポイント特典 タモリ式入浴法がスゴイ! お風呂に入るだけでお肌ツヤツヤ いまインターネット上で『タモリ式入浴法』が話題になっています。これはタレントのタモリさんがいつ もやっている入… 22. auから“1台目”のスマートフォン、Android搭載の「IS03」 – ケータイ Watch auから“1台目”のスマートフォン、Android搭載の「IS03」CheckKDDI、沖縄セルラーは、おサイフケータイやワンセグに対応し、“1台目”の携帯電話として利用できる機能を搭載したAndroidスマートフォン「IS03」を発表した。11月下旬以降に発売される。「IS03」は、Android 2.1に対応したシャープ製のスマートフォン。国内の一般的な携帯電話で採用されてきた、おサイフケータ… 23. かなりクールにデザインされたPhotoshop用のボタンテンプレート集:phpspot開発日誌 Best of Free Clean PSD Buttons ready for web2.0 | djavupixel.com かなりクールにデザインされたPhotoshop用のボタンテンプレート集。 CSS3でかなりボタンをデザインできるようになったとはいえ、そこまでやるなら画像にしちゃったほうが、という場面も多くあります。 Photoshop用のボタンテンプレートが色々まとまっていたのでデザ… 24. Photoshop Vip » ちょっと太めでオシャレな筆記体フリーフォント20個まとめ フォントはデザインにおいても欠かすことのできない重要なデザインパーツです。数多くのフリーフォントが公開されていますが、「筆記体」は人気の高いフォントスタイルのひとつではないでしょうか。海外デザインブログDesign Shackで、やや太めでオシャレな印象の筆記体フリーフォントを20個まとめたエントリー「20 Bold Free Script Fonts That You Don’t Have to… [...]
Topics 20101003 | Real Topics — 03 October 2010 12:15
[...] HTML5+CSS3 入門 [...]
snabel » きょうのブックマーク-2010年10月02日 — 02 October 2010 18:02
[...] HTML5+CSS3 入門 | yoppa org [...]