WEB制作 全般 ○○以外を指定する :notセレクタ
久しぶりにCSSセレクタの話です。「n番目の要素」や「ホバー時」など、要素を特定するイメージがあるcssセレクタですが、「○○以外」を対象とできる :not と...
css
WEB制作 全般 
WEB制作 全般 ホバーボタンの作り方とサンプル集
よく利用されるホバーボタンのCSSアニメーションをいくつか紹介しています。コードも載せているので、気に入ったものがあればコピー＆ペーストでお好きにご利用ください。
WEB制作 全般 flexアイテムのサイズを決める grow shrink basis
４回にわたって解説してきたflexレイアウトも今回で最後です。flexアイテムの拡大率・縮小率を指定するflex-grow 、flex-shrink、flex-basisについて解説します。気をつけないといけないのは、flexアイテムそのものの拡大率を指定しているのではなく、flexコンテナに余白ができた場合に、余剰をどう分けあうかを指定しています。
WEB制作 全般 backgroundの複数指定と重なり方と位置指定
.demo{display:flex;width: 100%;text-align:center;flex-wrap:wrap;justify-content:...
WEB制作 全般 表示領域に合わせたスクロールが簡単に実装できるscroll-snap
scroll-snap-typeは、指定の位置でスクロールをぴたっと止める働きをするプロパティです。縦横どちらの方向にも使えるので、モバイルのUIやスライド作成などに応用できる便利なプロパティです。mandatory(強制)、proximity(近接)いずれかの指定したスクロール挙動になります。
WEB制作 全般 グラデーションを繰り返すrepeating-linear-gradient
「repeating-linear-gradient：グラデーションの繰り返し 」と聞くと、linear-gradientとbackground-repaetで...
WEB制作 全般 transformプロパティ（変形）で出来ること・まとめ
CSSアニメーションで役立つ「transform(変形)」プロパティの基本的な使い方をいくつか紹介しています。
WEB制作 全般 flexレイアウト その３
flexレイアウトの第３回です。前回までが基本の内容でしたので、ここから少しずつ発展した内容になります。 前回、前々回は以下のリンクから。.demo { dis...
WEB制作 全般 テーマ要素はCSS変数（カスタムプロパティ）で一括指定する
実際にサイトを作る際、セクションごとにfont設定がバラバラということはまずないでしょうし、色についてもメインのテーマカラー、補色でサブカラー、反対色でアクセン...
WEB制作 全般 CSSアニメーションを作る その１【基本編】
CSSで作るアニメーションには@keyframesを使います。一見すると難しそうにみえますが、transitionプロパティを知っている人なら至って簡単です。t...
WEB制作 全般 変化する時間と量を指定するプロパティtransition
transitionで簡単なアニメーション効果を作るinput:checked やマウスホバー、:focusなどで要素を変化させるとき、変化時間と変化量、割合を...
WEB制作 全般 CSSでトップに戻るボタンを作る
smooth-scrollプロパティを使って、CSSだけでトップに戻るボタンを作ることにします。ぺーじ内リンクのズレは:targetセレクタで修正するのが最も楽だと思います。