css

HTML/CSS

Gridレイアウトのアイテム配置

.demo{ display: grid; text-align:center; } .grid1{ grid-template-columns:rep...
2021.06.09
HTML/CSS

gridレイアウト 基本の作り方

WEBサイトのレイアウトでは最新方法であるgridレイアウト。flexが列または行、一方向に配置していくレイアウトであるのに対して、girdレイアウトは列、行の両方を意識した二次元レイアウトが可能になった配置方法です。具体的なGridレイアウトについて解説していきます。
2021.07.25
HTML/CSS

画像や動画を自動トリミング、object-fit

画像スライドやリスト表示のように複数の画像を並列させるとき、画像のアスペクト比(縦横の比率)がバラバラだと、表示が凸凹になってしまい見づらくなってしま...
2021.06.09
HTML/CSS

position:stickyが効かない原因

最初は通常のレイアウト配置(static)、スクロールすると指定の絶対位置に固定され(fixed)、次のsticky要素が来ると相対位置に固定(abs...
2020.08.09
HTML/CSS

backgroundをショートハンドで指定する

関連するプロパティを一気に指定できるショートハンド型は楽なので覚えておきたいところです。 今回は背景に関するbackgroudのショートハンド指定につい...
2021.04.28
HTML/CSS

vertical-alignが効かない人は多分勘違いしている

知らなくても大丈夫(個人比)なプロパティですが、モヤモヤしている人は多いと思うので、今回はvertical-alignの解説です。 私がcss独学を初め...
2021.03.11
HTML/CSS

ホバーボタンの作り方とサンプル集

よく利用されるホバーボタンのCSSアニメーションをいくつか紹介しています。コードも載せているので、気に入ったものがあればコピー&ペーストでお好きにご利用ください。
2021.06.13
HTML/CSS

flexアイテムのサイズを決める grow shrink basis

4回にわたって解説してきたflexレイアウトも今回で最後です。flexアイテムの拡大率・縮小率を指定するflex-grow 、flex-shrink、flex-basisについて解説します。気をつけないといけないのは、flexアイテムそのものの拡大率を指定しているのではなく、flexコンテナに余白ができた場合に、余剰をどう分けあうかを指定しています。
2021.07.27
カラーミーショップ

フォントカラー・背景色の変更(カラーミーショップ)

カラーミーショップで、テキスト色、リンク色、背景(色・画像)を設定する項目編集について解説しています。SEO Plusテンプレートでは背景色が正しく適用されませんのでcssで調節する必要があります。
2021.06.04
HTML/CSS

backgroundの複数指定と重なり方と位置指定

.demo{ display:flex; width: 100%; text-align:center; flex-wrap:wrap; justif...
2021.04.27
HTML/CSS

表示領域に合わせたスクロールが簡単に実装できるscroll-snap

scroll-snap-typeは、指定の位置でスクロールをぴたっと止める働きをするプロパティです。縦横どちらの方向にも使えるので、モバイルのUIやスライド作成などに応用できる便利なプロパティです。mandatory(強制)、proximity(近接)いずれかの指定したスクロール挙動になります。
2020.07.22
HTML/CSS

グラデーションを繰り返すrepeating-linear-gradient

「repeating-linear-gradient:グラデーションの繰り返し 」と聞くと、linear-gradientとbackground-repaet...
2020.07.27
タイトルとURLをコピーしました