弐条海月の とはずがたり

そこはかとなく書き綴るブログなるもの

レスポンシブ・レイアウト

パソコン、タブレット、スマートフォンでサイトを表示する際、それぞれの画面の解像度を元にレイアウトを最適化して表示する「レスポンシブ・レイアウト」。Webの仕事にも携わっている以上、最近流行ってきている新しいWEBレイアウトの手法を知らないわけにはいかないので「レスポンシブ・レイアウト」の勉強を始めました。

「レスポンシブ・レイアウト」は、あらかじめ設定した解像度を超えた(あるいは下回った)場合、読み込むCSSを変化して見た目をガラリと変化させます。例えば、パソコンで表示した場合には3カラムなのに、タブレットでは2カラム、スマートフォンでは1カラムになり、サイドバーはメインコンテンツの下に回り込む…そんなイメージです。

中には解像度に合ったレイアウトにとどまらず、解像度の小さな端末ではサイドバーを非表示にするなど情報に変化を与えているケースや、画面の解像度…単純に言えば画面のピクセルサイズによって動的にレイアウトが可変する「リキッド・レイアウト」を併用しているケースもありますね。

ちなみにこのサイト『弐条くらげの「とはずがたり」』は、中央のメインコンテンツと左右のサイドバーはピクセル指定でサイズ固定した3カラムのレイアウト・スタイル。メインコンテンツの横幅が足りないくせに長文だったりするので、その読みにくさには定評があります(笑)。そして、なによりもヘッダとフッタのみが自在に可変する「なんちゃってリキッド・レイアウト」を採用しております(爆)。

そろそろ、このサイトのレイアウトも何とかしたいところです。


サイトのソースから分かること

色々なメーカーのサイトを開いてはソースをのぞき見る(笑)。WEB関連の職種に就いている人ならば、そういうサイトの見方をすることは至極当たり前のことなわけですが…。

とある大手化粧品会社のサイトを見ていて驚いたのが、トップページに<H1>タグを使用していないこと。企業のサイトでは企業名またはロゴを<H1>タグ内に入れるのが基本ですが、誰もが知っている有名企業であり検索で間違いなく上位にヒットするのだから、<h1>タグに入れるまでもない…ということなのでしょうかね。企業名のロゴが

タグで囲まれておりました。トップページなのに、主役であるはずの社名(ロゴ)を単なる

タグで囲むなんて、初めて見ました。

さらには、その企業のサイト内のリンクをたどって商品の特設ページを開いてみると…見出しに関する<H>タグが何ひとつ使われておりませんでした(笑)。

商品を紹介するページなどはほとんどがFLASHを使って作られていることが多いですし、デザインありきのページレイアウトになりますから、HTMLの文書構造はまったく無視している状況なわけです。

こんな思い切ったhtmlコーディングは個人サイトでは難しいものがありますね。やはり正しい文書構造に基づいたシンプルなhtmlを記述したいものだなぁ。そんなことを改めて思ったのでした。


XAMMPにWordPressを導入

ネットブック上のOS「Xubuntu 12.10」に入れた「XAMPP」に「WordPress」を導入することにします。そんなお話。

まずはWordPressの日本語サイトからWordPressのzipファイルをダウンロードします。

ターミナルから「sudo nautilus」を入力し管理者権限でファイルマネージャ「nautilus」を起動し、ユーザーのホームからフォルダ「ダウンロード」へ移動。ダウンロードしたzipファイルを展開します。展開してできたフォルダ「wordPress」の名前を任意のものに変更(これがアドレスの一部になります)。

それをLAMPの公開フォルダ「/usr/share/apache2/default-site」内に入れます。

ブラウザで「http://localhost/先程変更したWordPressフォルダの名前」にアクセスするとWordPressの設定画面が表示されます。


mailtoにめいわくぅ…

仕事で作成しているHPの仕事がもうすぐ完了しそうです。同業数社のPRのためのHPを作成しておりまして…校正が戻ってきているので、その修正をしているのだけれど…。今日の問題は私にとっては初めてのケースでした。そんなお話。

HPの中に各社の紹介のページがありまして、そこに問い合わせ用のmailtoを使ったリンクボタンが付いているんです。これを押しますとメーラーが立ち上がります。問い合わせをしたい会社のメールアドレスがアドレス欄に、件名も自動で入れるのです。ところが、各社に実験でメールを送った中で、1社から「件名が文字化けしています」との連絡が入ったんですよね。

私の開発環境はWindows98SE、Firefox2.0と化石みたいなのだけれど…文字化けは起きておりませんでした。作成しているサイトはUTF-8です。もしかしたら、その辺りが原因なのか?と思い、色々調べてみますと…Windows標準のメーラー「Outlook Express」では、mailtoで記述する件名あるいは本文に日本語が使われていると文字化けする場合があるらしいんです。これは私が知らなかっただけで、ずいぶん前から知られていた問題のようです(笑)。

回避するには日本語の文字列をURLエンコードする必要があります。そこで作成しているサイトに合わせてUTF-8で件名の文字列をURLエンコードしてみたのだけれど…。私の環境では問題なくとも、やはり「Outlook Express」では文字化けします。

そこで、試しにshift-jisでURLエンコードをかけてみると…「Outlook Express」での件名の文字化けが解消されました! しかし今度は私が使っているメーラー「Thunderbird」で件名が文字化けしてしまう(泣)。

まさにあちらを立てればこちらが立たず…の状況。抜本的な解決方法としては…完全にshift-jisでページを作成するか、mailtoを使わずに問い合わせフォームなんかを作れば良いのだろうけど、今さらそれはやりたくないので、さらに調べてみました。

すると…javascriptでユーザーエージェントを取得し、それによってmailto内の件名のURLエンコードの文字コードを変換してやればかなり解決できる…というようなことが分かりました。

今回作成しているサイトはPHPにて書いておりますので、javascriptではなくPHP内で処理することにしました。ユーザーエージェントの中に「Macintosh」または「Firefox」の文字列があったなら、URLエンコードの文字コードはUTF-8に。それ以外の場合はURLエンコードの文字コードをshift-jisにするようにしたら…一応の解決をみました。

ただし、一番の問題はユーザーエージェントで取得できるのは使っているブラウザとOSであって、メーラーではないので完全な解決には至っていないことでしょうか。例えば…WindowsでFirefoxを使い、メーラーがOutlook Expressの場合はアウトかも(笑)。何か良い方法が他にあれば良いのですけれども。


imgタグの属性値、解釈の違い…

仕事で取り組んでいるサイト作成のお仕事がまもなく終わります。現在は各ブラウザでの確認を行っております。手元にすぐ用意できるiPhone、iPadでまずは確認。一部明朝で表示したいところあるのだけれど、iOSのフォントの問題でそこはゴシック体のままでした(笑)。そんなお話。

フォントがないのだから、まぁこれは良しとして…。問題なのは今回の仕事がレイアウトがすでに決まっているものを再現したデザインであり、フォントの大きさも指定しているということ。iOSで使われているフォント(おそらくヒラギノ)の文字間隔などの影響か、レイアウトが崩れている部分があります。ここは改行を入れたり、文字を増減して微調整しました。

次はWindows XP以降でチェックしたいなぁと思っていたら、ちょうど私物のネットブックを会社のサーバーに接続したいという人がおりまして。一時的にネットブックを預かりました。OSはXPでブラウザはIE8です。さっそくサイトの確認をさせてもらうと…一部の画像が表示されないトラブルが発生。

Firefox2とiOSのSafariでは問題がなかったのだけれど…調べてみたらimgタグの属性が原因でした。PHPでソースを書き出す際、画像サイズを登録指定ある場合はimagタグのwidth属性とheight属性に数値を書き込んでおりますが、一部の画像ではサイズを登録せずそのまま出力しているので属性値が「width=”” height=””」になっていたんです。

で、これまで試したブラウザ(Firefox2、iOSのSafari)では属性値が空の際には指定していないものとして処理していたのだろうけれど、IE8では属性値を0(ゼロ)として扱う仕様になっているのだと思います。

サイト作成の途中まではIE6でもチェックしていのただけれど、今回問題が起きたのはIE6では未チェックの部分でした。IE6で確認したら、IE8と同様に画像を表示しませんでした。

この件は当然、機知の問題なのだろうけど、今回についてはめんどうだったしすぐに解決したのでネットでは調べておりません。まぁ、普通は属性を記述しながら数値を書かないなんてことはないと思うので、こんなおかしな失敗をすることはないですよね、きっと(笑)。


固定ページ

最近の投稿

カテゴリー





カレンダー

2024年3月
 123
45678910
11121314151617
18192021222324
25262728293031

過去の日記はこちら

キーワードで検索