固定幅のウェブサイトをモバイルフレンドリーにする

最終更新日：2020年5月22日

モバイルフレンドリーの構築。 グラフィックデザイナーおよびWeb開発者としての私の最大の心配事は、InternetExplorerでCSS機能を作成することでした。 IEはまだ後部の痛みであるだけでなく、今では多くの画面サイズとオペレーティングシステムについて心配する必要があります。

モバイルがデスクトップブラウジングを追い抜く時が来るでしょう。 モバイルは私たちの日常生活の中で非常に目立つようになったため、Webデザイナーがすぐに結果を必要とする場合があります。 あなたが静的なウェブサイトをモバイルフレンドリーなWordPressテーマに変換する時間がないデザイナーやプログラマーの一人なら、私の友人に希望があります。 モバイルデバイスですべてのコンテンツを表示する場合は、CSSとHTMLを少し最適化するだけでこれを実現できます。

http://www.smartinsights.com/wp-content/uploads/2017/03/Mobile-share-of-online-time-percent-2017.png

comScoreによると、世界的に、モバイルデバイスはオンラインで費やされた時間の半分以上を占めています

モバイルフレンドリーまたはレスポンシブWebサイトには、視聴者のデバイスに合わせてWebサイトの幅を自動的に構成する機能があります。 水平スクロールバーは、レスポンシブデザインではノーノーです。 モバイルデバイスで現在のWebサイトを表示していて、携帯電話またはタブレットの下部にスクロールバーが表示されている場合は、Webサイト（またはサイトの要素）がモバイルフレンドリーではない可能性があります。 これらの水平スクロールバーはユーザーエクスペリエンスを台無しにし、おそらく戻るボタンをクリックします。 人々は自分のデバイスを垂直方向にスクロールすることに慣れているため、ユーザーがコンテンツを表示するために垂直方向と水平方向にスクロールしなければならないことに気付くと、不快になり、サイトを離れます。

これからはすべてが包括的になります。デザインWebサイトには、すべてのCSSクラスとIDがあります。つまり、すべてを意味します。

ヘッダーとメニューのdivからフッターの<p>タグまで。 画面の幅に基づいて、これらすべてのサイズを調整する必要があります。 要素をCSSでターゲットにできると、移動、サイズ変更、スケーリングがはるかに簡単になります。

CSSメディアクエリは、思ったよりも使いやすいです。

メディアクエリが初めて私の注意を引いたとき、それはプログラミング言語の一部であり、CSSの形式ではないと思いました。 それが本当に何であるかを知ったとき、私は安心感に打ち勝ちました、そして私はそれ以来私のすべてのウェブプロジェクトでそれを使用しています。

メディアクエリは基本的にCSSルールです。 画面がこの幅の場合は、このCSSをこれらの要素にのみ適用してください。 以下をご覧ください。

したがって、上記のコードは、ユーザーの画面の幅が100pxから699pxの場合、ボディの背景色を青に変更することを単に示しています。 ここで、サイト内のすべてのdivとspanにラベルを付けることが重要になります。 適切なタグ付けを行うと、さまざまな画面幅でこれらの要素を簡単に操作できます。

Css-tricks.comには、クイックリファレンスとして多くのモバイル幅がリストされています。

CSSコードサンプル

/ * ———– iPhone 5および5S———– * /

/*縦向きと横向き*/

@mediaのみの画面

および（min-device-width：320px）

および（max-device-width：568px）

および（-webkit-min-device-pixel-ratio：2）{

/*****ここにあなたのコード*****/

}

Galaxy、HTC、Appleの電話用のメディアクエリコードはもっとたくさんあります。 さらに、Ipad、Galaxy、Nexusタブレットの幅が一覧表示されます。 このコードをサイトのCSSファイルに入力し、空白のCSSブラケットに独自のコードを入力するだけです。 終わり！

あなたのサイトは反応が良いですが、それでも完全に正しく感じられません

メインメニューのように、サイトの一部の要素がモバイルデバイスでかなりのスペースを占めることに気付くかもしれません。 応答性を高めるために、メニューの<li>タグに「float：none」を適用した可能性があります。 しかし今、メニューはあなたのサイトの上部にある膨大な量の不動産を占めています。 メインメニューをjQueryおよびCSSメディアクエリを使用してドロップダウンメニューに変換する必要があります。 Css-tricks.comでは、これを行う方法についても説明しています。

また、特定の要素を重要でないと見なす場合もあります。これらの要素は、デスクトップデバイスとモバイルデバイスの両方にあります。 。 あなたはCSSを使用してそれらを取り除くことができます：

これらのサイト調整は、Webサイトを非常に長くし、ユーザーに多くのスクロールを強いる傾向があります。 これは、アンカーテキスト（目の見えるユーザーの場合）またはスキップリンク（スクリーンリーダーの場合）が友達になる場所です。

アンカーテキストはクリック可能なリンクであり、ユーザーはスクロールせずにWebページの特定のセクションにスキップできます。 これは、モバイルフレンドリーサイトに便利な方法です。 以下のコードは、アンカーテキストリンクの例です。

<a href=”#skip”>メインコンテンツにスキップするにはここをクリック</a>

<a id=”skip”></a>メインコンテンツはここから始まります

スキップリンクは主にスクリーンリーダーに使用され、障害を持つユーザーがメニューナビゲーションなどの繰り返しのWebコンテンツをバイパスまたはスキップして、興味のある情報に直接アクセスできるようにします。

スキップリンクに「display：none」のCSSルールがある場合、スクリーンリーダーのリンクは「アクセス不能」になります。 したがって、これを回避する方法は、リンクを画面外に配置することです。そうすれば、スクリーンリーダーは引き続きリンクを認識し、新しくモバイルサイトをスキップできるようになります。

つまり、これが固定幅のWebサイトをモバイルフレンドリーなWebサイトにすばやく簡単に変換する方法です。 また、すべての画像を「幅：100％;」に設定することを忘れないでください。 高さ：自動。」 ピクセル単位で設定された幅を持つ画像、div、またはスパンは、モバイルデバイスの水平スクロールバーに作成されるため、メディアクエリを使用して、さまざまなデバイスのパーセンテージまたは異なる幅に設定することを忘れないでください。

少し時間がかかるかもしれませんが、私を信じてください、一度それを学んだら、あなたはそれを永遠に使うでしょう。 最新のWordPressまたはJoomlaレスポンシブテーマやテンプレートでさえ、思い通りに見えるようにするために少しのドクターが必要なため、これまでに行うすべてのWebサイトでこの方法を使用します。 これは特に当てはまり、モバイルデバイスの市場は絶えず変化しています。

-シニアグラフィックデザイナー、Izzak Hale