css position: absolute で位置を指定しない場合
要素の配置情報を指定するpositionプロパティに「absolute」があります。通常の使い方では、absoluteを指定された要素は「position: s...
css 
css svgの図形描写-2 装飾に使うCSS
「SVG 基本の図形描画」で少しふれましたが、縁取り、塗りつぶしなどSVGでは装飾に関する値を設定できます。メンテナンスや他の要素との兼ね合いを考えると、装飾関...
HTML SVGで基本の図形描写 – 1
拡大/縮小しても描写が崩れないSVG。アイコンや背景素材としてもすっかりポピュラーになりました。今回はpathなどを使う複雑なものではなく、丸や長方形のような基...
WordPress GoogleレビューをWPサイトに掲載するプラグイン
WordPressサイトにショートコードやウィジェットを利用してグーグルレビューを掲載できるプラグインの導入手順をご紹介します。自店のホームページをWordPr...
css grid-auto-flowで配置方法を指定する【gridレイアウト】
gridレイアウトでは基本的に、grid-template-columns・grid-template-rowsで指定したグリッド枠に沿って左詰めで順番にグリッ...
css max-contentとmin-contentの違い
要素のwidthを決める値に「max-content」と「min-content」というものがあります。max-content は、その要素内のサイズに合せたw...
css radial-gradientとrepeating-radial-gradient
.demo>div { width:98%; height:200px; margin:auto}.radial div { background:radial...
css Gridレイアウトの余白・間隔のとり方
.demo{display:grid;width:100%;max-width:600px;padding:8px;border:4px dashed #aaa...
css grid-template-areasとgrid-areaを使ったレイアウト配置
「グリッドアイテムの配置」でgrid-column・ grid-row でグリッド線を指定するアイテム配置方法をお伝えしましたが、今回はエリアに名前をつけて配置...
css Gridレイアウトのアイテム配置
.demo{ display: grid; text-align:center;}.grid1{ grid-template-columns:repeat(3,...
css gridレイアウト 基本の作り方
WEBサイトのレイアウトでは最新方法であるgridレイアウト。flexが列または行、一方向に配置していくレイアウトであるのに対して、girdレイアウトは列、行の両方を意識した二次元レイアウトが可能になった配置方法です。具体的なGridレイアウトについて解説していきます。
css 画像や動画を自動トリミング、object-fit
画像スライドやリスト表示のように複数の画像を並列させるとき、画像のアスペクト比（縦横の比率）がバラバラだと、表示が凸凹になってしまい見づらくなってしまったり、サ...