少しのコードで実装可能なHTML小技集

2023年2月7日 HTML これまで「少しのコードで実装可能な10のCSS小技集」シリーズでCSSのちょっとしたTipsを紹介していましたが、今回はHTMLバージョン！知っていると使い勝手がちょっとよくなる小技を集めました！ ↑私が10年以上利用している会計ソフト！ 目次 セレクトメニューの選択肢をグループ化 type 属性値によって入力欄が変化 スマートフォンでエンターキーのテキストを変える 画像の遅延読み込み テキストの折り返し位置を指定する 番号付きリストの順番を変更する 簡単アコーディオン 任意のテキストを自動翻訳させない リンク先のテキストを指定してスクロールさせる 1. セレクトメニューの選択肢をグループ化 複数の選択肢を用意できるおなじみの select タグ。項目は option タグを利用しますが、さらに optgroup タグで囲むことでグループ化できます。選択肢が多

[hiroshe]

どうせたいして使わないものだろうと思ったら結構使えそう。

[yoiIT]

そんなのあるんだ＞“任意のテキストを自動翻訳させない”

[tmayuko312]

大体知っていたけど、どれもブラウザが対応してなかったり、CMSだと一工夫が必要だったり、JSやCSSで操作しにくかったりで、実際の仕事ではなかなか使う場面ないんだよなぁ…。

[pmint]

5は日本語でも使えるよう、word-break:keep-all;と併用する。本当に<wbr>だけで改行したいならwhite-space:nowrap;も使う。デカい文字の見出しで効果的。

[coliss]

https://www.smashingmagazine.com/2022/03/html-attributes-you-never-use/

[field_combat]

enterkeyhintとアコーディオン使ってみよう

[kei_0000]

アコーディオンのUIを作るdetailsタグとsummaryタグは知らなかった。

[adsty]

少しのコードでちょっと良くなる小技集。

[otchy210]

#:~:text なんじゃこりゃー知らなかった！ <input> 関連だと type="time" 系とか <datelist> と組み合わせたプルダウンメニューが便利だよね。ちょっとした使い捨て UI 書く時とかに大活躍する。

[Helfard]

“optgroup” 生きとったんかいワレ。detailsとsummaryも便利だなー。

[l-_-ll]

「translate="no"」「<a href="https://example.com#:~:text=検索したいテキスト">」

[yarumato]

“アコーディオン（折りたたみ）にしたい時に使える details と summary タグ。　a タグでテキストをリンク指定するとスクロールされ、テキストをハイライトで表示します”

[rrringress]

埋め込みで結果が見れるのすごい。内容も気が利いてた

[basseyboost]

“#:~:text=” Google検索から入るとハイライトされるのこれか？

[karage-oec]

会社でドヤ顔してやろう

[ejointjp]

検索のやつはAppleのサポートサイトで使われててそれで知った

[soratomo]

知らない小技たくさんあってビビッタ。

[itien]

仕事用

[Phenomenon]

えっ結構参考になる

[yoshi-na]

これはちゃんとあとで読む

[shumaru2525]

テキストリンクできるの知らんかった

[tetsugrande]

“loading="lazy"”

[loveanime]

色々小技あるのね

[uunfo]

enterkeyhintは全然知らなかった。でも表記が変わるだけで動作まで変わるわけではないのね。Text fragmentも面白い

[atsuskp]

あとで使うかもしれない

[asakatana]

“リンク先のテキストを指定してスクロールさせる”

[seenoview]

気が利いてる！

[yuu-yuiken]

アコーディオン使えそう

[tetsu23]

短いコードでできる、っての好き。

[aceraceae]

後半知らなかったしけっこう役に立ちそう。

[SPIRIT_PHOENIX]

良い記事を見つけた。