WEB制作 全般 Gridレイアウトの余白・間隔のとり方
.demo{display:grid;width:100%;max-width:600px;padding:8px;border:4px dashed #aaa...
WEB制作 全般
WEB制作 全般 
WEB制作 全般 grid-template-areasとgrid-areaを使ったレイアウト配置
「グリッドアイテムの配置」でgrid-column・ grid-row でグリッド線を指定するアイテム配置方法をお伝えしましたが、今回はエリアに名前をつけて配置...
WEB制作 全般 Gridレイアウトのアイテム配置
.demo{ display: grid; text-align:center;}.grid1{ grid-template-columns:repeat(3,...
WEB制作 全般 gridレイアウト 基本の作り方
WEBサイトのレイアウトでは最新方法であるgridレイアウト。flexが列または行、一方向に配置していくレイアウトであるのに対して、girdレイアウトは列、行の両方を意識した二次元レイアウトが可能になった配置方法です。具体的なGridレイアウトについて解説していきます。
WEB制作 全般 画像や動画を自動トリミング、object-fit
画像スライドやリスト表示のように複数の画像を並列させるとき、画像のアスペクト比（縦横の比率）がバラバラだと、表示が凸凹になってしまい見づらくなってしまったり、サ...
WEB制作 全般 position:stickyが効かない原因とエラー解消方法
最初は通常のレイアウト配置(static)、スクロールすると指定の絶対位置に固定され(fixed)、次のsticky要素が来ると相対位置に固定(absolute...
WEB制作 全般 backgroundをショートハンドで指定する
関連するプロパティを一気に指定できるショートハンド型は楽なので覚えておきたいところです。今回は背景に関するbackgroudのショートハンド指定について。注意す...
WEB制作 全般 vertical-alignが効かない人は多分勘違いしている
知らなくても大丈夫(個人比)なプロパティですが、モヤモヤしている人は多いと思うので、今回はvertical-alignの解説です。私がcss独学を初めた当時、あ...
WEB制作 全般 ○○以外を指定する :notセレクタ
久しぶりにCSSセレクタの話です。「n番目の要素」や「ホバー時」など、要素を特定するイメージがあるcssセレクタですが、「○○以外」を対象とできる :not と...
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:...