【iPhone/iPad対応はできているかチェック】HTML5＋CSS3で作る 魅せるiPhoneサイト/谷拓樹
HTML5＋CSS3で作る 魅せるiPhoneサイト iPhone/iPad/iPod touch対応
読了。
フィーチャーフォンからスマートフォンへの移行というのがだんだん進んでいるわけですが、そんな中でもiPhone！ということでiPhoneで何ができるのかを勉強するべく購入。
サンプルなどもあって非常に分かりやすい本でした。
（サンプルはサイトURLが掲載されています）
目次
スマートフォン時代のwebサイト
iPhoneサイト構築のワークフロー
基本的なページの作成
iPhone風ナビゲーションページの作成
アニメーションするページの作成
ユーザビリティの高いフォームの作成
webサービスと連携したページの作成
ショッピングサイトの作成
気になった
サイト事例（カラーページ）
日本語フォントは一つのみ
iPhoneシミュレーターでの検証
アクセスを振り分ける三つの方法
（.htaccess/JS/php）
AppleのiPhoneヒューマンインターフェースガイドライン
ViewPortでのサイズ指定
電話番号認識の無効化
アニメーション
iPhoneで使えるフォームの属性と値
パフォーマンス調整でiPhoneサイトをより快適に
デスクトップサイトをiPadに対応させる
スクロールバーは表示されない
マウスオーバーが使えない
画面設計に役立つツール/サービス
感想
非常に分かりやすい本でした。
iPhoneユーザーが増加傾向にあるというのは現実でそのユーザーに向けていかに快適な環境を提供できるか、ですよね。
「PCサイトもiPhoneで見られるから特に気にしなくてもいい」というわけではなく、例えばマウスオーバーの制限だったりスクロールバーの制限だったりがあって、そういった細々とした部分で機会損失を起こしているかもしれないわけです。
「これからiPhoneサイトを勉強しよう」という方にも「気になってたけど手付かず」という方にもおすすめ。
フィーチャーフォンが主流だった時に「ユーザーの半分位が携帯電話から来ている」というサイトがあったように、今後スマートフォンやタブレット端末ユーザーがサイト訪問者の半分とかを占める時代が来るかもしれません。（もしかしたらもうあるかも？）
慌てて対応するのではなく、あらかじめ知識をつけておくことが大事なのではと感じました。
と言っても、このサイトも特に何もやってないのですがｗ
Categories CSSやろう, iPhone, webデザイン, 書籍・雑誌 | Comment (0)
サイドバーの配置をちょっと変更してみました。
Google+ページを作り、もう少し大々的に打ち出していきたいなと思いサイドバーの配置を変更してみました。
Before
※クリックすると拡大します。
twitterのバナー（しかも色合いが目立たないｗ）がちんまりと広告の下に。
After
twitterボタンの配色を変更し、Google+の紹介ボタンを設定しました。
ちょっと3カラムだとゴチャゴチャ感がありますかね。どうでしょうか。
（おまけ）AKB48デザインのヘッダーを取り込んだサイトイメージ
休日に「ロゴデザインジェネレーターで遊んでたら土曜日が終わった【追加作成あり】」という更新をしていたのですが、AKB48風ロゴをテスト的に取り込んでキャプチャしてみました。
※クリックすると拡大します。
軽い気持ちで作ってみたのですが、なかなかファッショナブル！ｗ
ヘッダーの構成はこんな感じ。
ヘッダーは一番最初に目に入るところなのでやっぱりそこのデザインが変わると印象が変化しますね。
今回は試験的に見てみましたが、こういう変更をどんどん取り込んでいくのも面白そうです。
Google webフォントでシャレオツなサイトタイトルにしようとしたら日本語対応してなかったでござるの巻
ちょっと前にRe:veryさんのGoogle webフォントの記事がずっと印象に残っていてサイトに何か活かせないかと思ってました。
Google Webフォントを使ってみました。 | Re:very
サイトのtitleでやってみたらシャレオツなんじゃないかと思っていざ行動！
日本語未対応のGoogle webフォント
手順に関してはRe:veryさんの記事を見てもらえると分かるのですが、Google webフォント日本語対応してない！！
テスト段階で触ってたらこの体たらくですよ。
今更サイト名を英語にするわけにもいかないし、なんとも・・・
ニュースとか検索してみたらちゃんと書いてました。
なお、現在“Google Web Fonts”では日本語のフォントは公開されていない。
Google、Webフォントサービス“Google Web Fonts”のv2を公開
次回の課題にする（かもしれない）もの
フォントと素材集のフロップデザイン｜シルエット素材集｜ロゴデザイン
ダウンロード系の素材を使ってフォントを変化させてみる。
follow meとか、ソーシャルの部分を英語にして「Please share this issue , if you like. 」とかにしてもいいんですが、このサイトでそれやっちゃうと統一感のないごった煮状態になってしまうので、ちょっと保留・・・
Categories CSSやろう, Google | Comment (0)ロールオーバーで遊ぶ休日
→
途中で挫折シリーズｗ
更新やめようかと思ったんだけど、備忘録的にメモをしておく。
ロールオーバーを使って何か動きのあるコンテンツできないかなーと色々なサイトを見ていました。
やりたかったのは
この部分に電球の画像をつけて、マウスオーバーすると電球が光る！的なもの。
参考にしたサイト
わかりやすい。
グローバルメニューのロールオーバーの時とか参考になりますよね。
※今、思いついたんだけどロールオーバーで単純にこの部分の変更すればできるんじゃないか。
========（作業中）========
できましたｗ
ちょっと複雑に考えすぎてて出来なかったっぽいですね。
実際のコード変更
.socialbox{
text-indent: 30px;
margin-top: 5px;
padding-top: 15px;
padding-right: 5px;
padding-left: 7px;
padding-bottom: 60px;
background-color:#f5f5f5;
background:url(/wp-content/uploads/32px_light_off.png) no-repeat;
background-position:5px 5px;
border-style: dotted; border-color:#696969;
font-size: 1.5em;
}
ここは元々あった部分のデザイン変更。
画像の差し込みとそれに合わせてテキストを少し右にずらしています。
.socialbox ul{
text-indent: 0px;
}
text-indentを挟むことによってソーシャルボタンが崩れてしまうのでボタン設定をしているul部分をindent無効に。
.socialbox:hover{
background:url(/wp-content/uploads/32px_light_on.png) no-repeat;
background-position:5px 5px;
}
ロールオーバー後の設定。結構単純。
自分でコーディングしてみると、シャレオツなあのサイトもこういう仕組みで動いてるんだ、というのが分かってきますね。
理屈でわかってるのとはまた別の感覚が身についてくる。
その他気付き
今回のPOSTって「途中までやったけどできなかった」的な更新だったんですが、メモとして書いていくうちに「こうすればできるんじゃないか？」というひらめきが生まれ、最終的に成功しました。
ダメだった、という時も「どうダメだったのか」というのをアウトプットしていくと新たなひらめきが生まれるかも知れませんね。
おまけ
ロールオーバーでこんな表現も出来ます。
hoverの設定部分の変更事例。
背景を白＋線を点線じゃない設定にする
背景をオレンジに！
【何が出来るのかを学ぶ】CSS3スタンダード・デザインガイド/エ・ビスコム・テック・ラボ
読了。
コードは、そもそも読んで納得するものではなく実際に手を動かしてみないと分からないのですが、それでも図解がすごくわかりやすかったです。
気になった（※単純に自分が知らなかった今までもあったCSS要素もあります）
・構造擬似クラス（奇数と偶数の色を変化させるなど）
・first-letter擬似要素
・メディアクエリ
・ページメディアの設定
・マルチカラムの段の区切り線
・ボックスのドロップシャドウ
・段落インデントの指定
・行の高さの調整
・インライン要素の位置揃え
・画像置換
・テーブルの表示方法
・2D/3Dトランスフォーム
・アニメーション
・インターフェースセレクタ
感想
単純に自分がCSSに関して不勉強だっただけですね。わかります。
デザインのサンプルをまとめてある本を読むと何が出来るのかすごく分かりやすいですね。
最近は独自ドメインを取ったこともあり、自分でサイトのデザインなども少しづつ変化させたりしていますが発想の幅は広がりそうです。
CSS3以前のCSSも掲載されているので、これからデザインを勉強したいという方にはオススメ。
CSS3で行える技術で気になったのは以下。
・画像置換
→text-indentなどを用いずに対応可能。
a {content: url(***.jpg);}など
SEO的にはどういう風に見られるのか。
画像置換はNG項目ではないけど怪しまれる要素なんじゃないかというのを前提としてですが。
・インタフェースセレクタ
→これ使うとEFOとかが手軽にできるようになりそう。
