Home > 未分類

未分類 Archive

レスポンシブに初挑戦

スマートフォン用には基準となる文字サイズをbodyに記述。
16pxあたりに指定してナビゲーション以外のコンテンツ領域などのmargin paddingはem指定で余白を取る。
(16pxに指定している場合は1em=16pxで、16px × ○em=□pxという具合)

どこまで対応するかによるけども、
とりあえず普通に共通のCSSを読み込ませて、そのCSSファイルの中に以下を記述。

@media screen and (max-width: 767px) {
  /* 表示領域が767px以下の場合に適用するスタイル(スマートフォンやタブレット向け) */
}

@media screen and (min-width: 768px) {
  /* 表示領域が768px以上の場合に適用するスタイル(PC向け) */
}

あとはソースをそれぞれ書いていく感じ。
ピクセル数は適宜適用したいwidthごとに分けて行く感じ。

ワンソースだと大変なので読み込みを分けたほうがステップ数が減らせるので
メンテナンス性も高いというところかなと思います。

あと、開発環境ではveiwport resizerがとっても便利でした。
http://lab.maltewassermann.com/viewport-resizer/

「CLICK OR BOOKMARK」でボタンのところをアドレスバーの下のブックマークしておき、
ブラウザでコーディングをしているページを開いている状態にします。
そのあとこのボタンへのブックマークをしたブックマークバーの中のブックマークをクリックするだけで、
画面サイズに応じたブラウズをシミュレートしてくれるという超便利モノ。

レスポンシブをレスポンシブルと言っている人を散見しますが、単語の意味合いが全く違ってくるので混同しないようにした方がよいです。Javascriptをジャバと言ってる人も同様に。そんな間違いをしていたらその職業の人として恥ずかしいです。
何年も前にアクセス解析についてよく分かってないくせに知ったかをして、「ユニークユーザー」を「ユニークな操作をするユーザー」だと発言してしまっていたのは、今では顔から火が出るほど思い出したくないので内緒(失笑・バカだなぁ~
ともかく知ったかは良くないので気をつけましょう!

ちくほ牛ファンクラブ inハウステンボス

昨年の11月のことなので遡ってしまいますが、ちくほ牛ファンクラブは
ハウステンボスのイベント「第2回ご当地グルメ王者決定戦」
http://www.huistenbosch.co.jp/event/gourmet_champ2/ に参加してきました!

ご当地グルメ王者決定戦 ハウステンボス

今回はなんとA5ランクのお肉!

A5ランクの黒毛和牛 筑穂牛

グルメイベントは地元佐世保の方が年間パスポートで入場されている方が多かったです。

そして、イベント終了後は夜のハウステンボスを堪能してきましたー。
夜のオープンテラスのバーではピアノやヴァイオリンなどの生演奏を聴きながらお食事が出来ました。

ハウステンボス

ハウステンボス

また、生演奏の後は仮面とマントを貸し出しがはじまり、仮面舞踏会のようなダンスイベントに発展!ハウステンボスってこんな楽しみもあったのか!と気付かされました。むしろこっちをメインで来る人も多いんじゃないでしょうか。ハウステンボスは夜まで楽しむべき。いや、夜にこそ来るべきじゃないかと。

ハウステンボス

イベント自体は雨が降ったりで大変でしたが、ハウステンボス楽しかったです!

コンテンツに対する要望をお待ちしてます。

バイクの「こんな情報欲しい」「こんな写真が見たい」とか、
こういうJavascriptを取り上げて欲しいとか、
ブログの内容(コンテンツ)に対する要望をお待ちしてます。
出来る限りリクエストには応えようと思いますので、
要望が有る方はコメント欄か、トップページのメールアドレスよりリクエストください。

ホーム > 未分類

Search
Feeds
Meta

Return to page top