レスポンシブウェブデザインを作る6つ方法①

レスポンシブウェブデザインを作る6つ方法①

2019.01.07

1.シンプルにするように
レスポンシブウェブデザインを作る場合、最初に考えなくてはいけないのはシンプルなデザインです。必要ないものは入れないこと。またはフラッシュやエフェクト(パララックスなど)などを入れない方が良いでしょうか。htmlを書くときもきれいに、必要なhtml コードだけをします。CSSはインラインで使用しないおきましょう。
レスポンシブウェブデザインは、さまざまなデバイスでWebサイトを見やすくあることができますが、レイアウトに制限もありますので、クライアントが理解できるように説明することが必要です。 この部分ができる、この部分はできない、出来ない部分はなぜ出来ないかを説明しなければなりません。

2.スマートホンから始めます。
次のステップは最初にスマートホンから始めることです(モバイルファースト)。この部分は大切で、ウェブサイトの基本になります。ユーザーやクライアントはがPCのデザインのイメージに固執しますので。最初にPCのデザインを始めることをやめた方が良いでしょう。コードが重複する可能性もあります。
このステップのコツは、PCを忘れることです。小さな画面(横300px)で、ユーザーが使いやすいようにユーザーインターフェイスを設計します。本当に必要な要素だけを入れましょう。必要ないもの、例えば、広告などは入れない方が良いでしょう。

簡単なやり方をご紹介します。例えばiPhone 6/7/8(10 x17.6 cm)の紙を作りましょう。そして、各コンテンツの内容が書かれた紙を用意して、その枠に置きましょう。そして、このWebサイトをこれまで一度も訪れたことがないユーザーになりきてチェックしてみてください。このコンテンツの位置づけ、わかりますか?、使いやすいですか?、満足するまで調整しましょう。

スマートホンのスケッチできたら、htmlを作成してみましょう。このステップでは、スケッチを見る必要はありません。それがどんなコンテンツを持っているか想像しましょう。画面に入れるものを HTMLで書いてみましょう。
HTMLを書いたあと、プレビューしてみましょう。作成したコンテンツが表示されます。順番や強弱を過ごしずつ調整しましょう。それにセクションの内容とhタグを忘れないでください。


とりあえずどのようなコンテンツを用意したかに基づいてHTMLを書きましょう。表示することを気にしないでください。

3.相対サイズ
htmlが問題ない場合次は、style sheetsを作成しましょう。このステップは自分が作ったスケッチ(2番の内容)を確認しながら、プレビューが下書きと同じようにスタイルシートを作成します。重要なのはrelativeを設定する必要です。

最初はレイアウトrelativeを設定してください。それはFluid Layoutsというレイアウトです、この方法は%でレイアウトを設定して、昔のようにPXとして固定されていません。

多くの人がボックスモデルの問題があったではないでしょうか?例えば2つのコラムがあって、想像してください。60%と40%を定義するコラムと仮定して、marginか paddingを入れたら、 2列が100%を超えてしまう問題です。CSSルールを下に置くことで解決されます。



次に、その画像のも%で相対的にサイズ指定して、画像のサイズも%で指定し、次に、画像を大きくしたら、max-widthを画像の実際の幅として設定します。画質が悪くならないように。

もう一つ%指定にする必要があるのはフォントサイズです。最初に本体のフォントサイズ(body)を100%に設定すると、本体内のすべての要素のフォントサイズが100%になります。特定の要素のフォントサイズを指定したい場合はem単位を使用しましょう。このem単位は継承サイズを表します。この例では100%と定義しています。サイズを2 emに設定するとフォントは次のように200%になります。


ピクセルサイズの代わりにrelativeを使う。

また次回残りの3つをご紹介致します。


Top