skillup

技術ブログ

「 HTML+CSS 」 一覧

no image

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

2018/03/30   -デザイン
 ,

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

no image

フォーカス時のみ書き込み可能になるHTML要素について。contenteditableなど

2018/03/28   -デザイン
 

通常はただのテーブル(or普通のHTML)ですが、クリックするとinputになり、入力が可能になる手法について。 contenteditableなど 普通のHTML要素に [crayon-5ad8ce …

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-5ad8ceaaa3 …

no image

transition関連

2018/03/12   -デザイン
 

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

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倍ぐらいになる。思った以上にコーディングがしやすい。 良く使うユーティリティ系の操作をまとめる。ベンダープレフィックス以外にも …