カテゴリー: HTML/CSSメモ

サイト関連での覚え書きなど。

投稿日:

SEO対策・ページスピード改善に関してメモ書き

これをしたらページスピード改善した～！という内容メモです。

  1. 小分けにしていたCSS6つを2つまで統合。ページスピードインサイトでいう「クリティカル リクエスト チェーンを回避してください」が該当しそうだったので対応してみた所、微かにページ速度改善したっぽい。javascriptも同様にできそう。
  2. Total Blocking Time対策。tableタグをめちゃくちゃ多用していたページはTotal Blocking Timeが大幅に増えていたのでdl/dt/ddのタグでtableのような表を作り対応。これは大幅に削減につながったかも。
  3. 「画像要素で width と height が明示的に指定されている」や「レイアウトが大きく変わらないようにする」の部分に該当。画像の縦横比は良く変更するのでなるべく<img>タグにwidth/heightを入れる手間は減らしたいけどどうにかしたかったので、共通で入るサイズのバナーはaspect-ratioで指定。CLS値改善効果あり。
  4. javascriptで後回しで良いのはdeferもしくはasync追加とか。コレはアチコチのスピード改善サイトに書いてあったので言わずもがな感。
  5. flexslider2のCLS値に関して。どう足掻いてもスクリプトで後からサイズ調整・呼び出ししてる動作の都合があるので、CSSのアニメーション使ってスライダー範囲を最初opacity：0にして、ある程度の秒数後にフェードインするようにopacity:1のアニメーション追加調整。CLSが完全に0になる。ヨシ🐈👉
投稿日:

サイトのレスポンシブ化について

※新卒社員の研修用に2013年頃作ったもので一部内容が古い可能性があります。

2022年でもサイトがレスポンシブまたはスマホ非対応だと、ウワ～！改修楽しそう～！と思うけどページ数多いとそんな簡単にできないのもわかる。

とりあえずレスポンシブについては下記になります。

レスポンシブWEBサイト
パソコン・スマホなど、どれで見てもサイトを調整して見やすくなっているサイト
下記のイメージは「レスポンシブ対応してないサイト」と「対応しているサイト」

スマホ化もしくはレスポンシブ化の大まかなイメージ

とりあえずのスマホ化や頑張ってレスポンシブしたい場合のまずは3パターンあるメモ

①PC用とスマホ用ページを作ってしまい、プログラムで自動的に移動させる方法
②ページ自体は１つ、cssを２つ用意しクリックしてcssを選ぶ方法
③１つのページと１つのcssですべてを作る方法（横幅で切替）

①に関しては通常のWEBサイトでは使わないと思います。
主に用途としてはプログラムを突っ込みにくい楽天やヤフーのショッピングサイト系ぐらい…だった（過去形）。楽天は今年2022年4月～来年にRMSでしかスマホトップページ制作できなくなるのでこれはほぼ過去の手段になっていく筈。

②・③に関してはサイトの仕組みや利用者に合わせてというところがあります。
サイト訪問者の年齢が高い場合、PCサイズとスマホサイズでデザインが変わると「アレはどこいった！？」って混乱して問合せしてくる方もいます。可愛いね。
実際に所属してる会社のサイトも②のパターンがあったり、そうじゃないサイトに関しては③にしてたりなので適宜合わせるしかない。css切替のプログラムは多分検索すれば優しい人のがある。
一般的には企業系サイトが②で、ブログサイトとか若者向けだと③が多い印象。

ここから下は③の方法でレスポンシブ対応していく場合の手順です。

レスポンシブ化の手順①viewportのmetaタグを入れる

はじめに、画面の幅を認識するviewportのコードをヘッダーに入れる必要があります。

コードを入れる事によって、そのページが今画面がどんなサイズか勝手に考えてくれます。

ヘッダー部分に入れるコードは大体下記のような感じになります

<meta name=”viewport” content=”width=device-width,user-scalable=no,maximum-scale=1″ />

<head></head>の間であればどこでも大丈夫ですが、できればcssよりも上が望ましいです。

レスポンシブ化の手順②ブレイクポイントを設定する

次にCSSでブレイクポイントを設定します。主に書き方は下記のような形で、〇px以上の時～とか〇px以下の時～とか色々あります。サイトに合った書き方があるので正解はないです。

@ media screen and (max-width:640px) {        }

@ media screen and (min-width:480px) and (max-width: 767px) {        }

@ media screen and (orientation:portrait) {            }

あとはもうCSSを書き込んでいくだけです。

既存のサイトをレスポンシブに改修していく場合PC用のCSSはすでにあると思うので、@ media screen and (ほにゃらら) {        } の{　}の中に同じクラスのままスマホサイズの時の表示内容を書くだけになります。

例としては、PCでは.textbox{padding:10%;}でも、スマホでは.textbox{padding:1%;}とかにするような感じ。

※レスポンシブサイトを作るうえでの注意点

「パソコンでは見せたくない」「スマホではこれはジャマ」となった時は「display:none;」のクラスを用意しておこう。

フォントサイズは部分部分で設定せず、大枠でサイズを決めた方が良い スマホ用とパソコン用で文字サイズの標準は大きく変わります。