Web制作をしていると、番号付きリストの数字のフォーマットを変えたり、順番を変えたりしたいシチュエーションが少なからずあると思います。また運用の中でそのような依頼をされることもしばしばあります。

そんな時に色々検索してやり方を探してみても、擬似要素やJSでゴチャゴチャするなど面倒くさそうな方法の解説記事ばかりが目立ちます。そこで、<ol>の番号をカスタマイズする比較的シンプルでスマートな方法をまとめてみました。すぐ思い出せるようにブックマーク推奨です！

番号を降順にする方法

リスト番号の順番を降順にする最も簡単な方法は、<ol>タグにreversed属性をつける方法です。これだけで並び順が・・・3,2,1の降順になります。

See the Pen ol reversed by toshihide (@toshihide2000) on CodePen.

カウントの開始番号を変更する方法

カウントの開始番号を変更するには、<ol>タグにstart属性を追加します。

See the Pen ol カウントスタート変更 by toshihide (@toshihide2000) on CodePen.

<li>タグにvalue属性をつけると、途中から番号を変更することもできます。

See the Pen リストのスタート番号を途中から変更 by toshihide (@toshihide2000) on CodePen.

カウント開始番号の変更、途中からの番号の変更、並び順の変更は組み合わせることができます。

See the Pen リストを逆順にしてスタート番号を変更 by toshihide (@toshihide2000) on CodePen.

カウントの倍数を変更する方法

デフォルトでは1ずつ増えていくリスト番号ですが、CSSのみで簡単に増え方を変更することもできます。

See the Pen リスト番号を2の倍数に変更 by toshihide (@toshihide2000) on CodePen.

まず<ol>にcounter-reset:list-counter;を指定することでカウンターを設定します。

次に、子要素の<li>にcounter-increment:list-counter 2;を指定し、カウンターが2ずつ増えるようにしています。

そして、それを::marker擬似要素にcontent: counter(list-counter);を指定して表示させています。

::marker擬似要素
::marker はリスト項目の箇条書き記号ボックス（黒丸や番号が入ったもの）を選択します。
これは<li>要素や<summary>要素などのdisplay:list-itemが設定された要素で利用できます。

リスト番号の前後に文字を挿入

上記の応用で、リスト番号の前後に文字を追加することができます。これにより、（１）や項目1といった柔軟なリスト番号を実現可能です。

See the Pen olの番号をカスタム by toshihide (@toshihide2000) on CodePen.

基本的には上記の「カウントの倍数を変更する方法」と同じです。この例では、::markerの指定を content: "1-"counter(item)". ";としています。

カウンターの前後に文字列を挿入することで、1-1.,1-2.,・・・という表記を実現しています。

リストのマーカーや番号をリストの内側に表示する方法

リストの番号は、デフォルトではリストの外側に表示されます。

list-style-position:inside;をolに指定することで、<li>の幅に::marker擬似要素を含めることができます。

See the Pen list-style-position by toshihide (@toshihide2000) on CodePen.

番号の種類を変える方法

リスト番号は、デフォルトではアラビア数字で表示されます。

このリスト番号は、アルファベットやローマ字などに変更することができます。

数字をアルファベットに変更

type属性で指定する

<ol>のtype属性をtype="A"とすることで、リスト番号をABC順にすることができます。

type 属性は、そのリスト番号について前後の文章で言及する場合にのみ使用することが推奨されます。装飾の都合で記号を変更する場合には type 属性ではなく後述のCSS を使用すべきです。

See the Pen リスト記号をアルファベットに変更（type属性） by toshihide (@toshihide2000) on CodePen.

CSSで指定する

olにlist-style-type: upper-latin;を指定することで、大文字のアルファベット順にすることができます。

list-style-type: lower-latin;を指定することで小文字のアルファベット順にすることができます。

See the Pen リスト記号をアルファベットに変更（CSS） by toshihide (@toshihide2000) on CodePen.

数字をローマ字に変更

type属性で指定する

<ol>のtype属性をtype="I"とすることで、リスト番号をローマ数字にすることができます。

See the Pen Untitled by toshihide (@toshihide2000) on CodePen.

CSSで指定する

olに list-style-type: upper-roman;を指定することで、大文字のローマ数字順にすることができます。

See the Pen リスト記号をローマ数字に変更（CSS） by toshihide (@toshihide2000) on CodePen.

他にも漢数字など様々な記号を使用することができます。詳しく知りたい方はhttps://developer.mozilla.org/ja/docs/Web/CSS/list-style-type

2024年7月22日

【ブックマーク推奨】番号付きリスト（ol）の番号をカスタマイズする方法大全

2024年7月18日

Expoのeas build –platform ios –profile developmentで.Trashへの権限がなくてつまずく理由と対策

2024年7月17日

github上でデフォルトブランチを変更する方法

2024年3月17日

【全ブラウザ対応】　スクロールバーを非表示にするCSS

2024年2月10日

createDocumentFragment()で複数の要素をひと手間で追加する

2024年2月9日

文字列から数字だけを抽出する

エラー内容:Failed to upload the project tarball to EAS Build

Expoでdevelop buildをしようとすると、次のようなエラーが出る。

Failed to upload the project tarball to EAS Build
Reason: EPERM: operation not permitted, scandir '/Users/yourname/.Trash'
Error: build command failed.

.Trashへの読み書き権限がないというエラーだが、根本原因はそこではない。

解決方法

git initしていないことが大元の原因。

gitに接続すればこのエラーは解決する。

$ git init
$ git add .
$ git commit -m "initial commit"

Github上だけでデフォルトブランチを変更する方法

リポジトリにアクセス

settings→General→Default branch

⇄入れ替えアイコンをクリックしてデフォルトにしたいブランチを選択する

「Update」ボタンで保存する

Updateボタンを押すのを忘れないようにしましょう

【おまけ】git上でデフォルトブランチを変更するコマンド

$ git symbolic-ref refs/remotes/origin/HEAD refs/remotes/origin/main 

• git symbolic-ref: シンボリックリファレンスを操作するコマンドです。シンボリックリファレンスは、別のリファレンスを指す参照（エイリアス）です。
• refs/remotes/origin/HEAD: リモートリポジトリoriginのデフォルトブランチを指す参照です。
• refs/remotes/origin/main: デフォルトブランチとして設定するリファレンスです。

サンプルコード

ブラウザ毎に指定方法が異なるので注意が必要です。以下のサンプルコードをそのまま使うと良いでしょう。

See the Pen hide scrollbar by toshihide (@toshihide2000) on CodePen.

Chrome/Safari

.textbox::-webkit-scrollbar { display: none;
}

Firefox

.textbox { scrollbar-width: none;
}

Edge

.textbox { -ms-overflow-style: none;
}

大量の要素を生成して挿入したいとき、毎回DOMにアクセスして一つ一つ挿入していくのはパフォーマンスの観点から良くないとされています。

createDocumentFragmentを使うことで、大量の要素をまとめて一度に追加することができます。

document.createDocumentFragment()

document.createDocumentFragment() は、新しい空の DocumentFragment オブジェクトを作成します。このDocumentFragment は、DOM ツリーの一部ではなくメモリ上に存在する軽量なドキュメントオブジェクトで、複数の要素を一度にDOMツリーに追加したり、置き換えたりするために使われます。

特徴

• DocumentFragment は、DOMツリーの一部ではないため、その中に要素を追加してもページの再描画が引き起こされません。これにより、パフォーマンスを向上させることができます。
• appendChild() や insertBefore() などの DOM 操作を DocumentFragment に対して行うことができ、それらの操作が完了した後で、一度に本来の DOM ツリーに挿入することが可能です。
• DocumentFragment に追加されたノードは、その DocumentFragment をDOMに挿入する際に元のフラグメントから削除され、DOMツリーに移動します。

使用例

document.createDocumentFragment() を使用して、大量の<li>要素を <ul> 要素に効率的に追加する例を考えてみましょう。

// ul要素を作成
var ul = document.createElement('ul');
// 新しい DocumentFragment を作成
var fragment = document.createDocumentFragment();
// リスト項目を作成して DocumentFragment に追加
for (var i = 0; i < 100; i++) { var li = document.createElement('li'); li.appendChild(document.createTextNode('項目 ' + (i + 1))); fragment.appendChild(li);
}
// DocumentFragment を ul要素に追加
// これにより、フラグメント内のすべてのli要素がDOMに挿入される
ul.appendChild(fragment);
// ul要素をDOMに追加
document.body.appendChild(ul);

このコードは、DocumentFragment内に100個の<li>要素を作成し、すべてを一度に <ul> 要素に追加しています。こうすることで、<li>を追加するたびにDOMツリーが更新されるのを避けられ、パフォーマンスが向上します。

えんどう

DOMツリーではないサブの空間に要素を貯めておいて、任意のタイミングで本来のDOMに丸ごと挿入するイメージです。

えんどう

replaceと正規表現を用いて文字列から数字だけを抽出してみます。

次の文字列から、年度だけを抜き出したい場合を考えてみましょう。

var str = 'happy new year 2024';
var num = str.replace(/[^0-9]/g, '');
console.log(num); // 2024

文字列内の、数字以外の全てを空に置換することで数字だけを取り出すことができます。

以上、replaceと正規表現を用いて文字列から数字だけを抽出する方法でした。

テキストの１行目だけスタイルを当てたいとき、どのように実装しますか？

spanで囲って個別にクラスをつけるよりもスマートな方法があるので紹介します。

::first-line

::first-lineは、CSSの疑似要素の一つで、ブロックレベルの要素が表示するテキストの最初の行にスタイルを特別に適用するために使用されます。この疑似要素は、段落の最初の行や、ブロック・コンテナに含まれるテキストの最初の行の見た目を変えたい場合に役立ちます。

基本的な使い方

See the Pen Untitled by toshihide (@toshihide2000) on CodePen.

使用できるプロパティ

::first-line疑似要素は、すべてのCSSプロパティをサポートしているわけではありません。一般的に、フォント、色、背景、ワード/レタースペーシング、テキスト装飾などのプロパティのみが使用できます。marginやpaddingは::first-lineには適用できません。

注意点

えんどう

HTML上の最初の行ではなく、実際に表示される最初の行に対して適用されます

SASSなどのCSSプリプロセッサーでお馴染みのCSSネストですが、実は2023年に素のCSSでも使用できるようになりました。全ての主要ブラウザでサポートされています。

リリース当初は、要素タグを直接ネストできないなどの制限がありましたが、現在ではアップデートされてよりSASSのネストに近い使用感になっています。

CSSネスト構文の書き方やSASSとの違いを見ていきましょう。

CSSネスト構文

2023年末に要素タグが直接ネストできるようになったため、ほぼSASSと同じ感覚でネストできます。

基本形

<div class="parent"> <div class="child"> sample </div>
</div>

.parent { .child { color: red; }
}
/*もしくは、このような書き方もできます*/
.parent { & .child { color: red; }
}
/*要素タグも直接いける*/
.parent { div { color: red; }
}

えんどう

2個目の書き方は、SASSのAND条件と紛らわしいですね

複数の親セレクター

.foo,
.bar { .text { color: red; }
}
/*👇👇👇従来の書き方だとこうなる*/
.foo .text,
.bar .text { color: red;
}

複数の子セレクター

.parent{ .foo, .bar{ color:blue; }
}
/*👇👇👇従来の書き方だとこうなる*/
.parent .foo,
.parent .bar { color: blue;
}

擬似要素・擬似クラスのネスト

.parent{
　　　　　&:hover{
　　　　　　　　　　color:green;
　　　　　　}
}
.parent{
　　　　　&::after{
　　　　　　　　　　position:absolute;
　　　　　　}
}

メディアクエリのネスト

.parent{ @media (min-width: 768px) { width:80%; }
}

えんどう

この辺りはSASSと同じだから使いやすいですね

SASSとの違い

一つのクラス名を&で分割する書き方はCSSではできません。

例えばlink_listというクラスがあったとして、以下のような書き方でスタイルを当てることはできません。

.link { &_list { color: red; }
}

えんどう

この書き方はクラスの検索ができなくて超絶不便なのでSASSでもやめて欲しいと個人的には思っています。

以上、ネイティブCSSでもネストできるようになったよ！という記事でした。

えんどう

【結論】：ロゴ・グラフィックはPNG。写真はJPEG

Webのポピュラーな画像形式であるPNGとJPEG。画像データを保存する際、どちらの形式で保存すればいいか悩む方や、あまり違いがよくわかっていない、という方も多いのではないでしょうか。

例えば、この記事のサムネイル画像はPNGかJPEG、どちらであるべきでしょうか？この記事ではPNGとJPEGの違いと、Web制作におけるそれぞれの適切な用途について解説していきます。

PNGの特性

PNGの特徴は以下の通りです。

可逆圧縮

PNGは可逆圧縮をサポートしています。可逆圧縮では画像データを削減することなくデータサイズを減らせるため、圧縮されたPNG画像を編集して再度保存しても、画質の劣化が生じません。

色数

ひと口にPNGと言っても色々あって、サポートしている色数によってPNG-8、PNG-24、PNG-32に分類されます。

PNG-8

256色で表現し、透過もできます。表現できる色数が少ない分、容量が軽いのがメリットです。

PNG-24

1,677万色のフルカラーを表現できますが、透過情報を持ちません。透明にすることはできますが、「透明な色を表現している」のであってPNG-8やPNG-32のような厳密な透過ではありません。フルカラーのため容量は重くなりがちです。

PNG-32

PNG-24をより高画質にしたものです。1,677万色フルカラーに加えて透過情報を持ちます。ファイルサイズが膨大になるためWebサイトには適しません。

透明度のサポート

PNG-8とPNG-32は完全なアルファチャンネルの透明度をサポートしており、透明な背景や透過効果を持つ画像を扱うことができます。

ファイルサイズ

可逆圧縮のため、同じ画像で比較した場合、基本的にはJPEGよりも重くなります。

JPEGの特性

非可逆圧縮

JPEGは非可逆圧縮であり、保存するたびに情報が削られて劣化します。劣化した画像をオリジナルに戻すことはできません。ツイッターでよくネタにされる「使い古されたガビガビの画像」はまさに非可逆圧縮の例です。

色数

PNG-24やPNG-32と同じく1,677万色フルカラーを表現できます。

透明度のサポート

JPEGは透過情報を持ちません。保存される画像は通常、不透明な背景を持つものとして処理されます。

ファイルサイズ

JPEGは非可逆圧縮であり、人間の目ではギリギリ分からない色の差異などを削除することによって大幅な容量削減を可能にしています。そのため、高品質な画像を低容量で扱うことが可能です。

用途によって使い分ける

可逆圧縮であり透過を扱えることから、PNG（PNG-8）は主にロゴやグラフィックに適しています。

対してJPEGは高画質フルカラーでありながら容量を抑えられるため、写真に適しています。

逆に言えば、写真をPNGで扱えばファイルサイズが膨大になり、ロゴやグラフィックをJPEGで扱ってしまうと粗が目立ってしまいます。用途に合った適切な拡張子を使うことが大切です。

冒頭に挙げた例で言うと、この記事のサムネイルは色数少なめのグラフィックであるため、PNGが適切です。

以上、PNGとJPEGに違いについて解説しました。

えんどう

【結論】<a href=’tel:01234567890′>012-3456-7890</a>

電話発信のリンクを設定する

aタグに href="tel:電話番号" を指定すると、電話発信のリンクになります。href内にハイフンは不要です。

電話番号リンクをタップした時の挙動は機種によって異なります。iOSの場合は画面下部にポップアップが出現します。

PCでリンクを非アクティブにするには、メディアクエリを用いて以下のようにします。

@media screen and (min-width: 1024px) { a[href^="tel:"] { pointer-events: none; cursor: default; }
}

a[href^="tel:"]セレクタを使用して、tel:から始まるhref属性を持つリンクを対象にしています。

pointer-events: none;は、要素に対するマウスイベントを無効化します。リンクをクリックしても反応しなくなります。

cursor: default;は、マウスカーソルのスタイルをデフォルトに設定します。これにより、電話発信用のリンク上では通常のポインターではなく、デフォルトのカーソルが表示されます。

iOSにおける電話番号の自動リンク機能を無効化する

iOSのSafariには、ページ内の電話番号を検出して自動的に発信用のリンクを付与する機能が備わっています。

これがなかなか無用なお節介で、郵便番号などの数字の羅列にも勝手に電話発信用リンクが付けられてしまいます。

えんどう

いらんことすな！

意図せぬ電話発信やユーザビリティの低下につながるため、ページ内に郵便番号などの数字の羅列が含まれる場合はこの自動リンク機能を無効化しておきましょう。以下のコードをhead内に追加します。

<meta name="format-detection" content="telephone=no">

以上、電話番号のリンクを設定する方法と注意点について解説しました。