レスポンシブwebデザイン注意すべきポイント

先日、「HOW TO MAKE A WEBSITE REAPONSIVE」というタイトルのツイートを見つけました。

webサイトをレスポンシブにする上で、16(くらい)の注意点が挙げられていました。
基本的な内容ですが、大事なことが書かれていたので英語の勉強も兼ねて翻訳してみました!

In order to make a RWD, you just need to consider one thing.

"Ability of content to fit inside any device that look good and it will be for user to interact with that"

{ 2 / 16 }

RWDを作るために、あなたはただ一つのことを考慮する必要があります。
「見栄えの良いデバイスにコンテンツを収めることができ、ユーザーがそれを操作できるようになります」

Responsive web design is not a kind of program or framework. We can say it's a combination of various concepts using which we try to make our web page look good on all devices

The great thing is that you can achieve RWD using HTML and CSS only

{ 3 / 16 }

レスポンシブウェブデザインは一種のプログラムやフレームワークではありません。これは、すべてのデバイスでWebページの見栄えを良くするために使用するさまざまな概念の組み合わせであると言えます。
すばらしいのは、HTMLとCSSのみを使用してRWDを実現できることです。

First and foremost thing in order to make RWD is viewport element.

It forces page to follow the screen-width of the device.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

{ 4 / 16 }

RWDを作成するための何よりも重要なことは、ビューポート要素です。
ページをデバイスの画面幅に強制的に従わせます。


The second important point to note is that don't use large fixed width or height element.

It can cause trouble. Let's say an element having width 500px but user is viewing on a device having width smaller than 500px

In such cases, use min-width or max-width

{ 5 / 16 }

注意すべき2番目の重要な点は、大きな固定幅または高さ要素を使用しないことです。
トラブルの原因になります。幅が500pxの要素で、ユーザーが幅が500px未満のデバイスで表示しているとします。
このような場合は、min-widthまたはmax-widthを使用してください

Use HTML tag

The HTML element allows you to define different images for different browser window sizes.

{ 6 / 16 }

HTMLのタグを使用する
HTMLの要素を使用すると、ブラウザのウィンドウサイズごとに異なる画像を定義できます。

Responsive text size

Although you can make text responsive using media queries but you can also use "viewpoet" width as well.

h1 {
  font-size: 10vw;
}

{ 7 / 16 }

レスポンシブテキストサイズ

メディアクエリを使用してテキストをレスポンシブにすることはできますが、「viewpoet」幅を使用することもできます。

Try to use Layouts

Using Grid or Flex layout always beneficial in order to make a web page responsive. Both these layout are not hard to learn. Try to use them.

{ 8 / 16 }

レイアウトを使用してみてください

グリッドまたはフレックスレイアウトを使用すると、Webページをレスポンシブにするために常に有益です。これらのレイアウトはどちらも習得するのは難しくありません。それらを使用してみてください

Use box-sizing: border-box

Don't know you consider with point valid or not but small thing can make big impact.

Box-sizing: border-box; forces an element to adjust it's padding and border inside width and height of that element.

Even small 4px border can damage the responsiveness. Hence I always consider box-sizing border-box for RWD.

{ 9,10 / 16 }

ボックスサイズを使用する:border-box

ポイントが有効かどうかはわかりませんが、小さなことが大きな影響を与える可能性があります。

box-sizing:border-box;
要素に、その要素のパディングと境界線の内側の幅と高さを調整するように強制します

小さな4pxの境界線でさえ、レスポンシブを損なう可能性があります。したがって、RWDではボックスサイズのボーダーボックスを常に検討します。

Media Queries are saviour

Media query is a rule to include a block of CSS properties only if a certain condition is true. It is very useful in order to make a RWD.

{ 11 / 16 }

メディアクエリは救世主です

メディアクエリは、特定の条件が真である場合にのみCSSプロパティのブロックを含めるルールです。 RWDを作るのにとても便利です。


Here is the basic syntax of media query

Check out the detailed thread on media query Down-pointing triangle

{ 12 / 16 }

メディアクエリの基本的な構文は次のとおりです

@media screen and (max-width: 480px) {
  .element {
    width: 100px;
  }
}

Use "auto" in media

Almost 99% a web page contains images or videos. And in order to make them responsive, use "auto"

If the width property is set to a percentage and the height is set to "auto", the image will be responsive

{ 13 / 16 }

mediaで「auto」を使用する

ほぼ99%のWebページに画像またはビデオが含まれています。そして、それらをレスポンシブに対応させるために、「auto」を使用してください

widthプロパティがパーセンテージに設定され、heightが「auto」に設定されている場合、画像はレスポンシブになります。

In order to improve further, you can use max-width in image so that quality of image will be persist. After all it can also be considered as responsive

{ 14 / 16 }

さらに改善するために、画像の最大幅を使用して、画像の品質が維持されるようにすることができます。結局のところ、それはレスポンシブであると見なすこともできます。

Use frameworks if possible

Sometimes it might be a tedious task to handle responsiveness if you're wirting pure CSS. Try to use frameworks because they can save a lot of time designing a responsive website

{ 15 / 16 }

可能であればフレームワークを使用する

純粋なCSSを使用している場合、レスポンシブを制御することが面倒な作業になることがあります。レスポンシブウェブサイトの設計に多くの時間を節約できるため、フレームワークを使用してみてください。(Tailwindなど...)



基本的な内容でしたが、再確認できて良かったです。
英語も楽しいですね、これからも細々と勉強を続けていこうと思います。

今回は以上です!

↓↓私の師匠、もりけんさんの武骨日記。問題集、要チェック

kenjimorita.jp