サイト構築 背景を画像で埋める
body { /* 画像のURLを指定 */ background-image: url('path/to/your/image.jpg'); /* 画像をカバーするように調整 */ background-size: cover; /* 画...
CSS
サイト構築 サイト構築 CSSセレクタ 親要素指定
:has()という疑似クラスで対応できるじゃん！例えば下記のような状態の時、labelタグを指定するには、label:has(>input)でイケちゃう。まぁ、普通にidを割り振って欲しいけど。<label> <input type="ch...
サイト構築 CSS : アコーディオン２
アコーディオンの上に罫線を入れてみたパターンdetails に with-topline のクラスを与える。<!DOCTYPE html><html lang="ja"><head> <title>アコーディオンに関する操作</title>...
サイト構築 CSS : アコーディオン
detailsにsummary、というタグを使用するそうで。 inputのtype="checkbox" で対応していたのも今や昔、勉強しないとどんどん知識が古くなる。悔しいがどんどん楽になる。それがHTML。シンプルにダイレクトに書けるな...
サイト構築 画像の取り扱いについての考察２
正方形のフレームを作る際に面白い方法があったので、サンプルを作成した。下記の square クラスがそれにあたる。height : 0; とし、padding-bottom で同じだけの割合を指定すると正方形になる。ただし、背景を着色すると...
サイト構築 画像の取り扱いについての考察
画像を上下中央に寄せるには下記のソースのフレーム設定（.frame）が肝である。display: flex; で上下中央に揃えるようにする。そうかその手があったか。<!DOCTYPE html><html lang="ja"><head> ...
サイト構築 object-fit
それぞれの値についてfill: 要素のボックス内における置換要素の中身を、ボックスに合わせて拡大または縮小します。アスペクト比は保持されません。contain: 要素のボックス内における置換要素の中身を、ボックスに合わせて拡大または縮小しま...
サイト構築 ２つに分けて左位置を縦書きで固定
フレームを作ってを2分割。片方を縦書きで表示させたい場合に少し悩んだのでできたもの。<!DOCTYPE html><html lang="ja"><head> <title>縦書きポジションに関するサンプル</title> <style t...
サイト構築 CSSメモ
動きのある見出し線に動きをつくる。今回は、クラスを与えたタグの中に表示する文字をspanタグで括る。<div class="leading"><span>Station</span></div>結果Station設定.leading { /...
サイト構築 CSSセレクター
CSS のセレクターは、HTML や XML などのマークアップ言語で記述された要素を指定するための記述方法です。セレクターを使うことで、HTML 要素に対してスタイルを適用することができます。セレクターは、要素名、ID、クラス、属性などを...