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

少しのコードで実装可能なHTML小技集これまで「少しのコードで実装可能な10のCSS小技集」シリーズでCSSのちょっとしたTipsを紹介していましたが、今回はHTMLバージョン！知っていると使い勝手がちょっとよくなる小技を集めました！ 少しのコードで実装可能な 10 の CSS 小技集 目次セレクトメニューの選択肢をグループ化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]

良い記事を見つけた。