当ブログを常時SSL化しました。記事のコメントに関してこのブログはあくまで個人用の覚書ですので、詳しいWebプログラミング知識はお答えできないことがあります。管理人多忙につき、コメントをされても返信が遅くなることがありますのでご了承ください。レスポンシブウェブAndroidの標準ブラウザ、widthのバグ?Androidには標準ブラウザがある。その名も「ブラウザ」。スマホ操作をレクチャーしてもらったときには、二度聞きしてしまった。通常はChrome使いなものの、サイト制作時にこの「ブラウザ」でも確認しているんですが、IE以上のヤバイ子ちゃんッぽい。文字要素の幅がおかしなことにハマったのが、文字のレイアウト崩れ。スマホを縦から横に切り替えたときの動作を確認していたら、コンテンツ内容(たぶんP要素)が指定の幅に広がらず、狭まってしまう。コメントを残すIE8以下にHTML5×レスポンシブウェブを対応させるJS今更ながら、HTML5&レスポンシブウェブをIE8、IE7、IE6に対応させるための基礎中の基礎まとめ。HTML5・CSS3はIE8以下では通常認識できないIE8以下はHTML5に対応しない。Queriesが効かない。CSS3だからあたりまえ。Queriesは、デバイスの解像度(画面サイズ)によってCSSを切り替える方法なので、レスポンシブウェブデザインにするサイトは必要不可欠。逆にレスポンシブ対応でなければ気にしなくていい。border-box」。解説を読んでもいまいちピンと来ない。box-sizingプロパティには「border-box」と「content-box」などがあってその違いも今いちわからない...。実際に作ってみて納得。こりゃ便利なプロパティです。グリッドレイアウト、とくにレスポンシブサイトなんて必須かもしれません。⇒box-sizingプロパティのサンプル今までは、CSSでボックスを作って余白や枠線を入れたりすると、幅or高さで指定した値より大きくなってデザインが崩れたりと、イラつくことも多々ありましたが。border-box;}-webkit-とか先頭に付けているものはベンダープレフィックスと言うらしい。拡張機能であることを明示するための識別子ベンダープレフィックス-CSSの基本だそうです。これをつけないとFirefoxでは反映されませんでした。念のため各ブラウザのものを指定しておいたほうがよさげ。Explorer)※IE7やIE6は対応しません。いうか対応させる方法あるんでしょうか・・・(^^;)?もうXPは終了なので個人的にはほぼスルーします。コメントを残すレスポンシブウェブは可変グリッドレイアウトが必須マルチデバイスに対応するレスポンシブウェブデザインには、グリッド可変というCSSでのレイアウト方法が必要不可欠になる。フルードグリッドレイアウトとも呼ばれるらしい。今までブロック要素(カラム幅)は、CSSのwith:数値PXで固定していたんだけど、これをwith:数値%にしてスクリーン幅に応じ、カラム幅を変化させるわけですね。ブロック(カラム幅)のPX指定を%指定に変える計算式(変換したい値)÷(変換したい値の親要素の幅)×100最初に、左側に配置した#main(620px)の横幅を%に変換してみましょう。#mainの親要素は#contents(960px)ですので、前の計算式に当てはめると、620px÷960px×100=64.583333333%となります。(1/3)|ゼロから始めるレスポンシブWebデザイン入門ipadのとき、スマホのとき...カラム、ボックス群は全部計算していかなければなりません。́;ω;`)手作業で頑張るべし!あとネックになるのが凝ったデザインをするとき。画像...グリッド可変しても大丈夫なように緻密な設計が必要になります。コメントを残す3カラムのシンプルテンプレートいろいろ使いまわしのきく、簡単にレイアウトされたテンプレートを作っておきたいと思い、超シンプルな3カラムのテンプレを作ってみた。一般的な3カラムのHTMLコーディング順って、大体以下のようになるよねぇ。ヘッダーサイドAメインコンテンツサイドBフッターページごとの内部SEOをより強化したいから、ヘッダーの直下にメインコンテンツを配置してみたいのだ。こんな感じ↓ヘッダーメインコンテンツサイドAサイドBフッターと思って調べたらCSSで結構簡単にできた。レイアウトイメージサンプルはこちらfirefox、Chromeは大丈夫だけど、IE8以下はメインコンテンツがサイドBの位置になってる@@はぁ...IEはやっかいだな。あとは<main>の中に<nav>(カテゴリナビ)を入れることがいいのかはイマイチわからならい。id="content"><main><article>~</article></main><nav>~</nav></div>のように、<nav>は<main>外でもいいと思う。メインコンテンツに関連するカテゴリなら<main>内に入れていいはずだし、関連記事も<aside>で入れていいはず。<nav>って...ちょっとぼやき。カテゴリーをはじめパンクズや会社概要とか、フッターのサイト案内のリンクとかも全部ナビゲーションだよね。なんか<nav>多すぎ。<aside>で囲えばいいのかとも思うけど・・・それも違う気がする。<menu>っていう要素もあるけど、これは、操作メニューを作成するタグ。勧告候補で削除対象となっている。5.1で<menuitem>として機能は引き継がれるらしい。ん~せめて、メインカテゴリ専用のHTML5タグが追加されて欲しいなぁ...<category>とかで。コメントを残すレスポンシブウェブを学習してみる運営しているサイトで最近売上げが落ち気味。アクセス数は以前とあまり変わらないのに...なぜ?サイトコンテンツ自体に問題があるかもしれないけど、気になるのがスマートホンからのアクセス急増。PC半分、スマホ半分。iphone端末が多い。docomoがiphone出すということでさらに需要が増えるでしょう...もう一般ユーザーはPCよりスマホ派が多くなるんでは!?ということで遅いけどスマホ用のサイトコーディングを勉強ことにしました。頭をフル回転してマスターしようとしてるのがレスポンシブウェブデザイン。メモることが多くて、忘れてしまいそうなのでこのブログにじゃんじゃんメモしてこうと思います。Android)やipadなどのタブレットなどさまざまなデバイスに対応するウェブデザインの制作手法です。サイト構造によっては向き不向きがあるようですが・・・これ以上テンプレートを増やしたくない元々シンプルな構造のサイトな場合はもうレスポンシブウェブにしてしまったほうがいいと思います。WordPressなど記事投稿内容はシンプルにするサイトはほとんどWordpressで構築しているのですが、記事投稿で画像+文字+CSSやTableで複雑にデザインを組んじゃってるページは崩れるはず・・・。長い目で見れば今修正しておけば、後々の運営が楽になることでしょう。