Androidの標準ブラウザ、widthのバグ?

Androidには標準ブラウザがある。
その名も「ブラウザ」。

android_browser

スマホ操作をレクチャーしてもらったときには、二度聞きしてしまった。名前からしてふざけているというか、やる気のない感じがします…個人的に(笑

通常はChrome使いなものの、サイト制作時にこの「ブラウザ」でも確認しているんですが、IE以上のヤバイ子ちゃんッぽい。

文字要素の幅がおかしなことに

ハマったのが、文字のレイアウト崩れ。
スマホを縦から横に切り替えたときの動作を確認していたら、コンテンツ内容(たぶんP要素)が指定の幅に広がらず、狭まってしまう。他ブラウザでは何の問題もないし、CSSやHTMLなどプログラムソースにおかしなところはない…なぜ…?? 続きを読む Androidの標準ブラウザ、widthのバグ?

IE8以下にHTML5×レスポンシブウェブを対応させるJS

今更ながら、HTML5&レスポンシブウェブをIE8、IE7、IE6に対応させるための基礎中の基礎まとめ。

HTML5・CSS3はIE8以下では通常認識できない

  • IE8以下はHTML5に対応しない。タグを認識できない。
  • レスポンシブウェブに欠かせないMedia Queriesが効かない。CSS3だからあたりまえ。

Media Queriesは、デバイスの解像度(画面サイズ)によってCSSを切り替える方法なので、レスポンシブウェブデザインにするサイトは必要不可欠。逆にレスポンシブ対応でなければ気にしなくていい。 続きを読む IE8以下にHTML5×レスポンシブウェブを対応させるJS

box-sizingでデザインが楽になる:CSS3

コーディングデザインの本を見ていると、CSSに必ずといっていいほど登場するのが「box-sizing: border-box」。

解説を読んでもいまいちピンと来ない。
box-sizingプロパティには「border-box」と「content-box」などがあってその違いも今いちわからない…。

で、実際に作ってみて納得。こりゃ便利なプロパティです。
グリッドレイアウト、とくにレスポンシブサイトなんて必須かもしれません。
⇒box-sizingプロパティのサンプル

今までは、CSSでボックスを作って余白や枠線を入れたりすると、幅or高さで指定した値より大きくなってデザインが崩れたりと、イラつくことも多々ありましたが。。。box-sizing: border-boxを指定するとスッキリ解消します!

全ての要素に適応させる場合は、ユニバーサルセレクタ (*)でOK

*{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}

-webkit-とか先頭に付けているものはベンダープレフィックスと言うらしい。

拡張機能であることを明示するための識別子
ベンダープレフィックス-CSSの基本

だそうです。
これをつけないとFirefoxでは反映されませんでした。念のため各ブラウザのものを指定しておいたほうがよさげ。

■各ブラウザのベンダープレフィックス
-moz- (Firefox)
-webkit- (Google Chrome、Safari)
-o- (Opera)
-ms- (Internet Explorer)

※IE7やIE6は対応しません。
というか対応させる方法あるんでしょうか・・・(^^;)?
もうXPは終了なので個人的にはほぼスルーします。

レスポンシブウェブは可変グリッドレイアウトが必須

マルチデバイスに対応するレスポンシブウェブデザインには、グリッド可変というCSSでのレイアウト方法が必要不可欠になる。フルードグリッドレイアウトとも呼ばれるらしい。

今までブロック要素(カラム幅)は、CSSのwith:数値PXで固定していたんだけど、これをwith:数値%にしてスクリーン幅に応じ、カラム幅を変化させるわけですね。

ブロック(カラム幅)のPX指定を%指定に変える計算式

(変換したい値)÷(変換したい値の親要素の幅)×100

最初に、左側に配置した#main(620px)の横幅を%に変換してみましょう。#mainの親要素は#contents(960px)ですので、前の計算式に当てはめると、

620px÷960px×100=64.583333333%

となります。

ASCII.jp:フルードグリッドとレスポンシブWebデザインの完成 (1/3)|ゼロから始めるレスポンシブWebデザイン入門

ipadのとき、スマホのとき…カラム、ボックス群は全部計算していかなければなりません。

Dreamweaver CS6には、可変グリッドレイアウト機能が搭載されているらしいけど、金欠だから買えないし(´;ω;`)手作業で頑張るべし!

あとネックになるのが凝ったデザインをするとき。とくに画像…グリッド可変しても大丈夫なように緻密な設計が必要になります。

3カラムのシンプルテンプレート

いろいろ使いまわしのきく、簡単にレイアウトされたテンプレートを作っておきたいと思い、超シンプルな3カラムのテンプレを作ってみた。

ただ、一般的な3カラムのHTMLコーディング順って、大体以下のようになるよねぇ。

  1. ヘッダー
  2. サイドA
  3. メインコンテンツ
  4. サイドB
  5. フッター

ページごとの内部SEOをより強化したいから、ヘッダーの直下にメインコンテンツを配置してみたいのだ。こんな感じ↓

  1. ヘッダー
  2. メインコンテンツ
  3. サイドA
  4. サイドB
  5. フッター

と思って調べたらCSSで結構簡単にできた。

レイアウトイメージ
3column

サンプルはこちら

firefox、Chromeは大丈夫だけど、IE8以下はメインコンテンツがサイドBの位置になってる@@はぁ…IEはやっかいだな。

あとは<main>の中に<nav>(カテゴリナビ)を入れることがいいのかはイマイチわからならい。

<div id="content">
<main><article>~</article></main>
<nav>~</nav>
</div>

のように、<nav>は<main>外でもいいと思う。
でもメインコンテンツに関連するカテゴリなら<main>内に入れていいはずだし、関連記事も<aside>で入れていいはず。

<nav>って…

ちょっとぼやき。
カテゴリーをはじめパンクズや会社概要とか、フッターのサイト案内のリンクとかも全部ナビゲーションだよね。なんか<nav>多すぎ。<aside>で囲えばいいのかとも思うけど・・・それも違う気がする。

<menu>っていう要素もあるけど、これは、操作メニューを作成するタグ。例えば「新規作成」「編集」とか…しかも2013.8頃のHTML5 勧告候補で削除対象となっている。
※<menu>はHTML5から削除されるが、HTML 5.1で<menuitem>として機能は引き継がれるらしい。

ん~せめて、メインカテゴリ専用のHTML5タグが追加されて欲しいなぁ…<category>とかで。

レスポンシブウェブを学習してみる

運営しているサイトで最近売上げが落ち気味。
アクセス数は以前とあまり変わらないのに…なぜ?サイトコンテンツ自体に問題があるかもしれないけど、気になるのがスマートホンからのアクセス急増。
PC半分、スマホ半分。とくにiphone端末が多い。

docomoがiphone出すということでさらに需要が増えるでしょう…もう一般ユーザーはPCよりスマホ派が多くなるんでは!?ということで遅いけどスマホ用のサイトコーディングを勉強ことにしました。

で、頭をフル回転してマスターしようとしてるのがレスポンシブウェブデザイン。メモることが多くて、忘れてしまいそうなのでこのブログにじゃんじゃんメモしてこうと思います。

レスポンシブウェブってなんじゃらほい

レスポンシブウェブとは、1つのテンプレートでPCをはじめスマートフォン(iphone 、Android)やipadなどのタブレットなどさまざまなデバイスに対応するウェブデザインの制作手法です。

Multi Device

サイト構造によっては向き不向きがあるようですが・・・

  • これ以上テンプレートを増やしたくない
  • 元々シンプルな構造のサイト

な場合はもうレスポンシブウェブにしてしまったほうがいいと思います。

WordPressなど記事投稿内容はシンプルにする

サイトはほとんどWordpressで構築しているのですが、記事投稿で画像+文字+CSSやTableで複雑にデザインを組んじゃってるページは崩れるはず・・・。まぁでも長い目で見れば今修正しておけば、後々の運営が楽になることでしょう。

  • 記事投稿はとにかくシンプルに
  • PCで見るよりスマホで見たときを意識して投稿する