ほんっとにはじめてのHTML5とCSS3

【66-2】ユーザーアクション擬似クラス :active :hover

今回からユーザーアクション擬似クラスを見ていきましょう。 ユーザーアクション擬似クラスは、ユーザーの操作の状態によって要素をセレクトするための擬似クラスです。 ですのでユーザー側の操作が必要な <a>要素や、フォーム関連の要素などに使うことが多いです。 今回はまず、:active :hover を見てみましょう。 ちなみに ユーザーアクション擬似クラスは <a>要素やフォーム関連の要素によく使わ...

2023/12/20 19:37

【66-1】ロケーション擬似クラス :target :target-within :local-link

ロケーション擬似クラスの続きです。 今回は、:target :target-within :local-link を使ってみます。 擬似クラスって何？というかたは、こちらをご覧ください。 【66】擬似クラスと疑似要素（2つの違いとそれぞれの特徴） 擬似クラスも含めた セレクター一覧いちらんはこちらです。 【65】CSSのセレクターを整理しよう（セレクター 一覧） 本日のINDEX :target（リンク先の要素をセレクト） :t...

2023/09/20 17:47

【66-1】ロケーション擬似クラス :link :visited :any-link

今回から擬似クラスについて、1つずつ見ていきましょう。 擬似クラスは、基本的なセレクター（エレメンタルセレクターや属性セレクター）の後にくっつけて、その要素の「ある状態」をセレクトすることができるモノ。 いっぱいある擬似クラスの中で、まずはロケーション擬似クラスを見てみよう。 これは、リンクの状態（今いる位置、リンク履歴など）によって要素をセレクトします。 ですので href 属性を持つ <a>要...

2023/08/15 12:38

【66】擬似クラスと疑似要素（2つの違いとそれぞれの特徴）

今回から、疑似クラス や 疑似要素 について見ていきましょう。 今回はまず全体像の話。この↑2つの違いと それぞれの特徴をまとめてみます。 疑似クラス ・ 疑似要素は、今までやってきた エレメンタルセレクターや 属性セレクターにくっつけて使うことで、より詳細なセレクターを作ることができます。 そして、この2つを使うことで HTML や CSS をスッキリ短くすることもできるんです。 本日のINDEX 擬似ク...

2023/06/21 13:00

（ちょっとメモ）名前空間（ネームスペース）とCSSセレクター

名前空間（name space）って、プログラマーのかたには聞き慣れたコトバかもですが、主にデザイン業務の私には、聞いたことが無い世界でした（汗）。 CSSのセレクターの仕様書では「名前空間」に属する要素を対象にしたセレクターの書き方が載っています。 今回はとりあえず、それが「どんなものなのか」だけ、触れておこうと思います。 本日のINDEX CSSセレクターでの名前空間（ネームスペース） CSSセレクタ...

2023/05/19 16:20

【65-3】クラスセレクター（.）と IDセレクター（#）

クラスセレクターと IDセレクターは、両方とも Level 1 からの、すっごい古くからあるセレクターなんですが、仕様書 Selectors Level 3から、「属性」セレクターに分類されているんです。 たしかに、class属性や ID属性を使ったセレクターだもんね。 class属性と ID属性はグローバル属性。HTMLのどの要素にも共通で使える属性です。 クラスセレクターと IDセレクターは、今まで何度もサンプルで登場したセレクターです...

2023/04/18 17:58

【65-3】属性セレクター [att=&quot;val&quot; i] [att=&quot;val&quot; s]

属性セレクター（attribute selector）の続きです。 今回は、属性値の大文字小文字の区別を「する・しない」を指定できるセレクターです。 本日のINDEX 属性値の大文字・小文字の区別 [att="val" i] att属性の値の大文字・小文字は区別しない [att="val" s] att属性の値の大文字・小文字も一致する 参考： ・Selectors Level 4 W3C Working Draft ・CSS セレク...

2023/03/16 16:02

【65-3】属性セレクター [att^=&quot;val&quot;] [att$=&quot;val&quot;] [att*=&quot;val&quot;]

属性セレクター（attribute selector）の続きです。 今回は、部分照合属性セレクター（Substring matching attribute selectors）を使ってみます。 本日のINDEX 「部分照合」属性セレクター [att^="val"]（att属性があって、値の先頭がこの文字から始まる） [att$="val"]（att属性があって、値の最後がこの文字で終わる） [att*="val"]（att属性があって、値のどこかにこ...

2023/02/15 11:15

【65-3】属性セレクター [att] [att=&quot;val&quot;] [att~=&quot;val&quot;] [att =&quot;en&quot;]

今回から属性セレクター（attribute selector）を使ってみよう。 属性セレクターは、要素に ・その「属性（attribute）」があるかどうか ・その属性の「値」がどうなっているか で要素を詳細に指定するセレクターです。 今回はその中の、属性存在＆属性値セレクター（Attribute presence and value selectors）って呼ばれてるのを使ってみよう。 これはセレクターLevel 2（わりと初期）からあるセレクターです。 ...

2023/01/18 15:52

【65-2】結合子を使うセレクター（E F, E &gt; F, E + F, E ~ F）

今回は「結合子」を使ったセレクターを使ってみよう。 単独で使えるセレクター同士を「結合子」でつなげば、よりピンポイントに要素を指定できます。 本日のINDEX 結合子（Combinators）で要素をより詳しく指定する 子孫結合子（E F）は子孫全部が対象 子結合子（E > F）は子要素の場合のみ 隣接兄弟結合子（E + F）は兄弟同士で直後のものだけが対象 一般兄弟結合子（E ~ F）は兄弟同士であとにあ...

2022/12/21 17:30

（ちょっとメモ）「,」で区切る「セレクターリスト」

セレクターの記事の途中ですが、今回はセレクターリスト（selector list）についてメモっておきます。 けっこうよく使うし、知っておくと便利です。 本日のINDEX 「,」で区切るセレクターリストを使うと便利！ 無効なセレクターがあるとリスト全部が無効になるよ 寛容なセレクターリストの :is( ) と :where( ) 参考： ・Selectors Level 4 W3C Working Draft ・CSS セレクター...

2022/12/01 15:53

【65-1】エレメンタルセレクター（要素名で指定するセレクター）

今回から CSSのセレクター（Selectors）を1つずつ見ていきましょう。 今回は、 ・要素名（HTMLタグの名前）で指定するセレクター ・すべての要素を指定するセレクター（ユニバーサルセレクターと言います） の2種類です。 2つ合わせて W3C仕様書ではエレメンタルセレクター（Elemental selectors）と呼んでます。 そもそもセレクターってなんだ？というかたは、前回の 【65】CSSのセレクターを整理しよう（セ...

2022/11/10 13:58

【65】CSSのセレクターを整理しよう（セレクター 一覧）

今回から、CSSのセレクター（Selectors）について まとめていこうと思います。 ずいぶん前の記事 【3】id とか classって何？（セレクタの「種類」を知っておこう）で ざっくりと セレクターの種類について書いていますが、もっと詳しくサンプルを作って試していこうと思います。 今回はまずは「セレクター 一覧いちらん」です。 本日のINDEX CSSのセレクターとは CSSのセレクター一覧 エレメン...

2022/10/20 13:50

【64-11】アイテム配置を一括指定する place-itemsショートハンド

place-itemsショートハンドプロパティは、 ・justify-itemsプロパティ（主軸） ・align-itemsプロパティ（交差軸） の2つを一括で指定するショートハンドです。 コンテナ側に指定します。 本日のINDEX place-itemsショートハンドの値 値が1個の場合の場合の注意点 place-itemsを使ってみた（サンプル） Grid Layout での place-itemsショートハンド Flexbox での place-itemsショート...

2022/09/23 15:09

【64-10】アイテムの個別配置を一度に指定する align-items (交差軸方向)

align-selfプロパティは アイテムが占めるエリア内での交差軸方向の位置を個別に決めるものでした。 align-selfプロパティではアイテムに指定してその1個だけに効きましたが、今回の align-itemsプロパティは、コンテナ側に指定し、同じ指定をアイテム全員に効かすことができます。 交差軸（ブロック軸）については、 【64-1】ボックス配置の全体的なルール（9コのプロパティまとめ） をご覧ください 本...

2022/08/26 13:58

【64-9】アイテムの個別配置を一度に指定する justify-items (主軸方向)

justify-selfプロパティでは指定したアイテム1個だけに効きましたが、 今回の justify-itemsプロパティは、同じ主軸方向の位置指定をアイテム全員にいっせいに効かすことができます。 ですのでコンテナ側に指定します。 主軸（インライン軸）については、 【64-1】ボックス配置の全体的なルール（9コのプロパティまとめ） をご覧ください 本日のINDEX justify-itemsプロパティの値 legacyとい...

2022/08/03 16:16

【64-8】アイテム個別の配置を一括指定する place-selfショートハンド

place-selfショートハンドプロパティは、 ・justify-selfプロパティ（主軸） ・align-selfプロパティ（交差軸） の2つを一括で指定するショートハンドです。 アイテム側に指定し、アイテムを個別に指定します。 本日のINDEX place-selfショートハンドの値 値が1個の場合の場合の注意点 place-selfを使ってみた（サンプル） Grid Layout での place-selfショートハンド Flexbox での p...

2022/07/06 12:23

【64-7】アイテム個別の配置を指定する align-self (交差軸方向)

align-selfプロパティは、コンテナ内のアイテム側に指定し、アイテムが占めるエリア内での交差軸方向の位置を決めます。 align-content と違って、アイテムを個別に指定するプロパティです。 アイテムの margin を調整するような感じです。 交差軸（ブロック軸）については、 【64-1】ボックス配置の全体的なルール（9コのプロパティまとめ） をご覧ください。 本日のINDEX align-selfプロパ...

2022/06/07 13:37

【64-6】アイテム個別の配置を指定する justify-self (主軸方向)

justify-selfプロパティは、コンテナ内のアイテム側に指定し、そのアイテムが占めるエリア内での主軸方向の位置を決めます。 justify-content と違って、アイテムを1つずつ個別に指定するプロパティです。 アイテムの margin を調整するような感じです。 主軸（インライン軸）については、 【64-1】ボックス配置の全体的なルール（9コのプロパティまとめ） をご覧ください 本日のINDEX justif...

2022/05/09 14:45

【64-5】アイテムの配置・分布を指定するショートハンド place-content

place-contentショートハンドプロパティは、前回と前々回の ・justify-contentプロパティ（主軸） ・align-contentプロパティ（交差軸） の2つを一括で指定するショートハンドです。 コンテナ側に指定します。 本日のINDEX place-contentショートハンドの値 値が1個の場合の場合の注意点 place-contentを使ってみた（サンプル） Grid Layout での place-contentショートハンド Flexbo...

2022/04/08 12:55

【64-4】アイテムの配置・分布を指定する align-content（交差軸方向）

今回は align-contentプロパティを使ってみよう。 これは前回の justify-content の縦バージョン（普通の横書きなら）みたいなやつ。 本日のINDEX align-contentプロパティは交差軸方向を担当 align-contentプロパティの値 align-contentプロパティを使ってみた（サンプル） Grid Layout での align-content Flexbox での align-content ボックス配置は、下記のように記事...

2022/03/16 14:20

【64-3】アイテムの配置・分布を指定する justify-content（主軸方向）

今回は justify-contentプロパティを使ってみよう。 これは、コンテナ内のアイテムの、主軸方向の配置や分布の方法を決めます。 コンテナ側に指定します。 本日のINDEX justify-contentプロパティは主軸方向を担当 justify-contentプロパティの値 justify-contentプロパティを使ってみた（サンプル） Grid Layout での justify-content Flexbox での justify-content ボ...

2022/02/15 12:56

【64-2】ボックス配置の「整列キーワード」まとめ

今回は、ボックス配置 （Box Alignment Module） のプロパティで使う「値」についてまとめます。 「値」は、全部キーワードで、これを「整列キーワード」と呼びます。 この「整列キーワード」を整理してみます。 本日のINDEX 整列キーワード（分布・整列で使う「値」） 位置的整列キーワード ベースライン整列キーワード 分布型整列キーワード オーバーフロー時の整列キーワード ...

2022/01/16 16:45

【64-1】ボックス配置の全体的なルール（9コのプロパティまとめ）

ボックス配置 （Box Alignment Module） は、アイテムの配置・分布のしかたを指定するプロパティ達です。 Flexbox、Grid Layout、マルチカラムなどのレイアウトモードで使います。 ボックス配置のためのプロパティは、以下の6種類があります。 ・justify-content ・align-content ・justify-self ・align-self ・justify-items ・align-items それに加えて、以下のショートハンドもあります。 ・place-c...

2021/12/17 13:23

【63】アイテム間の空きを指定する gap（row-gap, column-gap）

今回から Box Alignment Module にまとめられているCSSのボックスの配置のためのプロパティを見ていきましょう。 （Alignment（アラインメント）は「整列」などの意味） CSSのボックスの配置は、マルチカラムとか、フレックスボックス、グリッドレイアウトなどで、ボックス（並べたいアイテムたち）をどのように並べるか決める仕様です。 アイテムたちを、まとめてスペースの真ん中に置きたいとか、下にそろえたいと...

2021/11/20 14:17

（余談です）コロナワクチン打たない自由があってもいいんじゃないかな

また余談ですみません。 新型コロナウィルスのワクチン、やっと予約が取れて、2回接種終わりました。 集団接種会場でした。アナフィラキシーショックへの対策もされていたので、そのあたりをメモっておこうと思います。 で、記事を書いていたら、なんだか「ワクチン打つのは当たり前」という、いわゆるワクハラな記事になってる気がして、書き直しています。 私はコロナワクチン接種でデメリットがある人は打たない...

2021/10/19 13:27

（ちょっとメモ）IE10〜Edge15 では Grid Layout の仕様が違う

Grid Layout は、今ではほとんどのブラウザが実装しています。 IEは、9までは未対応、IE10, 11, Edgeの15 までは一部対応。Edge16以降は実装済み。 Can I use（2021年10月のスクショ↑） ただ IE10, 11, Edge15 までは、標準仕様ではなくて Microsoft の独自プロパティでの対応です。それでも簡単な Grid layout なら表示させられます。 2020年の Edge 79 から Chromiumが採用され、2021年からは、EdgeHTMLベース...

2021/09/30 14:04

【62-9】Grid Layout での order, position-absolute, z-index, margin

orderプロパティは、Gridアイテム の順番を変えるのに使えます。 また、position-absolute はグリッドのラインを基準に指定できたり、z-indexプロパティは position: staticでも指定できたりします。 Grid Layout の中で使うと、いつものプロパティがいつもとちょっと違います。 今回はこのあたりをメモっておきます。 本日のINDEX orderで Gridアイテムの表示順を自由に変える position-absolute は Gr...

2021/09/10 12:47

（余談です）モデルナワクチン2回目で副反応がほぼ出なかった件

新型コロナウイルスに感染された方、そのご家族や関係者の方は大変な思いをされていることでしょう。お見舞い申し上げます。 そして医療関係の方も、毎日しんどい思いでがんばってくださっていることを感謝しています。 私たちが今できることは、とにかく「感染しない」ように気をつけること。 そして（打つのが可能な人は）ワクチンを打つことだと思う。 ただ、ワクチン打ちたくても予約がなかなか取れない人もいるん...

2021/08/13 14:26

【62-8】gridショートハンドで Gridコンテナ側の指定を一括にまとめる

gridショートハンドプロパティは、Gridコンテナ側にする指定を一括でまとめます。 まとめるのは、 明示的グリッドを指定するプロパティ3個 ・grid-template-rows ・grid-template-columns ・grid-template-areas と、暗黙的グリッドを担当するプロパティ3個 ・grid-auto-rows ・grid-auto-columns ・grid-auto-flow の合計6個です。 とはいえ同時に指定できない（矛盾する）プロパティもあるので、gridショ...

2021/07/30 17:26

【62-7】暗黙的トラックを指定する grid-auto-rows, grid-auto-columns

Gridアイテムの数が増えて 設定したグリッドからはみ出す場合もあります。 こんなはみ出したアイテムが作る 暗黙的グリッドのトラックサイズをあらかじめ決めておけるのが、今回の grid-auto-rows と grid-auto-columnsプロパティです。 アイテム数が決まっていない（どんどん増える）場合に使えるやつです。 本日のINDEX grid-auto-rows と grid-auto-columns の値 暗黙的なグリッドとは 暗黙的...

2021/06/28 15:58

【62-6】Gridアイテムを自動配置する grid-auto-flowプロパティ

grid-auto-flowプロパティは、Gridアイテムを自動で流し込む方法を制御します。 これは、Gridレイアウトの一番最初の記事、 【62-1】Grid Layout の grid-template-rows, grid-template-columns でもちょっと紹介しました。 grid-template-rows と grid-template-columnsプロパティで、単にトラックサイズだけ指定したら、アイテムが勝手に左上から自動的に流し込まれました。 これは、grid-auto-flowプロパテ...

2021/05/29 17:17

【62-5】アイテム側の位置指定を一括する grid-areaショートハンド

grid-areaショートハンドプロパティは以下の 4つの値を一括で指定できます。 ・grid-row-start ・grid-column-start ・grid-row-end ・grid-column-end 前回は、 grid-rowショートハンド（grid-row-start、grid-row-end を一括指定） grid-columnショートハンド（grid-column-start、grid-column-end を一括指定） を使いましたが、今回は 4つすべてをまとめます。 本日のINDEX grid-areaの値 ...

2021/05/01 12:38

【62-4】アイテム側で位置指定をする grid-row, grid-columnプロパティ

これまでは主に Gridコンテナ側でグリッドを切る指定をしました。 今回は Gridアイテム側に指定して、アイテムの位置を決める方法を使ってみよう。 grid-rowプロパティと grid-columnプロパティは、ラインの番号やライン名などを使ってGridアイテムを置く位置を決めるプロパティです。 セルを複数またがらせてアイテムを配置することもできます。 本日のINDEX 自動配置と固定配置について 自動配置 ...

2021/04/03 13:58

【62-3】セルやエリアを一括指定する grid-templateショートハンド

今回は、grid-template ショートハンドプロパティ を使ってみましょう。 これは以下の3つのプロパティのショートハンドです。 ・grid-template-rows ・grid-template-columns ・grid-template-areas grid-template-rows と grid-template-columns はこちら↓をご覧ください。 【62-1】Grid Layout の grid-template-rows, grid-template-columns grid-template-areas はこちら↓ 【62-2】エリアに名前をつけて配置する...

2021/03/05 19:03

【62-2】エリアに名前をつけて配置する grid-template-areasプロパティ

grid-template-areasプロパティは、Grid Layout のエリアに好きな名前を指定することができます。これは Gridコンテナ側に指定します。 Gridアイテム側で grid-areaプロパティでエリア名を書くことで、簡単にアイテムを配置できます。 grid-template-areas と、最後の areas が複数形になっていることに注意。 複数のエリアを指定するから。「s」を書き忘れると何も起こりません。 一方のアイテム側で使う grid-area ...

2021/02/09 17:53

（ちょっとメモ）サイズ指定で使う値について (min-content, repeat( ) )

前回やった grid-template-rowsと grid-template-columnsプロパティは、Grid Layout（グリッドレイアウト）のトラックサイズを決めるものでしたね。 その指定のときに使う値あたいを知っておく必要があるので今回の記事にまとめました。 これらの値は Grid Layout だけでなく他の要素のサイズ指定に使えるものもあります。 本日のINDEX トラックサイズを指定するための値 <length> や パーセンテ...

2021/01/14 13:49

【62-1】Grid Layout の grid-template-rows, grid-template-columns

今回から Grid Layout を作ってみよう。 Grid Layout（グリッドレイアウト）は、親要素をグリッド（格子）状に分割してできた「セル」に子要素を割り付けていく CSSのレイアウト方法です。 複数のセルを結合させることもできるし、HTMLソースの記述順じゃなくても自由にレイアウトできたりします。 ウェブページ全体のフォーマットを作るのにも適しています。 デバイスに合わせてレイアウトを変えるのも簡単。 （...

2020/12/17 12:44

（ちょっとメモ）ブラウザはどうやって カラムの幅を決めるか

マルチカラムで、カラム幅を計算せずに適当に指定してもカラムがコンテナにピッチリ収まるのは「カラム幅」や「カラム数」を決める計算式が W3Cの仕様として決まっているからなんです。 これは別に知らなくても困らないけど、読んでてへ〜と思ったのでメモっておきます。 今回はメモと言うより余談かも。 マルチカラムに関しては、下記のように記事を分けています。 【57-1】マルチカラムのカラム数を決...

2020/11/12 12:55

【61】各カラムの埋め方を決める column-fillプロパティ

マルチカラムに関するプロパティの続きです。 column-fillプロパティは、マルチカラムで各カラムの内容の埋め方（カラム内の行数）をどうするか決めます。 本日のINDEX column-fillプロパティの値 column-fillプロパティを使ってみる マルチカラム関連のプロパティは、下記のように記事を分けています。 【57-1】マルチカラムのカラム数を決める column-countプロパティ 【57-2】マルチカ...

2020/10/20 15:24

【60】マルチカラム内で段抜きができる column-spanプロパティ

マルチカラムに関するプロパティの続きです。 今回の column-spanプロパティは、マルチカラム内で段だん抜ぬきを指定できます。 段抜きとは編集・印刷用語で、新聞や雑誌などの段組みレイアウトの中で、見出しや写真などを複数の段にまたがってレイアウトすること。 CSSの column-spanプロパティによる段抜きは「全段抜き」のみ可。（DTPのように2段抜き 3段抜きとかはできません） でも、これができるとレイアウ...

2020/09/23 12:31

【59-4】カラム間の罫線をまとめて指定する column-rule

マルチカラムの各カラム間の罫線に関するプロパティの続きです。 今回は、罫線関連を一括指定する column-ruleショートハンドプロパティを使おう。 罫線の「スタイル・幅・色」をこのプロパティでまとめて指定できます。 本日のINDEX column-ruleプロパティの値 column-ruleプロパティを使ってみる マルチカラム関連のプロパティは、下記のように記事を分けます。 【57-1】マルチカラムのカラム...

2020/08/26 11:10

【59-3】カラム間の罫線の色を指定する column-rule-colorプロパティ

マルチカラムの各カラム間の罫線に関するプロパティの続きです。 今回は、罫線の「色」を指定する column-rule-colorプロパティを使ってみよう。 本日のINDEX column-rule-colorプロパティの値 column-rule-colorプロパティを使ってみる マルチカラム関連のプロパティは、下記のように記事を分けます。 【57-1】マルチカラムのカラム数を決める column-countプロパティ 【57-2】マルチカ...

2020/08/09 10:40

【59-2】カラム間の罫線の幅を指定する column-rule-width

マルチカラムの各カラム間の罫線に関するプロパティの続きです。 今回は column-rule-widthプロパティを使ってみよう。 前回の column-rule-styleプロパティは、各カラムの間の罫線の「スタイル」を決めるんでしたね。 これはデフォルト値が「none」や、罫線非表示の「hidden」以外の値を指定すれば罫線が表示されるんでした。 そのときの罫線の「幅」は「medium（中くらいの太さ。3px）」になっています。 「medium...

2020/07/22 14:02

【59-1】カラム間の罫線のスタイルを指定する column-rule-style

マルチカラムの続きです。 column-rule-styleプロパティは、各カラムの間に罫線を入れることができます。 「rule（ルール）」はもとは「定規じょうぎ（=ものさし）」のことで、そこから「規則」「ルール」という意味で使われますが、印刷用語では「罫線」を指します。 カラムの罫線のために4つのプロパティが用意されています。 ・column-rule-styleプロパティ（罫線の「スタイル」を指定） ・column-rule-widthプロ...

2020/07/03 13:06

【58】各カラムの間隔を指定する column-gapプロパティ

column-gapプロパティは、カラム同士の間隔を指定することができます。 column-gapプロパティは、マルチカラムだけでなく、フレックスボックス、グリッドレイアウトでも使うことができます。 （なのでW3Cではマルチカラムとは別の Box Alignment Module Level 3 に記載されています） 今回はマルチカラムでの column-gapプロパティの使い方を見てみましょう。 本日のINDEX column-gapプロパティの値 ...

2020/06/13 12:29

【57-3】カラム数と幅をまとめて指定する columnsショートハンド

columnsプロパティは、column-countプロパティと column-widthプロパティの値をひとまとめに指定できるショートハンドプロパティです。 本日のINDEX columnsプロパティの値 columnsプロパティを使ってみる マルチカラム関連のプロパティは、下記のように記事を分けます。 【57-1】マルチカラムのカラム数を決める column-countプロパティ 【57-2】マルチカラムのカラム幅を決める col...

2020/05/21 12:00

【57-2】マルチカラムのカラム幅を決める column-widthプロパティ

column-widthプロパティは、 マルチカラムでの各カラムの幅を指定します。 前回の column-countプロパティでは、このcolumn-widthプロパティは指定していなかったので値はデフォルトの column-width: auto になっていました。 autoだとブラウザが自動でカラム幅を決めてくれます。 column-widthプロパティでカラム幅を指定しても、カラム同士の間隔（column-gap）やコンテナ全体の幅によって、ブラウザは 柔軟にカラム...

2020/05/04 12:34

【57-1】マルチカラムのカラム数を決める column-countプロパティ

今回から マルチカラム レイアウト（Multi-column Layout） を使ってみよう。 マルチカラムとは段組みのこと。 ボックスレベルの要素に指定すれば、中のテキストが勝手に複数のカラムになって並ぶという仕様です。 フレックスボックスや、グリッドレイアウト（これはまだ記事にしてません）も、横並びにレイアウトできるヤツですが、親要素の中にある子要素がアイテムになります。 マルチカラム レイアウト は小要素なしで...

2020/04/30 15:33

【56】ユーザーのテキスト選択などを制御する user-selectプロパティ

user-selectプロパティは、ユーザーが要素内のテキストや画像をどのように選択できるか指定します。 user-selectは、W3C の Basic User Interface Module Level 4 で登場するプロパティで、2020年4月現在まだドラフトですが、たいていのブラウザがベンダープレフィックスを付ければ反応するようです。（参考：Can I use 2020年4月記） 本日のINDEX user-selectプロパティの値 user-selectプロパティ...

2020/04/15 18:04

【55】ボックスのリサイズを可能にする resizeプロパティ

resizeプロパティは、ユーザーが要素のサイズ変更をできるかどうか指定できます。 リサイズ可能にするなら、x軸方向だけか、y軸方向か、どっちとも変更可能かも指定できます。 ただ、resizeプロパティは、IE が未対応。 モバイルは iOS Safari が未対応です。（参考：Can I use 2020年4月記） 本日のINDEX resizeプロパティの値 resizeプロパティの指定サンプル <textarea>要素で試してみた ...

2020/04/04 13:42

【54】テキストが はみ出る場合に「...」を付ける text-overflow

ボックス内のテキストがオーバーフロー（はみ出す）している時、「まだ続きがあるよ」という意味で、行末に「...」を付けたりしますね。 こんなかんじで。テキストにまだ続きがあることを示すために「省略符（ellipsis）」を使います。 text-overflowプロパティは、この「...」などの省略符（ellipsis）を付けるかどうか決めるプロパティです。 white-spaceプロパティの値が「nowrap」だったり、長〜い英単語（UR...

2020/03/30 13:07

（ちょっとメモ）テキスト選択時のハイライトを変える ::selection

テキスト選択時のハイライトなどを、::selection 疑似要素 で変更することができます。 ちなみに、この段落のハイライトカラーを変えています。テキストを選択してみてください。 今回はこの ::selection 疑似要素を使った小ネタをメモっておきます。 本日のINDEX ハイライト疑似要素（highlight pseudo-elements） ハイライト疑似要素で使える CSSプロパティ ::selection を使ったサ...

2020/03/18 09:47

【53】キャレットの色を変えられる caret-colorプロパティ

caret-colorプロパティは、名前の通り、キャレットの色を指定します。 「キャレット」とは、テキスト入力時に入力位置を示すもの。 たいていは、縦のラインで点滅しています。 CSS Basic User Interface Module Level 3 ではこのcaret-colorプロパティだけですが、草案中の Level 4 では、caret-shapeプロパティ（キャレットの形状）も加わり、caretショートハンドプロパティも追加されています。将来これ...

2020/03/01 14:50

（ちょっとメモ）Googleフォームで簡単・無料でフォームが作れる！

Googleフォームは、気軽に無料でフォームが作れるサービスです。 専門知識（HTML、CSS、CGI、PHPとか）がまったく無くても簡単に作れます。 パーティの招待状、アンケートなどの「テンプレート」も用意されています。 フォームは Googleのサーバに置かれるので、自分のサーバのパーミッションとか面倒な設定は一切なし。 フォームを公開する方法も、メールやHTML埋め込みなど複数用意されています。 回答の集計も簡単にで...

2020/02/04 12:11

【52】カーソルの表示をいろいろ変えられる cursorプロパティ

今回から、UI（User Interface ユーザーインターフェイス）のためのプロパティを使ってみよう。 最初はcursorプロパティ。これは、名前のまんま「カーソル」の表示を指定します。 <a>要素を使わずに JavaScriptなどでリンクを貼った時、カーソルをではなくにするなどの操作ができます。 また、自分で作った画像をカーソルとして使うこともできます。 cursorプロパティは、当然ですがPCブラウザのみで適用...

2020/01/04 20:04

【51】テキストの強調マークの位置を決める text-emphasis-position

text-emphasis-positionプロパティは 強調マーク（emphasis mark = 圏点）の「位置」を指定します。 横書きなら「上」か「下」のどちらか、縦書きなら「右」か「左」かを指定できます。 圏点は、日本語の他に 韓国語・モンゴル語・中国語でも使うそうですが、中国語の横書きの場合は 圏点を「下」につけるらしいです。 text-emphasis-positionプロパティの値は、text-emphasisショートハンドに含まれないので、ショート...

2019/12/10 17:46

【50-3】テキスト強調マークの種類と色のショートハンド text-emphasis

text-emphasisプロパティは、text-emphasis-style と text-emphasis-color の値を 一括で指定します。 text-emphasisショートハンドは、Firefox, Safari（iOS Safari も含む）は対応。 Chromeは、ベンダープレフィックス「-webkit-」付きで対応。 IE, Edge は未対応です。（参考：Can I use 2019年11月記） emphasis mark関連のプロパティは、このように記事を分けています。 【50-1】テキストの強調マ...

2019/11/13 14:45

（余談です）クイックスタートのiPhone間直接データ転送（iOS 12.4〜）

また余談ですいません。 iPhoneのクイックスタートの iPhone間での「直接データ転送」 がビックリするくらいラクだったので、手順をメモっておこうと思います。 （5年愛用した iPhone6 ですが、とうとう限界を感じて 11に買い換えましたww） アプリなどが全部そっくりそのまま移植されるので、すぐに新しい iPhoneが使えます。 ほんっとに何もしなくていい。（自分でアプリを再ダウンロードして設定して...と思ってた） ...

2019/10/17 15:41

【50-2】テキストの強調マークの色を決める text-emphasis-color

text-emphasis-colorプロパティは、前回やった text-emphasis-styleプロパティで指定した「圏点」の「色」を指定します。 text-emphasis-colorプロパティは、Firefox, Safari（iOS Safari も含む）は対応。 Chromeは、ベンダープレフィックス「-webkit-」付きで対応。 IE, Edge は未対応です。（参考：Can I use 2019年9月記） 強調マーク（emphasis mark）関連のプロパティは、text-emphasis ショートハンド...

2019/09/23 13:07

【50-1】テキストの強調マークの種類を決める text-emphasis-style

強調マーク（emphasis mark）とは、日本語で「圏点（けんてん）」と言って、文章の重要な部分に 1文字ずつ「﹅」などを付けるアレです。 「emphasis（エンファシス）」は「強調・重点」と言った意味。 「圏点（けんてん）」以外に「傍点（ぼうてん）」「脇点（わきてん）」とも言います。 強調のために文字に点を打つのは日本語だけ（？）っぽいです。中国語などで文字に打つ点は発音（イントネーション）のため...

2019/08/28 17:02

（余談です）Wow!ID が au ID になってたけど...すんなり削除できました

また余談ですいません。 auを解約した後に請求内容を見るために入るはめになった Wow!ID を、 やっと削除できました。 au解約後に Wow!ID なるものに登録しなければならなかった件はこちらに （余談です）Wow!IDとは（au解約後に au IDから移行する） au解約そのものはこちらに記事にしています。 （余談です）iPhone（au）を SIMロック解除してマイネオDプランへ Wow!ID に入ってすぐには「半年後に削除できる」...

2019/08/06 18:58

【49】アンダーラインの位置を決める text-underline-position

text-underline-positionプロパティはテキストの下線（underline）の位置を指定します。 このプロパティは、left や right という値もあるので、CKJ（中国語・韓国語・日本語）の 縦書き の時に、ラインを右に引くか左にするかも指定できます。 text-underline-positionプロパティはもともと CSS2 での IE の独自仕様でした。 しかも IE での値は「above（テキストの上または右）・below（テキストの下または左）」...

2019/07/31 12:00

【48-2】ライン装飾が文字を横切るかを決める text-decoration-skip-ink

text-decoration-skip-inkプロパティは、テキストのライン装飾が テキストを横切る時、そのまま線を引くか、テキストの部分の線をスキップするか決めます。 これは、text-decoration-skipプロパティの値だった「ink」がプロパティとして独立したもの。 W3C の Text Decoration Module Level 4（ドラフト）で仕様として上がっています。 というわけで、まだ勧告されてはいませんが一応書いておきます。（2019年7月記） ...

2019/07/29 16:17

【48-1】ライン装飾をしない対象を決める text-decoration-skip

text-decoration-skipプロパティは、text-decoration で付く装飾ラインの「スキップする（ラインを引かない）」対象を指定します。 text-decoration-skipプロパティは、Text Decoration Module Level 3 勧告候補で一度は仕様に登場しましたが、Level 4 に先送りされました。 Text Decoration Module Level 3 は現時点では勧告候補、Level 4 は初回の草案（First Public Working Draft）です。 というわけでtext-decorat...

2019/07/03 17:04

（余談です）注意｜Amazon.co.jp を装った詐欺メールが来ちゃった

また余談でスミマセン。 Amazon.co.jp を装ったメールで「Amazonログイン」のボタンを、思わず押しちゃった話です。パスワードなどを入力する前に変だと気づきましたが。皆様ご注意ください。 Gmailを Mac OS のメールアプリ（「メール」）で使っています。 で、「メール」内でも、Gmailが迷惑メールだと判断したものは「迷惑メール」フォルダに入るんですが、普通のメールでも迷惑メールになることがあるので一応内容を...

2019/06/09 13:33

[72] デバイスに合わせた画像を表示できる picture要素

<picture>要素は、HTML5.1から追加された要素です。 picture（ピクチャー）はそのまんま「画像」という意味。 <picture>要素は、<video>要素や <audio>要素と同じように、<source>要素を子要素にして、表示する画像の選択肢を作れます。 子要素には <img>要素も使います。 この <img>要素の表示領域に <source>要素で選択肢にした画像ファイルを表示する仕組みです。...

2019/06/07 17:20

記事を追加修正しました→（余談です）Wow!IDとは

下記の記事に ちょっと追加しました。（余談の記事でスミマセン。興味ない方はスルーで） （余談です）Wow!IDとは（au解約後に au IDから移行する） 追加は記事末のこの部分です。 →Wow!ID の削除（9ヶ月後ではできなかった...） スマホの au解約後に、最後の請求額を確認するために au IDから「Wow!ID」に移行する必要がありました。 で、用が済んだので「Wow!ID」を削除しようとしたところ 「約半年間は削除できな...

2019/05/11 19:11

[71] img要素の srcset属性で画像を切り替えよう

<img>要素には HTML5.1から srcset属性が使えるようになりました。 この属性で複数の画像を指定し、条件に合わせてブラウザに画像を選ばせることができます。 ということで今回は、<img>要素での srcset属性の使い方を サンプルで試してみます。 ★初期の [9-1] 画像を表示しよう img要素 は、HTMLを始めたばかりの方に向けた記事なので、 srcset属性（HTML5.1から追加）については記載していません（...

2019/04/27 16:30

【47-4】text-decorationショートハンドプロパティでまとめて指定

text-decoration ショートハンドプロパティは、 text-decoration-line text-decoration-color text-decoration-style の値をまとめて指定することができます。 上記3つのプロパティの記事はこちらです。 【47-1】テキストのライン装飾の種類を決める text-decoration-line 【47-2】テキストのライン装飾の色を決める text-decoration-color 【47-3】テキストのライン装飾を波線にもできる text-decoration-sty...

2019/04/12 15:19

【47-3】テキストのライン装飾を波線にもできる text-decoration-style

text-decoration-styleプロパティは、そのまんま「テキストをデコレーションするためのラインのスタイル」を指定します。 ブラウザデフォルトでは、テキストのライン装飾の「スタイル」は 実線（solid） です。これを 波線（wavy） やら 点線（dotted） に変えたりできるってやつです。 text-decoration-styleプロパティは、Chrome, Firefox, Opera は対応。 Safari（iOS Safari も含む）は一部の値に未対応。そ...

2019/03/29 16:20

【47-2】テキストのライン装飾の色を決める text-decoration-color

text-decoration-colorプロパティは、そのまんま「テキストをデコレーションするためのラインの色」を指定します。 例えば、<a>要素には、ブラウザのデフォルトで「下線」が付き、色は文字色（<a>のcolor）と同じですが、これを「文字色とは別の色」に変えたい時に使います。 text-decoration-colorプロパティは、Chrome, Firefox, Opera は対応。 Safari（iOS Safari も含む）は、ベンダープレフィ...

2019/03/22 14:08

【47-1】テキストのライン装飾の種類を決める text-decoration-line

CSS2までは text-decorationプロパティで、テキストの装飾の種類を指定しました。 テキストの装飾（text-decoration）と言っても「下線」「上線」「取り消し線」のラインだけですけどね。 CSS3（CSS Text Decoration Module Level 3 W3C 勧告候補）からは、ライン装飾の「色」と「スタイル」も指定できるようになり、 text-decoration-lineプロパティ（ラインの種類） text-decoration-colorプロパティ（ラインの色） t...

2019/03/09 17:01

【46】テキストの方向性を操作する unicode-bidi と direction

英語や日本語などの言語は横書きでは「左から右」にテキストが流れますが、アラビア語やヘブライ語などは「右から左」に書きます。 これらを混在させた（英語や日本語の中にアラビア語とか）書字方向が混在しているテキストは「双方向テキスト（Bi-directional text）」や「BiDi（バイダイ）」と呼ばれます。 「双方向テキスト」を正しく処理するアルゴリズムを「双方向アルゴリズム」と言い、ブラウザはこのアルゴリズ...

2019/02/13 15:56

（余談です）Google+ 終了で「Google+1」ボタンを削除しました

「Google+」終了しちゃいますね。 参考： Google+（個人向け）は 2019年4月2日にサービスを終了します - Google+ヘルプ それに伴い、この「ほんっとに...」から「Google+1」のシェアボタンも外しました。 2019年2月時点で、このシェアボタンを押しても「アクセスできません」的な文言が出てきます。 ついでに↓この記事にも「Google+終了」の注釈を入れました。 （ちょっとメモ）FC2ブログに はてブ と Google+1 の...

2019/02/07 18:04

記事を追加→【23-2】重なり順のルールと 新しいスタックコンテキストができる条件

まずは、下記の過去記事を修正しました。 【23-1】要素の重なり順の上下関係を指定する z-indexプロパティ こちらは↑私の詰めの甘さで「位置指定された要素（position値がstatic以外）」のみが新しいスタックコンテキストを作るように書いていましたが、実際には他のプロパティを指定しても新しいスタックコンテキストができます。 コメントを頂いて気が付きましたので、記事を全面修正しました。 また、関連記事を続けて...

2019/01/26 13:51

（ちょっとメモ）縦書きでの字下げ・下線・リストなどを試してみた

前回まで3回にわけてライティングモードのプロパティを見てきました。 今回は、そのライティングモードでできる縦書きの表示で、字下げや下線、リスト、ルビ、上付き文字・下付き文字、表組み（table）が、どんな表示になるか、どう調整したら良いかをサンプルで試してみます。 前回までの記事はこちら↓ 【44-1】日本語の縦書きもできちゃう writing-modeプロパティ 【45-2】縦書きでの文字の向きを決める text-orie...

2019/01/16 18:12

【45-3】縦書きで「縦中横」ができる text-combine-upright

text-combine-uprightプロパティは、「縦中横（たてちゅうよこ）」を指定できます。 「縦中横」とは「縦書きの中の横組み」という意味の印刷・編集用語です。 例えば縦書きの文章で「20km」を1文字ずつ縦に並べるんじゃなく「20」と「km」で横に組んでから縦に並べると読みやすいですね。 こんなふうに「縦組み」の中で、2〜4文字くらいまでを1文字分のスペースで横組みにすることを「縦中横」といいます。 「combine...

2018/12/26 15:17

【45-2】縦書きでの文字の向きを決める text-orientation

text-orientationプロパティは、縦書きモードで横向きに回転している半角英数字を1文字ずつ「縦向き」にして縦に並べることができます。 orientation（オリエンテーション。略してオリエン）は「方向付けのためのミーティングや行事」の意味でよく使いますが、ここでは単純に「向き（方向）」の意味。 text-orientation は「テキストの向き」って意味だそうです。 text-orientationプロパティは、IE11, Edge は未対応...

2018/12/13 15:16

【45-1】日本語の縦書きもできちゃう writing-modeプロパティ

今回からしばらく、ライティングモードについて見ていきましょう。 ライティングモードは、W3C の CSS Writing Modes Level 3 でまとめられていて、 テキストの向き（横書き・縦書き・左から右・右から左 など）を指定するためのプロパティ群です。 今回はまず writing-modeプロパティを使ってみます。 writing-modeプロパティは、テキストが「横書き」か「縦書き」か、行の流れが「右から左」か「左から右」かを指定...

2018/11/29 16:28

【44】タブ文字の幅を決める tab-sizeプロパティ

tab-sizeプロパティは文字通り「タブ（Tabキーを押してできるスペース）」の「幅」を決めます。 ですのでこのプロパティは、 ・<pre>要素と <code>要素を使ってソースコードを表示する時 ・CSS の「white-space: pre」「white-space: pre-wrap」でテキストを表示する時 に使います。 要は「タブ」がそのまんま表示される時に「タブ」の表示幅を自由に設定できるプロパティです。 <pre>要素と &l...

2018/11/08 15:51

【43】テキストを大文字・小文字に変換する text-transform

text-transformプロパティは、テキストを大文字・小文字に変換できます。 このプロパティは欧文テキスト専用。日本語テキストは大文字小文字の区別無いから。 テキストをすべて大文字、または小文字で表示したり、単語の最初の文字だけ大文字にしたりできます。 「transform」は「変換」の意味です。 CSS 2 からあるプロパティで、ほとんどのブラウザが対応しています。 ただし、Text Module Level 3 の草案で「full-...

2018/11/01 16:05

【42】句読点などをボックス外にぶら下がらせる hanging-punctuation

hanging-punctuationプロパティは、句読点の「ぶら下がり」表示をします。 句読点（ , . 、。）や括弧（「（ " ' ）をボックスの外側に出して表示することを「ぶら下がり」と言います。 「ぶら下がり」は印刷用語。昔から出版業界で使われている技法です。 「hanging（ハンギング）」は「吊るす・ぶら下げる」、「punctuation（パンクシュエーション）」は「句読点」という意味で、 hanging-punctuation はそのまん...

2018/10/12 16:46

【41】句読点などが行頭に来るかどうか決める line-break

line-breakプロパティは、改行ルール（禁則処理）の厳密さを指定するプロパティ。 「line-break（ライン ブレイク）」とは「改行」の意味です。 このプロパティは CJK（中国語、日本語、ハングル）のみが対象だそうです。 各ブラウザにはあらかじめデフォルトの改行ルールが設定されていて、自然改行した後の行頭に「句読点」「記号」などの約物が来ないようになっています。 日本語の場合は、撥音・拗音・促...

2018/09/25 18:19