html5とかcss3とかも始めてみようかな

初歩的なjQueryの記事に関しては、ネタ切れになってしまいました。
講座カリキュラムでは、ブログのような教科書的な内容にプラスして
実用的なコンテンツを作成する予定です。
 
ということで、これからはhtml5やcss3の勉強をしていきたいと思います。
今回はwebデザイニング2011.11月号の特集を自分なりにまとめてみようと思います。
 
 
 

新規ドキュメントを改造したいのだけれど…

いろいろ省略化されてソースがスッキリなのでステキ。ちなみにdreamweaver5.5でhtml5の
新規書類を作成すると以下の様なソースから始まります。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>無題ドキュメント</title>
</head>

<body>
</body>
</html>

 
しかし、お決まりの要素はもう少しあるので、
新規ドキュメントを以下の様に改造したい気分。
※DOCTYPEに続くHTMLは小文字の方が正しいと記事にあったので、下記ではhtmlを小文字にしています。

<!DOCTYPE html>
<html lang="jp">
<head>
<meta charset="UTF-8">
<title>無題ドキュメント</title>

<meta name="description" content="">
<meta name="keywords" content="">
<link rel="stylesheet" href="">
<script src=""></script>

</head>

<body>
</body>
</html>

 
 
アドビのサイトに効率アップを図るために新規ファイルの改造をする記事があるのだけれど
上手くいきません…。なんでだろう。
adobe:Webページ制作の効率をUPするためのカスタマイズ
 
 
で、dreamweaver5.5のフォルダ構成を眺めていたら「ja_JP」フォルダを見つけました。
日本語バージョンの設定は、こっちのフォルダにあるのですね…。でもってこれを修正することで
無事にカスタマイズすることができました。
※同じようにカスタマイズする方は、オリジナルのファイルをコピーしてバックアップすることを忘れずにね。
 
 
なんとなくカスタマイズしてみたかったので挑戦したものの、たぶん実際には自作初期htmlファイル
を作成しそれをコピーして使いまわしていくと思います。これまでもそうでしたので…。
 
 
内容のない記事になってしまいましたが….
おしまい
 
 

html5:新たに追加されたタグ等

今回も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タグ

将来的に削除又は変更される可能性があるので、あまり利用しない方がよい。
 

文法チェッカー
「w3c markup validation service」というのが一番有名らしい
Markup Validation Service

 
IE8以前で利用できないとなるとPCサイトでの採用はキツイのですが、
スマートフォン向けのサイトでは逆にhtml5で作成するのが普通らしいので、
まずはそちらから攻めるのが良さそうです。
 
 
おしまい
 
 
 

CSS3:始めの一歩

今回もwebデザイニング2011.11月号の特集を自分なりにまとめてみました。

IEは8以前のバージョンではCSS3はほとんど利用できない
html5と同様にIEは8以前はほとんど対応していないらしい。やはりPCサイトで
html5&CSS3でサイトを作成するのは慎重にすべき。その代わりスマートフォン
のブラウザではかなり対応しているので、スマートフォンサイトで慣らしていく
のが良さそうです。

 

・リセットcss

webデザイニングの記事では、どの様にすべきかの記載はなかった。なのでネットで検索。
スマートフォンサイトにも配慮されているということで、以下のサイトで紹介されている
Normalize.cssがよさげな感じです。これにはwebデザイニングの記事で説明のあった
html5の新タグをブロック化する設定も含まれています。
参考サイト:よさげなリセットCSS Normalize.cssを適当に日本語にしました
 
 
 

・ベンダープリフィックス

現在は概ねcss3の仕様が確定したけれど、確定していない頃はブラウザのベンダーごとに
実験的に対応していた。その名残がベンダープリフィックス。つまり古いブラウザに対応する
ためには付けておいた方が無難。
 
対応状況を確認するのは、以下の「when can I use」が便利。
when can I use
 
例えば角丸の設定で、どのブラウザがベンダープリフィックスが必要か分かります。
例:iOS3では-webkit-が必要だけど、iOS4では必要ない
CSS3 Border-radius (rounded corners)
 
またベンダープリフィックスの設定をサポートしてくれる情報があったので紹介。
最初のリンクは、web上でベンダープリフィックスの設定を追加してくれるwebコンテンツの紹介
次のリンクはjavaScriptを組み込んで動的に追加するライブラリです。
面倒なCSS3のベンダープレフィックスを自動で付けてくれる -prefixMyCSS
CSS3のベンダープレフィックスを自動で付けてくれる手軽で軽量なJavaScriptライブラリ・cssFx.js
 
 
 

・CSS TransitionとCSS Animation

javaScriptを利用しなくても動的な演出ができる。しかし現時点では対応ブラウザが少ないため
jQueryを利用した方が無難だと思う。ただしスマートフォンの一部機種ではcssのアニメの方が
動作が速い(web designing 2011.12の記事より)。
 
 
おしまい
 
 
 

modernizr2


html5の事を調べていたらmodernizrというjavaScriptライブラリに出会いました。
 
これを利用すると、html5やcss3の機能に対応しているブラウザ/対応していないブラウザの
分岐をして、表示を振り分けることができるそうです。以下のサイトで詳しく説明されています。
参考サイト:allWeb様
 
 
このように便利なツールが出ていますが、やはり個人的にはPCサイトでのhtml5やcss3対応は
まだ早いかなぁと考えています。実際、企業サイトでhtml5&CSS3で作成されたサイトは
ほとんど無いのではないでしょうか?
※IE9のキャンペーンspecialサイトではよく見かけますが一般サイトでは少ないです。
 
しかしhtml5やcss3は今後外せない技術ですから、今のうちから学んでいきたいです。
なので私は、とりあえずスマートフォン向けのサイトを学ぼうと思います。
スマートフォン用サイトはすでに多くがhtml5なので、実例もたくさんあり
学びやすいので。
 
 
 

html5の学習サイト

スマートフォン用のサイトを作成してみたいので、html5やcss3もきちんと
学習したい今日この頃。良さそうなサイトがあったので備忘録として
ここにメモ。Mdn様のサイトです。
 

 
 
とりあえず流し読みして気になった点を箇条書き。
・ページ内アンカーがdivのidを指定できるのはステキ。
・5ページ目のセクションの項目は必読
 html5の構文自体は簡単だけれど、どのように構成するかを説明している
 サイトは少ないので。
 
 
 
 

safariのUAを変更する

PCでスマートフォン用のサイトを閲覧したい

スマートフォン用のサイト作成を学ぶのであれば、既存の企業サイトを研究するのが
一番良いと思います。しかしスマートフォンではソースを表示させるのも大変です。
 
スマートフォン用のサイトはアドレスを直接入力すればPCでも閲覧できるものも
多いのですが、そもそもスマートフォン用のアドレスが分かりませんし、サイトに
よってはPCでアクセスすると強制的にPC用のサイトに飛ばされてしまいます。
 
そこで活用するのがユーザーエージェント(UA)の偽装です。UAを変更して
スマートフォンになりすませばPC上でスマートフォン用のサイトを閲覧することです。
実際に今回紹介するテクニックを利用してiPhoneと偽装してYahooにアクセス
しました。すると以下の様にスマートフォン用のサイトを表示してくれました。
しかし勘違いしないようにしましょう。これはUAを偽装しているだけでiPhoneの表示をシミュレートしているわけ
ではありません。同じsafariですが細かい部分で仕様が異なっていると思います。ですのでソースの解析などにのみ
利用するようにしましょう。

 

 
 
 

UAの設定方法

いろいろなブラウザでUAを偽装することは可能だと思うのですが、safariでは
プラグインの追加なしに簡単に変更可能なので、ここで紹介したいと思います。
まずはsafariの環境設定を開き「詳細」の最下段にある「メニューバーに”開発”
メニューを表示」にチェックを入れます。
 

 
そうすると以下の様に「開発」メニューが追加されるので、このメニューから
「ユーザーエージェント」で設定すればOKです。
 

 
 
おしまい
 
 
 

スマホサイト練習(1)

html5とcss3の練習を兼ねてデザインドリルのスマートフォン用サイトを作成
しようと思います。合間の時間を利用して作成していくので、少しずつしか
進められません。ですので、ブログで作成した範囲で記事を書き進めていく
ようにします。今回はタイトル部分とショーケース画像だけです。
 

タイトルとショーケース部の作成
サンプル:01_title.html  ここで利用している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タグを減らすことができますね。
 
おしまい
 
 
 

スマホサイト練習(2)

今回もタイトルとショーケース部分の練習です。デザインは少し複雑にして
検索窓を付けてみました。

タイトルとショーケース部の作成
サンプル:02_title.html  ここで利用しているcssはこちら

 

 

ショーケース部分

前回のサンプルで画像に付けた1pxの罫線がAndroidで綺麗に表示できなかったので
今回はcssのborderで画像の上下に1pxの罫線をつけました。が…。
 
今回もAndroid(IS11T)で納得のいかない表示に…。なぜか上の罫線だけが太く
表示されました…。何故に…。
iOSでもキャプチャを撮って調べると2pxになっています。そういう仕様なのでしょうか?
かといってborderの設定を0.5pxと指定すると表示できません…。
 
 

ヘッダ部分

練習のため前回よりも複雑な構成にしました。その過程で以下のことを知ったのでメモ。
ブロック要素のサイズを、内部のfloat要素の大きさに合わせて自動で変えるには
 
あとiOSではformのtypeでsearchを指定すると通常のテキストエリアと異なり角丸の
デザインになるというので検索を付けてみました。androidでは通常のテキストエリア
と同じになります。
 
次回はメニュー部分の練習をしてみたいと思います。
 
 
 

スマートフォン:メニュー(1)

コーディングの仕事から離れて10年近くになるので、HTML5&CSS3以前にいろいろ忘れて
しまっていることに気が付く今日この頃です…。
これからしばらくはスマートフォン向けのメニュー作成に入ろうと思います。
 
 

シンプルな角丸メニュー

メニューの作成
サンプル:03_menu.html  ここで利用しているcssはこちら

 

 
スマートフォン用のメニューに特有なのが、メニューの右側にあるリンクアイコンです。
リンクアイコンを左側に付けないのは横長に表示したときに右側が寂しくなるのを防ぐ
ためなのでしょうか?
 
 

右側のリンクアイコン

今回手間取ったのは、このリンクアイコンの表示です。cssの疑似要素afterを利用して
メニューの後ろに追加しているのですが、ここで画像を追加しても、その画像のサイズを
設定する方法が分からなかったのです(できないの?)。
 
PCであれば通常のサイズで表示するだけなので、サイズの指定は省略しても構いませんが
スマートフォン用のサイトでは高解像度向けに、大きめの画像を小さくして配置しなければ
ならないのです。そのため、配置した画像のサイズを設定する必要があるのです。
 
しかし、高解像度のアイコンをメニューに表示しているサイトも多いので、それらのソースを
調べて対処法を学びました。以下の様に背景画像として設定してサイズを変更できました。

background:url(images/buttonIcon.png) no-repeat 0 0;
background-size:25px 25px;

 
 
 

liに対してaを利用すると…

リンクは文字部分だけでなく、メニュー全体に貼りたいので、最初はテキストではなく
liタグに対してaタグを使っていました。

liに対してaタグを利用
サンプル:03b_menu.html  ここで利用しているcssはこちら

 
この方法でiOS,Androidともに問題なく機能するのですが、iOSでは微妙に気に入らない
挙動になりました。iOSではタッチした際にリンク部分がハイライトされるのですが
liに対してaタグを利用した03b_menu.htmlでは以下の様にliのマージン部分も含めて
ハイライトされてしまいます(黄色い部分がメニューの上にはみ出している)。

ということで最初に紹介した03_menu.htmlでは素直に文字にaタグを付けて、リンク文字を
ブロック要素にして対応しました。
 
次回はメニューの別デザインを作成する予定です。
 
 
 

スマートフォン:メニュー(2)

今回は2種類作成してみました。
 
 

全幅を使ったメニュー

ただ全幅に延ばしてもつまらないので、ボーダーを利用してメニュー間の区切りを
立体的にしてみました。

全幅メニューの作成
サンプル:04_menu.html  ここで利用しているcssはこちら

 

 
css的に難しい部分はないのですが、Androidでtext-shadowの設定が無効になるケースがある
ことに気が付きました。具体的には以下の様に「ぼかし」の設定を0pxにすると影が表示されない
ということです(3番目の数値がぼかしの値です)。
参考サイト:ハマリメモ:Android の devicePixelRatio 1.5 問題

text-shadow: 1px 1px 0px #fff; 

サンプルとして「ぼかし」の設定を0pxにしたものを用意しました。
Androidで確認してみてください。ちなみに、このタイプのメニューではliをaタグで囲んでも
問題有りませんでした。04b_menu.htmlはliをaタグで囲んでいます。

影のぼかしを0pxにするとAndroidで表示されない
サンプル:04b_menu.html  ここで利用しているcssはこちら

 
 
 

連結した角丸メニュー

メニューを連結して、全体的に角丸にしたサンプルです。

連結角丸メニューの作成
サンプル:05_menu.html  ここで利用しているcssはこちら

 

 
ここでのポイントは疑似セレクタの:first-childと:last-childです。これらは要素内の
最初の要素と、最後の要素を選択することができます。このサンプルでは以下の様にして
liの最初の要素には上部に角丸、最後の要素には下部に角丸を設定しています。

#menu li:first-child{
 -webkit-border-top-left-radius: 8px;
 -webkit-border-top-right-radius: 8px;			
}

#menu li:last-child{
 -webkit-border-bottom-left-radius: 8px;
 -webkit-border-bottom-right-radius: 8px;
}

 
ちなみにこのサンプルでliをaタグで囲むと以下の様にすべてのliに角丸が適用されて
しまいます(liの連続性がaタグによって絶たれているようです)。
やはりliをaタグで囲むのは問題があるのかもしれません。

連結角丸メニューの作成(失敗例)
サンプル:05b_menu.html  ここで利用しているcssはこちら

 

 
次回もメニューの話になる予定です。