skillup

技術ブログ

デザイン

css写経学習で感じたこと

投稿日:2016年9月27日 更新日:

こっちのブログでも書いてますが、CSSを最近写経してて気づいたことがいろいろあるんでメモリます。

常時追加予定。

全体

  • 最初に見取り図を描いて、どの要素とどの要素が共通性を持つかを考える。(いきなり組まないほうが良いかも)
  • 最初のほうでmargin:0;padding0を定義(別ファイルにしたほうが良いかも)
  • 幅や高さはブロックは未指定の場合、親の100%になるが、内部をfloatさせた場合、内部の要素により幅が決まる。
    (リスト系の要素をすべてfloatさせているヘッダーなどでわかりやすい現象)
  • CSSは構造を決めるものと色を決めるものを分ける
  • 内部要素をfloatしたことによる高さが0による表示崩れが起きやすい。(全体の)レイアウトとリスト系の部分)。clearfixを使う。
  • 画像をレスポンシブで使う場合は複数用意するか、プロパティでmax-wdith:100%を使う。(こうすると最大でも親要素のサイズに合わせることになる)
    width:100%は常に幅を指定。max-width:100%は上限値のみの指定。

レスポンシブ

  • 基本は幅をグリッドで設定し、個別のプロパティに設定しないことが多い。
  • サイズごと(実際は端末ごとのことが多い)に分けるときは、既存のCSSの下に@media screen and (max-width: 768px)などを書く
  • 既存のCSSのpositionをクリアしたいときはposition:static、floatをクリアしたいときはfloat:none;を使う

レイアウト

  • 中央寄せ ブロック系はmargin:0 auto、インライン系はtext-align(このプロパティは継承が利くので親で書いておけば子に引き継がれる)
  • floatの親は.clearfix:afterで
  • レスポンシブでない場合、幅を一定にしたい場合、head,main,footerに接尾語をつけたクラスを持たせる~innerなど。このクラスに対して幅を決めてあげるときれいに決まる。
  • 3ブロックの場合、2+1にする。2のほうはfloatでくくる。floatごとの親がclearfixを持つ

list系

※基本的に規則的に何かを並べる場合に非常に使える。※詳しくはCSSデザインの大原則のテンプレを参考にするといいかも。

  • li,dt,ddなどはインラインではなくブロックなので要注意。幅を通常通り定義できる。
  • list系メニューを作る場合、内部のリンク自体をブロックとみて、ほぼここで完結させる。必要なプロパティはliではなく、aに集約させる。そのためdisplay:blockかdisplay:inline-blockを使う;
  • list系の情報で改行させたくない&幅を持たせたいときはdisplay:inline-blockが使える。詳細は下記リンクを。
    CSSの display: inline、display: block、display: inline-block をマスターしよう!
  • メニューのロゴを表示する場合、1枚の画像を使いbackground-positionで位置調節してあげると楽。
  • リスト系のブロックを並べる場合、一番左に来るブロックはmarginを調節する&clear:bothを入れてあげないとブロックの高さが違うときにうまくそろわない。
    (CSSデザイン大原則 CHAPTER4-2を参照) marginの調節は一番右端でもOK
  • list系の場合、(入力欄 or 文字) + アイコンなどを作りたい場合、下記のように入力

displayの使い方について

  • 同じ列内で右端などに固めたいとき、display:inline-blockが使える( 幅を設定できる& vertical-align&text-alignが使える )
  • 同じ列内で3~4等分したいときdisplay:table and table-rowが使える(主に一覧画面でのアイテム系の出力でid、画像、詳細説明、その他の情報などを出力したいとき) ※ECCUBE3の管理画面をみてそう感じました・・・
  • display:tableの有用性は下記ブログを
    [CSS] display:tableを学ぶ

-デザイン
-,

執筆者:


comment

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

関連記事

no image

レスポンシブサイト作成に関して

実務でレスポンシブを作ったので、そのまとめに関して。ちなみにPCのサイト自体も作ったことなかったのでそのまとめに関しても。 メインキャッチの処理は縦横の比率を変えない、常に要素を中央に配置するとなると …

no image

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

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

no image

flexショートハンドに関して

実務でflexをちょこちょこ使うようになりました。 やはりfloatなどで組むことと比べると圧倒的に楽ですね・・・ んで、あまり理解してなかったショートハンド要はgrow,basis,shinkに関し …

no image

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

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

no image

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

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