skillup

技術ブログ

「 HTML+CSS 」 一覧

no image

data- HTML5のカスタムデータについて

2018/03/28   -デザイン
 

HTML5のカスタムデータ属性について。 HTML5ではタグにdata-*とすることで任意の値を持たせることができます。 いまさら聞けない、HTML5カスタムデータ属性の基本と使いどころ 例として下記 …

no image

パララックス系のギャラリー(中央ネタ)

2018/03/17   -デザイン
 ,

ギャラリー的な画像を使ったときに思ったこと。下記が画像の標準的な扱い方かな・・・ 枠自体は高さも幅も決める(li要素のwidth,heightは決める) 基本は画像要素を中央揃え(positionの5 …

no image

positionを使うときに注意すること

2018/03/17   -デザイン, 未分類
 

positionを使ったときに色々なまとめ。 親>子>孫だったときに親がrelative、子、孫がabsoluteだと孫の基準点は子になる(ソース参照) position:absolute …

no image

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

2018/03/14   -デザイン
 

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

CSS [crayon-5d130cf7de …

no image

transition関連

2018/03/12   -デザイン
 

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

no image

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

2018/03/07   -デザイン
 

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

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に関し …