skillup

技術ブログ

デザイン

pcサイトのコーディングに関しての注意点。

投稿日:

PCサイトのコーディングをしていて気づいたことなど。

最近スマホばっかりやっててPCサイトのコーディング自体ものすごい久しぶりでした・・・

  • 幅が縮むということを常に意識する。
  • 縮めた時にページが崩れたり、横に突き出さないかを要チェック。
  • 上記対策などはsectionブロックごとにmin-widthなどで最小幅を設定するのがおそらく良さげ。
  • 幅が足りない時の調整としてflex-shirnkは結構使える(基本1で設定すると思いますが・・)
  • キャッチ画像をどのように表現するかはかなり大切。
  • JavaScriptのアニメーションはかなり使う機会が多いので習熟しておくと良い。
  • 基本maring autoでセンタリングしているケースが多いと思うが、position abosoluteなどを使っているときはそこそこ面倒臭いので要注意。

思いついたものをとりあえず。

随時更新予定。

-デザイン
-

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

object-fitによる画像比率を保ったセンタリング

CSSでレイアウトを組むときにネックになるのが画像のレイアウトです。 と言うのも可変要素であり、幅を制御するのが難しかったりします。 参考リンク メインで使う画像のcssについて まあ縦長とか横長とか …

no image

CSSネタに関して

何回か書いてきたCSSのまとめネタ的なもの。 紙で印刷しておくと生産性が3倍ぐらいになる。思った以上にコーディングがしやすい。 良く使うユーティリティ系の操作をまとめる。ベンダープレフィックス以外にも …

no image

横からスクロール sidrの使い方

携帯サイトの場合、端末のサイズが小さいため、メニューなどはどう縮めてもやはり圧迫してしまいます。 そんなとき、クリックさせてスクロールさせるタイプであれば、場所が狭いことが気になりません。本日はそんな …

no image

CSSの概要 主に適用ルールについて

昨日までリーダブルコードを読みまして正しいコーディングについて書いてきました。 本日からは正しいCSSについてみていこうと。 Contents1 CSSとは?2 CSSの書き方3 CSSの挙動4 プロ …

no image

CSSの適用ルールと継承について

前回のエントリーでも書いたようにいまいちわかっていないことが多いので、復習します。 Contents1 セレクタの種類2 セレクタの詳細度3 継承 セレクタの種類 CSSのセレクタには下記のようなもの …

アーカイブ