skillup

技術ブログ

デザイン

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

投稿日:

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

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

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

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

随時更新予定。

-デザイン
-

執筆者:


comment

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

関連記事

no image

WordPressのカリキュラムを考える

WordPressを触っていますが、ちょっと体系的に覚える必要がありそう。 結構長い間、触ってきましたが、体系立てて覚えていないのでいざこの処理は?ときかれると案外迷います。 例えば0から初心者に教え …

no image

CSSのレイアウト例 その4 グリッドレイアウト

本日はグリッドレイアウトについて。 このサイトだけ見ても多分、デザインのイメージはわかないと思います(汗) サイトが具体的にどうなっているかを知りたい方は「プロとして恥ずかしくない 新・CSSデザイン …

no image

ワンポイント画像系のcssでの実装

主にリストやリンクなどのワンポイントアイコン系の画像をどう実装するかについて。 Contents1 list-style2 background-image3 Font Awesome4 after5 …

no image

bulmaフレームワークに関して form編

前回に続き、bulmaフレームワークのCSSのformがらみに関して。 ソースはこちら メモ的に。 controlはinput,select,textareaなどをwrappingする要素。通常だとあ …

no image

CSSのレイアウト例 その1 カラムレイアウト

本日はCSSのレイアウト例に関してよくあるものを見てみようと思います。 例によってサイトが具体的にどうなっているかを知りたい方は「プロとして恥ずかしくない 新・CSSデザインの大原則」を買いましょう。 …