yanagisawa初歩的なjQueryの記事に関しては、ネタ切れになってしまいました。講座カリキュラムでは、ブログのような教科書的な内容にプラスして実用的なコンテンツを作成する予定です。いうことで、これからはhtml5やcss3の勉強をしていきたいと思います。今回はwebデザイニング2011.11月号の特集を自分なりにまとめてみようと思います。新規ドキュメントを改造したいのだけれど...いろいろ省略化されてソースがスッキリなのでステキ。ちなみにdreamweaver5.5でhtml5の新規書類を作成すると以下の様なソースから始まります。新規ドキュメントを以下の様に改造したい気分。※DOCTYPEに続くHTMLは小文字の方が正しいと記事にあったので、下記ではhtmlを小文字にしています。src=""></script></head><body></body></html>アドビのサイトに効率アップを図るために新規ファイルの改造をする記事があるのだけれど上手くいきません...。adobe:Webページ制作の効率をUPするためのカスタマイズで、dreamweaver5.5のフォルダ構成を眺めていたら「ja_JP」フォルダを見つけました。日本語バージョンの設定は、こっちのフォルダにあるのですね...。もってこれを修正することで無事にカスタマイズすることができました。※同じようにカスタマイズする方は、オリジナルのファイルをコピーしてバックアップすることを忘れずにね。なんとなくカスタマイズしてみたかったので挑戦したものの、たぶん実際には自作初期htmlファイルを作成しそれをコピーして使いまわしていくと思います。これまでもそうでしたので...。yanagisawa今回もwebデザイニング2011.11月号の特集を自分なりにまとめてみました。IEは8以前のバージョンで新要素が使えないjavaScriptライブラリのhtml5shivを利用すれば対応可能だが、javaScriptがOFFの環境ではNG。この問題があるため、PCサイトでのhtml5対応は慎重にならざるを得ない。google検索:html5shiv・sectionタグ構造的な区切りはsectionタグを利用する(これまでのdiv的な扱い?)。入れ子構造にしてもOKで、各セクションにはh要素(見出し)があるのが普通っぽい。・headerタグ、footerタグ各ページのbody直下に置かれるタグ。sectionタグ内で利用するのも間違いではない。その場合、そのセクションでのヘッダーやフッターという意味になる。・articleタグ下層ページのメインコンテンツとなる記事につける。articleタグは入れ子構造をNGとされる。通常はトップページには存在しない(トップは目次的な機能だから)・asideタグバナー広告などメインとは関連性の低い内容に利用するタグ。・hgroupタグ将来的に削除又は変更される可能性があるので、あまり利用しない方がよい。ServiceIE8以前で利用できないとなるとPCサイトでの採用はキツイのですが、スマートフォン向けのサイトでは逆にhtml5で作成するのが普通らしいので、まずはそちらから攻めるのが良さそうです。yanagisawa今回もwebデザイニング2011.11月号の特集を自分なりにまとめてみました。IEは8以前のバージョンではCSS3はほとんど利用できないhtml5と同様にIEは8以前はほとんど対応していないらしい。PCサイトでhtml5&CSS3でサイトを作成するのは慎重にすべき。その代わりスマートフォンのブラウザではかなり対応しているので、スマートフォンサイトで慣らしていくのが良さそうです。・リセットcsswebデザイニングの記事では、どの様にすべきかの記載はなかった。スマートフォンサイトにも配慮されているということで、以下のサイトで紹介されているNormalize.cssがよさげな感じです。これにはwebデザイニングの記事で説明のあったhtml5の新タグをブロック化する設定も含まれています。Normalize.cssを適当に日本語にしました・ベンダープリフィックス現在は概ねcss3の仕様が確定したけれど、確定していない頃はブラウザのベンダーごとに実験的に対応していた。その名残がベンダープリフィックス。古いブラウザに対応するためには付けておいた方が無難。use例えば角丸の設定で、どのブラウザがベンダープリフィックスが必要か分かります。corners)またベンダープリフィックスの設定をサポートしてくれる情報があったので紹介。次のリンクはjavaScriptを組み込んで動的に追加するライブラリです。AnimationjavaScriptを利用しなくても動的な演出ができる。現時点では対応ブラウザが少ないためjQueryを利用した方が無難だと思う。2011.12の記事より)。yanagisawahtml5の事を調べていたらmodernizrというjavaScriptライブラリに出会いました。これを利用すると、html5やcss3の機能に対応しているブラウザ/対応していないブラウザの分岐をして、表示を振り分けることができるそうです。以下のサイトで詳しく説明されています。参考サイト:allWeb様このように便利なツールが出ていますが、やはり個人的にはPCサイトでのhtml5やcss3対応はまだ早いかなぁと考えています。実際、企業サイトでhtml5&CSS3で作成されたサイトはほとんど無いのではないでしょうか?※IE9のキャンペーンspecialサイトではよく見かけますが一般サイトでは少ないです。html5やcss3は今後外せない技術ですから、今のうちから学んでいきたいです。私は、とりあえずスマートフォン向けのサイトを学ぼうと思います。スマートフォン用サイトはすでに多くがhtml5なので、実例もたくさんあり学びやすいので。yanagisawaスマートフォン用のサイトを作成してみたいので、html5やcss3もきちんと学習したい今日この頃。良さそうなサイトがあったので備忘録としてここにメモ。Mdn様のサイトです。流し読みして気になった点を箇条書き。・ページ内アンカーがdivのidを指定できるのはステキ。・5ページ目のセクションの項目は必読html5の構文自体は簡単だけれど、どのように構成するかを説明しているサイトは少ないので。yanagisawaPCでスマートフォン用のサイトを閲覧したいスマートフォン用のサイト作成を学ぶのであれば、既存の企業サイトを研究するのが一番良いと思います。スマートフォンではソースを表示させるのも大変です。スマートフォン用のサイトはアドレスを直接入力すればPCでも閲覧できるものも多いのですが、そもそもスマートフォン用のアドレスが分かりませんし、サイトによってはPCでアクセスすると強制的にPC用のサイトに飛ばされてしまいます。そこで活用するのがユーザーエージェント(UA)の偽装です。UAを変更してスマートフォンになりすませばPC上でスマートフォン用のサイトを閲覧することです。実際に今回紹介するテクニックを利用してiPhoneと偽装してYahooにアクセスしました。すると以下の様にスマートフォン用のサイトを表示してくれました。勘違いしないようにしましょう。これはUAを偽装しているだけでiPhoneの表示をシミュレートしているわけではありません。同じsafariですが細かい部分で仕様が異なっていると思います。ソースの解析などにのみ利用するようにしましょう。UAの設定方法いろいろなブラウザでUAを偽装することは可能だと思うのですが、safariではプラグインの追加なしに簡単に変更可能なので、ここで紹介したいと思います。safariの環境設定を開き「詳細」の最下段にある「メニューバーに”開発”メニューを表示」にチェックを入れます。すると以下の様に「開発」メニューが追加されるので、このメニューから「ユーザーエージェント」で設定すればOKです。yanagisawahtml5とcss3の練習を兼ねてデザインドリルのスマートフォン用サイトを作成しようと思います。合間の時間を利用して作成していくので、少しずつしか進められません。ブログで作成した範囲で記事を書き進めていくようにします。今回はタイトル部分とショーケース画像だけです。ここで利用しているcssはこちらリキッドデザインにするviewportは以前決めた設定でいきます。サイトの幅にdevice-widthを利用しているため機種や縦/横表示により、ブラウザの幅が変化することになります。そのため固定幅でデザインする事はできず、リキッドデザインにしなければなりません。タイトル部タイトルはブラウザ幅にかかわらず固定幅で表示し、センタリングするようにしました。高解像度用に282×74の画像を作成し、それを141×37で表示しています。ここにはhtml5から導入されたタグを利用しています。ショーケース部ショーケース画像はセンタリングではなく、横幅に合わせて可変するようにしました。拡大/縮小による画像の劣化を確認するため、画像まわりに1pxの囲み枠を付けました。iOSでは縦/横ともに綺麗に線が表示されましたが、Android(IS11T)では縦/横ともに上の線だけ欠けてしまいました...。画像を拡大縮小して利用する場合は目立つ形で1pxの線を利用するのはやめた方がよいでしょう。フォントサイズこのサンプルではフォントサイズを10pxと小さめにして可読性を確認しました。10pxでも充分読むことはできますが、この辺が下限でしょうか。ちなみにiPodTouchとIS11Tでほぼ同じ文章の幅となりました。PCではMacとWinの文字間隔が大きく異なるため同じフォントサイズでも文章の幅が結構違うのですがスマートフォンでは差はほとんど無いのかもしれません(Androidは機種によるのでしょうが)。sectionタグhtml5から導入されたsectionタグを利用して、ショーケース画像と直下の文章をまとめました(idはshowcaseとしています)。headerタグやsectionタグを利用すると、だいぶdivタグを減らすことができますね。yanagisawa今回もタイトルとショーケース部分の練習です。デザインは少し複雑にして検索窓を付けてみました。前回のサンプルで画像に付けた1pxの罫線がAndroidで綺麗に表示できなかったので今回はcssのborderで画像の上下に1pxの罫線をつけました。今回もAndroid(IS11T)で納得のいかない表示に...。上の罫線だけが太く表示されました...。iOSでもキャプチャを撮って調べると2pxになっています。いう仕様なのでしょうか?かといってborderの設定を0.5pxと指定すると表示できません...。練習のため前回よりも複雑な構成にしました。その過程で以下のことを知ったのでメモ。ブロック要素のサイズを、内部のfloat要素の大きさに合わせて自動で変えるにはあとiOSではformのtypeでsearchを指定すると通常のテキストエリアと異なり角丸のデザインになるというので検索を付けてみました。androidでは通常のテキストエリアと同じになります。次回はメニュー部分の練習をしてみたいと思います。yanagisawaコーディングの仕事から離れて10年近くになるので、HTML5&CSS3以前にいろいろ忘れてしまっていることに気が付く今日この頃です...。これからしばらくはスマートフォン向けのメニュー作成に入ろうと思います。ここで利用しているcssはこちらスマートフォン用のメニューに特有なのが、メニューの右側にあるリンクアイコンです。リンクアイコンを左側に付けないのは横長に表示したときに右側が寂しくなるのを防ぐためなのでしょうか?右側のリンクアイコン今回手間取ったのは、このリンクアイコンの表示です。cssの疑似要素afterを利用してメニューの後ろに追加しているのですが、ここで画像を追加しても、その画像のサイズを設定する方法が分からなかったのです(できないの?)。PCであれば通常のサイズで表示するだけなので、サイズの指定は省略しても構いませんがスマートフォン用のサイトでは高解像度向けに、大きめの画像を小さくして配置しなければならないのです。そのため、配置した画像のサイズを設定する必要があるのです。高解像度のアイコンをメニューに表示しているサイトも多いので、それらのソースを調べて対処法を学びました。以下の様に背景画像として設定してサイズを変更できました。25px;liに対してaを利用すると...リンクは文字部分だけでなく、メニュー全体に貼りたいので、最初はテキストではなくliタグに対してaタグを使っていました。ここで利用しているcssはこちらこの方法でiOS,Androidともに問題なく機能するのですが、iOSでは微妙に気に入らない挙動になりました。iOSではタッチした際にリンク部分がハイライトされるのですがliに対してaタグを利用した03b_menu.htmlでは以下の様にliのマージン部分も含めてハイライトされてしまいます(黄色い部分がメニューの上にはみ出している)。いうことで最初に紹介した03_menu.htmlでは素直に文字にaタグを付けて、リンク文字をブロック要素にして対応しました。次回はメニューの別デザインを作成する予定です。yanagisawa今回は2種類作成してみました。全幅を使ったメニューただ全幅に延ばしてもつまらないので、ボーダーを利用してメニュー間の区切りを立体的にしてみました。ここで利用しているcssはこちらcss的に難しい部分はないのですが、Androidでtext-shadowの設定が無効になるケースがあることに気が付きました。具体的には以下の様に「ぼかし」の設定を0pxにすると影が表示されないということです(3番目の数値がぼかしの値です)。#fff;サンプルとして「ぼかし」の設定を0pxにしたものを用意しました。Androidで確認してみてください。ちなみに、このタイプのメニューではliをaタグで囲んでも問題有りませんでした。04b_menu.htmlはliをaタグで囲んでいます。ここで利用しているcssはこちら連結した角丸メニューメニューを連結して、全体的に角丸にしたサンプルです。ここで利用しているcssはこちらここでのポイントは疑似セレクタの:first-childと:last-childです。これらは要素内の最初の要素と、最後の要素を選択することができます。このサンプルでは以下の様にしてliの最初の要素には上部に角丸、最後の要素には下部に角丸を設定しています。8px;}ちなみにこのサンプルでliをaタグで囲むと以下の様にすべてのliに角丸が適用されてしまいます(liの連続性がaタグによって絶たれているようです)。liをaタグで囲むのは問題があるのかもしれません。ここで利用しているcssはこちら次回もメニューの話になる予定です。