skillup

技術ブログ

デザイン

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

投稿日:

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

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

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

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

随時更新予定。

-デザイン
-

執筆者:


comment

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

関連記事

no image

一般的なWebサイト制作について

実務で通常のWebサイトを作成するというお仕事が。 Webサイトを改めて作成するっていう経験からはだいぶ遠のいてましたんで、これを機にスキルをまとめたいなーって思います。 サイト作成といっても本格的な …

no image

CSSのレイアウト例 その2 部分的な多カラムレイアウト

ナビのボタンや一覧のリスト項目などfloatを使ったいろいろなバリエーションについて。 例によってサイトが具体的にどうなっているかを知りたい方は「プロとして恥ずかしくない 新・CSSデザインの大原則」 …

no image

画面系小ネタposition:sticky+datalist(プルダウン+自由入力)

画面系の小さい小ネタなど。 Contents1 position:sticky2 datalist(プルダウン+自由入力) position:sticky ヘッダーに関して画面をスクロールすると、付い …

no image

HTML/JS/JavaScriptのキャッシュ機能の無効化に関して

AngularJSを使っていまして、更新したのにキャッシュ機能が働いていてブラウザでは変更が反映されてない・・・なんてことがちょいつづき、キャッシュを無効化する機能を調査しました。 まず通常のHTML …

no image

ドロップダウンリスト

本日はヘッダーメニューとかで見られるドロップダウンリストについて。 bootstrapを使った方法は下記に。 http://skill-up-engineering.com/?p=1157 通常のHT …