ja ja ja ja ja ja ja en ja de ja de en ja ja ja ja ja ja en ja ja ja ja ja ja ja ja ja ja ja ja en ja ja ja ja en ja en ja ja en ja en en ja ja en ja ja de en ja ja en en ja ja ja en en ja ja en ja en ja ja en ja ja en ja en en ja en ja en ja ja ja ja ja ja ja ja ja ja ja ja ja ja ja ja ja ja ja ja ja en ja ja ja ja ja ja ja ja ja en ja de en ja de en ja de en ja de en ja de en ja de de ja en ja ja ja ja ja
【Web開発】覚えておくべき意外と知られてないマイナーHTMLタグ・属性8選 │ オタク総研 with IT
この記事はDEV Communityに投稿されている「7 HTML attribute you should know right now!」という投稿をベースに、著者の許可を頂いて紹介しております。
https://tools.ic731.net/minor_html
【bdoタグ】アラビア語に対応できる
bdoタグの正式名称は双方向文字列上書き要素です。
アラビア語やヘブライ語は右から左に書いていくRTLという珍しい記法です。
bdoタグでは一般的なのテキストの方向性をオーバーライドして、タグ中のテキストが別の方向にレンダリングされるようにします 。dir属性を使って、この方向を示すことができます。
This text will go left to right.       This text will go right to left.
出力結果は以下のようになります。アラビア語あまり書きませんがドヤれる知識です…
https://developer.mozilla.org/ja/docs/Web/HTML/Element/bdo
【kbdタグ】キーボードのようなレイアウト
kbdタグとかマジで知らなかったです(笑)文字をこのタグに囲むだけでキーボード風のレイアウトで文字を表示してくれます。
Please press  Ctrl  +  Shift  +  R  to re-render a browser page.
※ただし、キーボードみたいな形にするならCSSを書く必要があるみたいです。以下にデモを掲載します。
kbd { background-color: #eee; border-radius: 3px; border: 1px solid #b4b4b4; box-shadow: 0 1px 1px rgba(0, 0, 0, .2), 0 2px 0 0 rgba(255, 255, 255, .7) inset; color: #333; display: inline-block; font-size: .85em; font-weight: 700; line-height: 1; padding: 2px 4px; white-space: nowrap; }
https://developer.mozilla.org/ja/docs/Web/HTML/Element/kbd
【details/summaryタグ】アコーディオン表示にする
これはこの中ではいちばん有名ですね。結構知ってる人も多いのではないでしょうか。DetailsとSummaryを組み合わせるとその名の通りアコーディオン表示を作れます。
Details  Something small enough to escape casual notice.
出力結果は以下のとおりです。(GIF)
また、detailsタグにopen属性を追加すると、デフォルトで開いた状態になります。
https://developer.mozilla.org/ja/docs/Web/HTML/Element/summary
【contenteditable属性】要素のテキストを編集可能に
普通テキストを編集できるようにする場合、textareやinput type=”text”を指定しますよね。ですが普通のp要素とかでも編集可能に出来ます。contenteditable属性をtrueにすると自由に編集出来ます。
This is an editable paragraph.
https://developer.mozilla.org/ja/docs/Web/HTML/Global_attributes/contenteditable
【abbrタグ】略語の補足説明を表示
Abbrタグを使うことで「HTML」「CSS」などの略語または頭字語を定義し、このタグにカーソルを合わせると完全なタイトルを表示させることが出来ます。
要素に点線の下線が引かれ、title属性で指定した文字がマウスオーバーで表示されます。
You can use  CSS  to style your  HTML .
https://developer.mozilla.org/ja/docs/Web/HTML/Element/abbr
【translate属性】翻訳が必要かどうかを示す
Chromeって、外国語のページをGoogle翻訳などでページごと翻訳してくれますよね。translate属性はページの翻訳時に指定した要素を翻訳させないようにできる機能を持てます。
p translate="no">CodeOz
上記の様に指定すると、勝手に翻訳されないように出来ます。(下記画像は英→日翻訳時)
https://developer.mozilla.org/ja/docs/Web/HTML/Global_attributes/translate
【markタグ】文字を蛍光マーカーで主張する
markタグの中に囲まれている文字列は蛍光色の背景で表示され、より主張を強くすることが出来ます。
【type=”color”】カラーピッカー
formの構成要素として有名なinputタグですがtypeで様々なタイプを指定することが出来ます。中でもColorは色選択ができるモードです。16進数のカラーコードが帰ってきます。
ただし、Androidの場合だと若干カラーの選択できる種類が少ないためクリエイティブ要素を強めにしたい場合は独自でJSライブラリなどを導入するほうが良いでしょう。
https://developer.mozilla.org/ja/docs/Web/HTML/Element/input/color
https://0115765.com/archives/801
いかがだったでしょうか。ざっくりと紹介してきましたが、全く知らなかった!みたいな物もあった方も多いと思います。是非ご参考にしてみてください!
https://tools.ic731.net/minor_html
Advertisement
MongoDBにJOSN/CSVデータを挿入する一番簡単なやり方。 2021.06.10
特に凝っている点はないが備忘録として。MongoDBにCSVやJSON形式のデータを打ち込む一番簡単な方法を紹介。 ターミナルでmongoからいちいち[…]
【PHP】WordPressからRSSを取得してHTMLで表示する方法【サンプルあり】 2021.04.24
こんばんは。小池都知事に半ギレしている土曜日深夜です。今回はRSSフィードから任意の情報を取得してHTMLで表示する方法を紹介します。 サンプル&コー[…]
Tensorflow1.14をWindowsにインストールする方法 2021.03.09
こんばんは。Pytorchと鎬を削ってるディープラーニングフレームワークTensorflowについてのお話です。 諸事情でTwnsorflowの1.x[…]
DEV.toアカウント開設しました 2021.01.28
特にこれと言ってやることはないですが、dev.toのアカウントを開設しました! だから何だと言われればそこまでですが一応告知です。宜しくオナシャス! […]
【JavaScript】Push通知の許可を要求するダイアログを実装する【初心者】 2021.05.16
ブラウザ上でプッシュ通知を受け取る際に許可を要求するスクリプトを紹介します。  Notification.requestPe[…]
Author:市井 | オタク総研編集部 投稿一覧
合同会社サブカル通信社 法人代表
サブカルの「今」を届けます! アニメ&ITメディア・オタク総研 代表・合同会社サブカル通信社 法人代表。 専門領域はアニメ(特に萌系)・ゲーム(一部)・ガジェット・IT・プログラミング・鉄道(少し)
コメント コメントをキャンセル
メールアドレスが公開されることはありません。 * が付いている欄は必須項目です
次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。
Please enable JavaScript to post your comment.
オタク必須!アニメ&ゲーム専門ニュースアプリ『オタナビ』が提供開始
G-TuneからゲーミングノートPC「G-Tune P7」シリーズ発売 144Hz&17.3型液晶搭載
OPPO初のタブレット「OPPO Pad Air」正直レビュー 動画視聴には良いが…
『原神』2周年を記念した6種のCMが地上波放送
TVアニメ『シャドウバースF』第3クールは10月1日から 監督コメント&KV公開
カテゴリー カテゴリーを選択 FLASH / 速報 PR(プレスリリース) アニメニュース    ’21放送アニメ    ’22アニメ    アニメランキング イベント    キャンペーン    ライブ    展示会・発表会 インターネット    ダウンロード オタク小話 ゲームニュース    ソシャゲ コミック・書籍ニュース ネットの話題 バーチャル総合 パソコン・モバイル    スマホ    タブレット プログラミング レビュー 便利ワザ 取材・特集 未分類 秋葉原ニュース 解説・HowTo 金融系    仮想通貨・NFT
オタク必須!アニメ&ゲーム専門ニュースアプリ『オタナビ』が提供開始2022年9月28日
G-TuneからゲーミングノートPC「G-Tune P7」シリーズ発売 144Hz&17.3型液晶搭載2022年9月28日
Advertisement
プログラミングカテゴリの最新記事
YouTube上にコメントを流すニコ動風アドオンは特許侵害なのか?【解説コラム】
6月23日から「GitHub Copilot」が有料に=2ヶ月無料&学生は無料
【ツール配布】アニメは8Kで見る時代!Real-ESRGANでアニメ超高画質化
【SCSS】90行以下で綺麗なハンバーガーメニューを作ろう(解説あり)
【TWA】完全開発ガイド=超簡単にPWAをPlay Storeで配信しよう
ステータスコード「418」知ってますか?Googleにも使われている有名規格
Back to Top
運営会社 / リリース送付・取材依頼 / 広告掲載 / お問い合わせ
【寄稿募集】オタクな貴方の”好き”をニュースにしませんか?
オタク総研 / オタクのためのアニメ&ITメディア
©2022 合同会社サブカル通信社 All Rights Reserved.
※当サイト内コンテンツの著作権その他の権利は,合同会社サブカル通信社もしくは各権利者に帰属します.無断転用はご遠慮ください.