HTML/CSS

HTML/CSS

SVGで基本の図形描写 – 1 

拡大/縮小しても描写が崩れないSVG。アイコンや背景素材としてもすっかりポピュラーになりました。 今回はpathなどを使う複雑なものではなく、丸...
HTML/CSS

grid-auto-flowで配置方法を指定する【gridレイアウト】

gridレイアウトでは基本的に、grid-template-columns・grid-template-rowsで指定したグリッド枠に沿って左詰めで順...
HTML/CSS

max-contentとmin-contentの違い

要素のwidthを決める値に「max-content」と「min-content」というものがあります。max-content は、その要素内のサイズ...
HTML/CSS

radial-gradientとrepeating-radial-gradient

線形グラデーションのlinear-gradientを繰り返すrepeating-linear-gradientがある(参考:linear-gradie...
HTML/CSS

Gridレイアウトの余白・間隔のとり方

gridレイアウトではgrid-column・grid-row、またはgrid-areaプロパティをつかった個別の位置指定をしない限り、grid枠に従...
HTML/CSS

grid-template-areasとgrid-areaを使ったレイアウト配置

「グリッドアイテムの配置」でgrid-column・ grid-row でグリッド線を指定するアイテム配置方法をお伝えしましたが、今回はエリアに名前を...
HTML/CSS

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

前章でグリッド枠の作成を学びましたが、子要素(アイテム)の配置を指定しなければ前から順番に配置されるだけで、flexレイアウトと大差ありません。今回は...
HTML/CSS

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

WEBサイトのレイアウトでは最新方法であるgridレイアウト。IEやsafariで一部未対応のプロパティもありますが、主だったブラウザはほぼ対応してき...
HTML/CSS

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

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

position:stickyが効かない原因

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

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

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

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

知らなくても大丈夫(個人比)なプロパティですが、モヤモヤしている人は多いと思うので、今回はvertical-alignの解説です。 私がcss独学を初め...
タイトルとURLをコピーしました