skillup

技術ブログ

「 HTML+CSS 」 一覧

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;で均等幅になる。%指定しなくていいかも。 また間隔を開け …

no image

スマホサイト対策全般

2017/12/29   -デザイン
 ,

スマホ対策のデザインに関するチェックリスト。 viewport まずは横幅などがおかしくないかの確認

コピペで済ませていませんか?改め …

no image

css中央ぞろえ

2017/12/23   -デザイン
 ,

よく出る中央ぞろえテクに関して 横センタリング   [CSS]高さが分からない要素を天地・左右・天地左右の中央に配置するテクニックのまとめ 中央センタリング たった4行! CSS3 Flex …

no image

flexについて

2017/12/10   -デザイン
 

CSSのflexをちょこちょこ使ってます。 以前下記リンクで超簡単なサンプルは動かしましたが、実践的なことは何もやっていませんでした。 css flexbxについてどんなことができるのか 使って思った …

no image

メインで使う画像のcssについて

2017/11/27   -デザイン
 ,

CSSについていろいろと勉強したんですが、画像の使いに関して結構てこずったんでポイントをまとめておこうかと。 画像といっても商品の画像などワンポントでなくメインで使うタイプのものです。 imgタグをd …

no image

cssフレームワークをnode_modulesから読み込む

JavaScriptを1ファイルでまとめて読み込める方法が分かったので(参考リンク npmでのJSライブラリインストール)、CSSでも似たような方法があったのでメモ。 流れを言うと、下記のようになりま …