skillup

技術ブログ

「 デザイン 」 一覧

no image

css animationの使い方、他スクロース量でのアニメーションなど

2018/03/14   -デザイン
 

transitionとちょっと近いですがCSSでのanimationに関して。 HTML

CSS [crayon-5bf4f57949 …

no image

transition関連

2018/03/12   -デザイン
 

cssのanimationに関して。 例えばhoverしたときに色が変わる仕様はよくあることだと思いますが、transitionを入れることで時間差をつけることができます。 [crayon-5bf4f …

no image

レイアウトカラム落ち対策

2018/03/07   -デザイン
 

自分のPCでは大丈夫なんだけど、別PCで見るとカラム落ちするケースがあり、ちょっと対策を。 もちろん幅調節とかそういうのはなし。 flex-wrap:nowrap ブラウザがflexが問題なければこの …

no image

キャッチ画像の扱いについて

2018/03/04   -デザイン

今さらながらですが、サイトのトップなどに貼り付けるメインビジュアル系の画像の処置について。 スマホサイトオンリーだとあまり考えなくてもいいかもしれませんが、PCやレスポンシブの場合、ブラウザの幅が伸縮 …

no image

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

2018/02/25   -デザイン
 

PCサイトのコーディングをしていて気づいたことなど。 最近スマホばっかりやっててPCサイトのコーディング自体ものすごい久しぶりでした・・・ 幅が縮むということを常に意識する。 縮めた時にページが崩れた …

no image

CSSネタに関して

2018/01/30   -デザイン
 ,

何回か書いてきたCSSのまとめネタ的なもの。 紙で印刷しておくと生産性が3倍ぐらいになる。思った以上にコーディングがしやすい。 良く使うユーティリティ系の操作をまとめる。ベンダープレフィックス以外にも …

no image

tableのレイアウトに関して

2018/01/29   -デザイン
 

tableのcssに関して。 https://github.com/umanari145/css 幅を決めるのでも%表記をしたいときはauto、数値固定で行きたいときはfixed。 詳しくはリンクのt …

no image

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

2018/01/21   -デザイン
 

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

no image

vertical-alignの挙動に関して

2018/01/02   -デザイン
 

cssでの中央ぞろえを行う場合、横は案外簡単なんですが、縦の中央ぞろえは結構難しかったりします。 css中央ぞろえ ざっとまとめると以下のようなかんじでしょうか。 テキストのみの1行タイプであればli …

no image

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

2017/12/30   -デザイン
 ,

昨日、喫茶店でみていた参考書でみたCSSのネタに関して忘れないようにメモ。 display:table table-layout: fixed;で均等幅になる。%指定しなくていいかも。 また間隔を開け …