css gridレイアウト 基本の作り方 WEBサイトのレイアウトでは最新方法であるgridレイアウト。flexが列または行、一方向に配置していくレイアウトであるのに対して、girdレイアウトは列、行の両方を意識した二次元レイアウトが可能になった配置方法です。具体的なGridレイアウトについて解説していきます。 2022.04.23 css
css 画像や動画を自動トリミング、object-fit 画像スライドやリスト表示のように複数の画像を並列させるとき、画像のアスペクト比(縦横の比率)がバラバラだと、表示が凸凹になってしまい見づらくなってしまったり、サ... 2023.01.16 css
css position:stickyが効かない原因 最初は通常のレイアウト配置(static)、スクロールすると指定の絶対位置に固定され(fixed)、次のsticky要素が来ると相対位置に固定(absolute... 2022.04.23 css
css backgroundをショートハンドで指定する 関連するプロパティを一気に指定できるショートハンド型は楽なので覚えておきたいところです。 今回は背景に関するbackgroudのショートハンド指定について。注意... 2022.04.23 css
css vertical-alignが効かない人は多分勘違いしている 知らなくても大丈夫(個人比)なプロパティですが、モヤモヤしている人は多いと思うので、今回はvertical-alignの解説です。 私がcss独学を初めた当時、... 2023.07.17 css
css ○○以外を指定する :notセレクタ 久しぶりにセレクタの話です。 「n番目の要素」や「ホバー時」など、要素を特定するイメージがあるcssセレクタですが、「○○以外」を対象とできる :not という... 2022.04.23 css
css ホバーボタンの作り方とサンプル集 よく利用されるホバーボタンのCSSアニメーションをいくつか紹介しています。コードも載せているので、気に入ったものがあればコピー&ペーストでお好きにご利用ください。 2022.04.23 css
css flexアイテムのサイズを決める grow shrink basis 4回にわたって解説してきたflexレイアウトも今回で最後です。flexアイテムの拡大率・縮小率を指定するflex-grow 、flex-shrink、flex-basisについて解説します。気をつけないといけないのは、flexアイテムそのものの拡大率を指定しているのではなく、flexコンテナに余白ができた場合に、余剰をどう分けあうかを指定しています。 2022.04.23 css
css backgroundの複数指定と重なり方と位置指定 .demo{ display:flex; width: 100%; text-align:center; flex-wrap:wrap; justify-con... 2022.04.23 css
css 表示領域に合わせたスクロールが簡単に実装できるscroll-snap scroll-snap-typeは、指定の位置でスクロールをぴたっと止める働きをするプロパティです。縦横どちらの方向にも使えるので、モバイルのUIやスライド作成などに応用できる便利なプロパティです。mandatory(強制)、proximity(近接)いずれかの指定したスクロール挙動になります。 2022.04.20 css
css グラデーションを繰り返すrepeating-linear-gradient 「repeating-linear-gradient:グラデーションの繰り返し 」と聞くと、linear-gradientとbackground-repaetで... 2022.04.23 css
JavaScript トップページスライド(slick.js)のカスタマイズ 軽量スライダー系jQuery、slick.jsの解説記事です。slickにはあらかじめ豊富なオプションが用意されているため、スライダーの動作制御やレスポンシブ設定もオプションだけで簡単に行えます。よく使用するものを中心に、カスタマイズ方法をまとめています。 2022.07.04 JavaScript