skillup

技術ブログ

デザイン

CSSネタに関して

投稿日:

何回か書いてきたCSSのまとめネタ的なもの。

  • 紙で印刷しておくと生産性が3倍ぐらいになる。思った以上にコーディングがしやすい。
  • 良く使うユーティリティ系の操作をまとめる。ベンダープレフィックス以外にもボタン系もまとめてしまっていいかも。
  • 良く使う幅なども変数化しておくと非常に良い。ただし2〜3段階必要。
  • 基本的なレイアウトもユーティリティ系の一部としてまとめてしまう。こうするとページごとの差異がなくなる。*HTML+CSSデザイン講義を参照。誤植が多いが書いてあることはかなり使えるネタが多い。特にレイアウトに関するネタ。
  • 密集地の場合、型落ちしないためにdisplay:tableは結構使えるかも。等間隔系の処理にいい気がする。
  • 周期性があるデザインはほぼul>li一択。
  • flexは思った以上に使える。特に下記3つは有効範囲広い。
    jusify-content:space-between メニュー系などを等間隔に並べたい時。従来だとmarginを適度にとる必要がある。
    align-item:center 難しい縦位置の中央ぞろえ。
    flex-direction:column 画像+説明文など
  • 画像の配置は要研究。縦横比を揃えるか。一部を切り抜くか。中央ぞろえをするのか。小ネタをしっかり用意する必要あり。
  • flexショートハンドはwidthのコントロール。特にbasisを0にして、余白でコントロールするのか、%表記にするのか。ブラウザで色々いじって最適な値を決める必要がありそう。

-デザイン
-,

執筆者:


comment

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

関連記事

no image

BrowserSyncを使ったホットリロードに関して

BrowserSyncを使ったブラウザのホットリロードに関して。 ホットリロードとは「エディタなどで更新があった際にブラウザがすぐに検知して、最新の状態に自動更新してくれる」状態にブラウザをすることで …

no image

boostrapでのヘッダーナビ作成

昔から私の作るWEBアプリはデザインがめちゃくちゃなことが多かったんですが、最近は多少デザインにも気を配るようになってきました。 実はCSSがあまり得意ではなくて、うまく組むためにかなり苦戦していまし …

no image

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

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

no image

メインで使う画像のcssについて

CSSについていろいろと勉強したんですが、画像の使いに関して結構てこずったんでポイントをまとめておこうかと。 画像といっても商品の画像などワンポントでなくメインで使うタイプのものです。 imgタグをd …

no image

GIMPでの薄膜レイヤー&縁取り

えー本業はプログラマなんですが、ガチンコ塾のブログの画像なんかもたまに作ってます。 まーほとんど素人なんですけどね(笑) 一応昔にPhotoshopとIllustratorは使ってました。今では忘却の …