skillup

技術ブログ

「 HTML+CSS 」 一覧

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から読み込む+cssの拡張

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

no image

laravel Mix

laravel Mix 実務でlessを使っていて便利なのですが、コンパイルをatomのプラグインで行っていました。 ※保存されると自動的にコンパイルされるようになります。 他にも自動コンパイルにはい …

no image

実務でCSSを書く時のポイントについて

2017/11/08   -デザイン
 

先月にかなりたくさんCSSを書いたんでその時感じたポイントみたいなものを。 いきなりかかずにまず共通部分をみつける まあ、以前のまとめにも書いたんですが、あまり深く考えずにだーっと書いてしまうと、あと …

no image

スマホサイトの横ぐらつき ~border-size:border-boxigについて

2017/10/31   -デザイン
 

スマホサイトをつくっていたところ、横幅がぐらつくというあり得ない事態に・・・ どうやら内部の幅が100%を超えるときにこの現象が起きてしまうようです。 対策1 コンテンツの幅が100%を超えている部分 …

no image

cssでのmax,minや画像の配置に関して

2017/10/31   -デザイン
 

主に画像なんかで使われるんですが、max(min)-width(height)などの使い方に関して。 えーmax(min)はどういうときに使われるかというとまず可変な要素に対して使われることが多いです …

no image

checkboxのカスタマイズ

2017/10/15   -デザイン
 

ブラウザのディフォルトではなくcheckboxをカスタマイズしたいとき。 やったことなかったんですが、やってみると結構面白い。 ソース まずはソースを。 html [crayon-5bf4f441d6 …