skillup

技術ブログ

デザイン

css小ネタ

投稿日:

実務でCSSをゴリゴリ書く機会があり、力不足を感じたので、メモを。

  • ライブラリlessやsassを使うとスコープを設定できるのでかなり楽
  • 大まかな幅設定 スマホデザインの場合、幅を基本的に%で指定。pxだと横ずれの対処がきついときが結構あり。これはpositionなどでも同じ
  • リンクボタンでの画像系のワンポイントマーク(あまり幅がない系) 同一ブロック内にてbackgroundでずらしてサイズや位置の調整 あるいは before after系の要素に画像を入れる
  • リンクボタンでの画像系のワンポイントマーク(主に幅がある程度ある系)display:table とdisplay:table-cellでpositionで調整
  • 横中央寄せ ブロック margin:auto インライン text-align:center
  • 縦中央寄せ  ブロック position margin系内部が非画像&インラインかつ一行 line-height
  • 縦中央寄せ 画像があったり複数行 inline-block&vertical-align middle
  • 縦中央寄せ cssで縦方向中央に配置する方法(5つのケース+1)
  • 均等サイズブロック 完全にサイズが同じものならdisplay table &display table-cell。[CSS] display:tableを学ぶ
  • ヘッダーのロゴ+メニューなどは普通にブロック+float+ リストのinline-blockで幅指定。
  • メニューの枠線などはborderで記述。
  • 最後の幅サイズなどを調整するためにlast-childは結構使える
  • 画像の可変を使う場合にはimg要素に100%を付ける。※アイキャッチ系など常に100%のものを使うとき
  • 画像+複数行(物件のサムネ画像+複数行説明など)の説明はdisplay tableで分けて説明の部分を div,li,tableで分ける
  • div 項目間のバランスが違うときに便利 li 項目が同一の場合に有利 テーブル テーブルらしいものがるときに便利
  • background 位置やサイズをいろいろ変えられるので便利
  • displayごとの特性をよく理解しておく必要あり。
    要素の種類の指定のプロパティ(display)
    【CSS】displayの使い方を総まとめ!inlineやblockの違いは?
    display:tableを活用してみよう

-デザイン
-,

執筆者:


comment

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

関連記事

no image

チェック状態のradio,checkでの要素の表示、非表示

CSS小ネタ系。 チェックボックスやラジオと隣接するテキストボックスがあって、チェックがあった時のみ表示したい。(例えばその他の自由入力欄) 完全に隣接の場合にはCSSの+が使えるんですが、そうもいか …

no image

CSSのブロックとインライン、レイアウトについて

今回はCSSを組む時のブロックレベルとインラインの基本とレイアウトに関して。 Contents1 ブロックレベルとインライン1.1 ブロックレベル要素1.2 インライン要素1.2.1 参考リンク2 レ …

no image

ドロップダウンリスト

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

no image

css tips display:table,marginの相殺,font-size指定,margin上下の%など

昨日、喫茶店でみていた参考書でみたCSSのネタに関して忘れないようにメモ。 Contents1 display:table2 inputのfocus時の青を消す3 marginの相殺4  font-s …

no image

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

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