2015年5月30日(土) 14時05分13秒 [仕事]

レスポンシブWebデザインでのブレイクポイントの決定方法

レスポンシブWebデザインを採用してCSSを記述するとき、まずは「ブレイクポイント(＝デザインを分ける境界点)をどこに設定するか？」を決める必要があります。でも、閲覧者の画面サイズ(ブラウザのウインドウサイズ)なんて千差万別なわけで、「ここをブレイクポイントにすれば良い」という唯一の解なんてありません。
そうは言っても、どこかをブレイクポイントにするしかないわけで、「どうやってブレイクポイントを決めれば良いか」を考える必要があります。

そこで、ブレイクポイントの決め方を解説した記事をAll Aboutで公開しました。

◆レスポンシブCSSで使うブレイクポイントの決め方（＠All About ホームページ作成）

この記事では、「代表的なモバイル端末の画面幅」と「最近の画面(ディスプレイ)解像度シェア」の2点を参考にして、ブレイクポイントを決定する方法を解説しています。

最近のタブレットには大型な製品も出ているので、小型のノートPCとタブレットを区別するのはちょっと難しい気がします。……となると、「横幅何px以下をモバイル端末」だと解釈して、「横幅何px以上をPC環境」だと解釈するかという点に結構迷ってしまうのですよね。

そんなブレイクポイント選定の1つの解決策として、ぜひ参考にしてみて下さい。

2015年5月17日(日) 14時27分54秒 [小説]

ミスマルカ興国物語が第12巻で完結

毎巻楽しみにしていた「ミスマルカ興国物語」が第12巻でとうとう完結。
読了しました。おもしろかったです。
第2部完ということで、物語自体が完全に終わったわけではありませんが、続く第3部があるとしても作品タイトルは変わるだろうとのこと。

第1巻の刊行は2008年だったんですねえ。7年前とは。第10巻の後に出た「X」や「ミスマルカ興国しない物語」も含めると全14巻。
最初の頃は、当然マヒロ王子はパリエルとくっつくんだろうと思っていたんですが、途中から予想外の展開になっていきました。
パリエルはこれからどうするのかな……？

同時並行で刊行されていた「レイセン」も含めて、他のシリーズと世界観は繋がっていますから、集大成としてそのうち第3部的な立ち位置の話も読めるのかも知れません。
それも楽しみにしておくとします。

■ミスマルカ興国物語（＠Amazon.co.jp）

2015年5月10日(日) 12時54分33秒 [仕事]

画像をブラウザの幅に自動で合わせる際、拡大しすぎ・縮小しすぎを防ぐCSS

レスポンシブ・ウェブデザインを採用しているウェブサイトに画像を掲載する場合、様々な画面サイズでも問題なく見えるように若干の工夫が必要です。
例えば、画面サイズ(ブラウザのウインドウサイズ)に合わせて、自動的に掲載サイズを変化させる、とか。
画面サイズに合わせて画像の掲載サイズを自動追随させるのは簡単なんですが、このとき、「縮小され過ぎる」・「拡大され過ぎる」という問題もあります。

• 「画像をウインドウ幅に合わせて表示したいが、本来の大きさより拡大はしたくない」
• 「画像を画面幅に合わせて表示したいが、極端に拡大されたり縮小されたりするのは避けたい」

……のような、自動で画像の掲載サイズを変化させたいんだけど、それでも条件によっては変化に制限を設けたい、という場合があるんですよね。
私の場合は、「基本的には本来のサイズで掲載しておきたいものの、画面が狭い場合には自動的に縮小させたい」という場面が結構あります。

そんな、画像の表示サイズを自動で閲覧環境に合わせたい場合に遭遇する、ちょっとした問題を解決するためのCSS記述方法をAll Aboutで紹介しました。

◆画像を画面幅に合わせる際、拡大/縮小しすぎを防ぐCSS（＠All About ホームページ作成）

複雑なテクニックは一切なく、ほぼ1～3行(CSSのプロパティ1～3個)程度で記述できる簡単なものです。
基本的な話なので、覚えてしまえば、いろいろ応用が利くと思います。

2015年5月 8日(金) 12時02分19秒 [Web関連]

ウェブページ上に表示されている画像のURL等を知ることなく簡単に保存する方法

ウェブページ上に表示されている画像を、ローカルに保存したいと思うことが多々あります。
たいていの場合は、画像を右クリックするなどして「名前を付けて画像を保存」等の機能を使えば良いんですが、その方法では画像を保存できない場合もあります。
例えば、Twitter上で「複数の画像が含まれているツイート内の画像」を保存したい場合とか。
特に、ページデザイン上の都合などで、画像を背景画像として掲載されている場合なんかは、その画像を直接マウスで選択しにくい(できない)場合が多く、保存しにくいです。

そんなときに便利なのが、ブラウザに搭載されている「画像一覧」機能です。
この機能を使えば、ウェブページ上に表示されているあらゆる画像を、簡単にローカルに保存することができます。

Firefoxの「ページ情報」機能を使って、画像を保存する方法

例えば、Firefoxでは以下のように操作します。

1. 保存したい画像のあるページを開く

まず、保存したい画像が使われているウェブページをFirefoxで表示します。

2. ページの情報を表示

ウェブページ内の空いている領域を右クリックして、メニューから「ページの情報を表示」をクリックします。(下図参照)

この「ページの情報を表示」項目は、右クリックした場所によっては現れません。
テキスト部分や、何もない空き領域部分を右クリックすると表示されます。
どうしても出せない場合は、[Alt]キーを1回押してFirefoxのメニューバーを出し、「ツール」→「ページの情報」項目をクリックすれば良いでしょう。

3. 画像一覧が出せる「メディア」をクリック

下図のようなページ情報ウインドウが開いたら、上部にある「メディア」ボタンをクリックします。

すると、この画面内には、そのウェブページ内で表示に使われているあらゆる画像の一覧がリストアップされているのが見えるハズです。

4. 保存したい画像を探して、「名前を付けて保存」ボタンをクリック

ウェブページ内に表示されている画像のリストを1度クリックしてから、キーボードの[↓]キーを押していくと、すべての画像を順にプレビューできて便利です。
ここから、保存したい望みの画像を探します。
見つけたら、プレビュー領域の右上にある「名前を付けて保存」ボタンをクリックします。

これで、望みの画像をローカルに保存できました！
上記の手順であれば、ウェブページ上で選択できない画像でも、わざわざHTMLソースやCSSソースを覗かなくても、簡単に保存できます。

便利！(^_^;)

2015年5月 6日(水) 11時30分55秒 [コミック]

「明日にはあがります」→「小光先生の次回作にご期待ください」

遅ればせながら「小光先生の次回作にご期待ください」第1巻を読了しました。
主人公の漫画家(小光先生)の居たたまれなさが相変わらず面白いです。(笑)

これは、全5巻の「明日にはあがります」の続編シリーズ。(右写真上側5冊)
「明日にはあがります」では連載漫画家だった小光先生ですが、打ち切りになってしまったところで前シリーズが終わり、タイトルが変わって「小光先生の次回作にご期待ください」になりました。(^_^;)
これ、この「次回作にご期待下さい」というタイトルで続く限り、小光先生は連載を獲得できないってことんじゃ……？(^_^;;;

前シリーズからずっとですが、この小光先生の言動がこまごまと痛くて面白いです。(^_^;;;
たまに「あいたたたたた……」と自分の身体のどこか(心？)も痛くなります。(^_^;;;
松井くん（小光先生アシスタントで今シリーズで漫画家になった女性）と長く続いて欲しい。(笑)

■小光先生の次回作にご期待ください（＠Amazon.co.jp）
■前シリーズ：明日にはあがります（＠Amazon.co.jp）

2015年5月 4日(月) 12時09分48秒 [コミック]

ドローンといえば、ねこむすめ道草日記(^_^;)

ホワイトハウスの敷地に突っ込んだり、首相官邸の上空を飛んだり、最近ニュース記事で「ドローン」という単語をよく目にします。
ここでのドローンとは、遠隔操作だったりプログラミングだったりで無人飛行する小型の飛行物体のことですが、私にはどうにも「ねこむすめ道草日記」の変身効果音「どろろ～ん」が思い出されて仕方がありません。(^_^;)

▲どろろ～ん (ねこむすめ道草日記 第7巻)

「ねこむすめ道草日記」は、右上写真の通り既刊12巻です。おもしろいです。
人間社会に半分くらい溶け込んでいる妖怪の日常ほのぼの話。だいたいどの妖怪も人型に変身できます。普段は、猫だったり犬だったりカッパだったり鳥だったり。姿を変えるときに、「どろろーん」という効果音が出ます。(^_^;)
ドローンのニュース記事を読む度に、これが思い出されます。(^_^;;;

「ねこむすめ道草日記」、おすすめです。
黒菜(主人公の猫娘)の天真爛漫ぶりが良いです。
次の第13巻はいつかな……。たぶん、夏くらいには出るんじゃないかと思っているんですが。楽しみです。

■ねこむすめ道草日記（＠Amazon.co.jp）

2015年5月 3日(日) 11時16分29秒 [仕事]

ページの中身が少ない場合でも、フッターをウインドウ下部に固定する方法

CSSを記述するとき、widthプロパティほどにはheightプロパティを活用していない気がします。
widthプロパティが示す先に比べて、heightプロパティって何を示しているのか分かりにくいんですよね。(^_^;)
そのheightプロパティ(min-heightプロパティ)をうまく活用すると便利にレイアウトできる例の1つが、この「ページの中身が少ない場合でも、フッターをウインドウ下部に固定する方法」だと思います。

◆本文が短い場合でも、フッタを画面下部に表示する方法（＠All About ホームページ作成）

サイト内で共通するデザインとして、「背景色を付けたフッター」を用意している場合、ページの中身が少なすぎると、「フッター部分」がブラウザのウインドウ内の中央付近に見えてしまうことがあります。フッターなのに、末尾ではなく半ばに見えると、なんだか違和感があります。……よね？(^_^;)

そこで便利なのが、「ページの中身が少ない場合にだけ、フッター部分をウインドウ下部に固定するレイアウト手法」です。「フッターを常に画面下部に固定」するわけではありません。あくまでも、「ページの内容が足りない場合」にだけ、フッターを画面下部に表示します。
こう書くと、なんだか条件判定をしてレイアウトを分けるのかと感じるかも知れませんが、そんな手間は必要なく、ほぼCSSだけで実現できます。(※「ほぼ」と書いたのは、このレイアウトを実現するために、HTML側に手を加える必要がある可能性があるからです。CSSの記述だけでなく、HTMLの記述も必要かも知れません。どちらにしても、JavaScriptは不要です。)

この手のレイアウトって結構需要はあると思うんですが、実現方法はなかなか思いつかない気がします。(※私も自力で思いつけたわけではありません。^^;) 実現方法は意外と簡単ではあるものの、「途中に高さの指定がない要素が1つでもあると実現できない」という制約が非常にくせ者じゃないですかね？(^_^;)

というわけで、その「ページの中身が少ない場合でも、フッターをウインドウ下部に固定する方法」は、All Aboutで記事として公開しましたので、記事本文をどうぞ！
↓↓↓
◆本文が短い場合でも、フッタを画面下部に表示する方法（＠All About ホームページ作成）

2015年5月 2日(土) 12時11分28秒 [健康]

オキサロールは乾癬用の薬なのか

皮膚炎の治療ではずっとプロトピック軟膏を処方されていたんですが、昨年に一部は「乾癬」だと診断されまして、それ以降はトプシム軟膏とオキサロール軟膏を混合した薬も併せて処方されています。
で、今回の診察で、頭皮には軟膏は塗りにくく無駄が出る（薬が皮膚ではなく髪に付いてしまう）いということで、「オキサロールローション」という薬が処方されました。

トプシムというのは、それ以前にも少量を単独でもらっていたステロイド薬なんですけども、じゃあ、オキサロールって何だ？ と思ってググってみたところ、皮膚の角質を抑えて角化症の治療に用いる薬だと出てきました。

乾癬だと診断されたときに、「ビタミンDを混ぜると症状が抑えられるから」みたいな感じの説明で、トプシム軟膏＋オキサロール軟膏の混合薬が処方されたんですけども、なるほどこの「ビタミンD」というのがオキサロールなんですね。先のサイトでも、「活性型ビタミンD3には、皮膚が作られる周期を正常化し、角質が多くなるのをおさえる作用がある」と説明されていました。

今回のオキサロールローションというのは、その乾癬用の薬の液体版なので、つまり、頭皮の赤くなっている炎症部分も「乾癬だ」という診断だったのか、と今更気付きました。(^_^;;;
乾癬だと言われるよりも前からずっと頭皮には一部に赤い炎症部分があったので、てっきりここは他と同じく、乾癬ではなくアトピー性皮膚炎なんだろうと思っていたのですが。^^;

2015年5月 1日(金) 11時22分08秒 [Web関連]

ブログをレスポンシブウェブ化

1ヶ月以上ぶりのブログになってしまいました。(^_^;)
先月は予想以上に忙しかったので、自分のウェブサイトにまでほとんど手が回らなかったので。

Googleが4月下旬から、「モバイル端末での検索結果では、モバイル対応しているウェブページを優先して表示する」とアナウンスしていたために、モバイル対応に関する問い合わせが結構ありました。すべての検索時に影響するわけではなく、スマートフォンで検索した場合の結果のみに影響するわけですが、それでもやはり気になる人々は多かったみたいですね。ニュースサイトでもそこそこ話題でしたし。

実はこのブログも、レスポンシブ・ウェブデザインを採用したデザインに進化しています。(^_^;)
まだ、うちのウェブサイト全体をレスポンシブにはできていないんですが。とりあえず、モバイル(というかスマートフォン)からの閲覧もそこそこあるブログを優先的にレスポンシブにしてみました。

前回のブログ記事をPCとモバイルで閲覧してみると、下図のように見えます。ブラウザのウインドウ幅を狭めてみてもモバイル版の表示を確認できますが。

Googleのモバイルフレンドリーテストでも、ちゃんと「モバイルフレンドリー」だと評価されます。
このサイト内の他のページでもちょくちょくリニューアル作業を進めてはいるんですが、自サイトのこととなると、仕事よりも優先するわけにもいかないので(^_^;)、作業速度は遅めです。
まあ、止まってさえいなければ、いつかは完了するかな……と思っています。(^_^;;;