「strongもbも太字になるのにどう違うんだ…？」 「emもiもイタリック体になるけど、そもそもイタリック体ってなんなんだよ…？」 「strongの重要と、emの強調って何が違うんだ…？」 などなど、使い方がよくわからなくなりがちな HTML 要素（主にテキストレベルセマンティックスに分類される要素）の違いを調べてみました。 長めの記事になっていますので、気になる要素だけつまみ食いしてもらうのもよいかと思います。 今回の調査対象はこちら span strong b em i dfn cite var mark u ins del s strike big small ブラウザのデフォルトの見た目確認用 CodePen 調査する内容 HTML Standard の仕様に書かれている説明 一部、HTML 4.01 から HTML 5 での変更が理解の助けになるものもあり、HTML 4.01

2024年2月、JavaScriptライブラリ htmx の発見から始まり、短期間でその可能性に引き込まれ、以下の3つの記事を書きました。 JavaScript ライブラリ htmx と a-blog cms は相性が良さそうだ | kazumich.log kazumich.log htmx という JavaScript のライブラリが、2023 JavaScript Rising Stars : Front-end Frameworks で 2位 になっているが、日本ではあまり聞かない。私自身も最近知ったばかりだが面白そうな... Ajax 通信を簡単にする htmx の基本と実践 | フロントエンド | スタッフブログ | 名古屋のCMS構築・Web制作会社 アップルップル appleple htmx は、JavaScript のコードを書かずにサーバーとの非同期通信を実現し、ページ

htmx は、JavaScript のコードを書かずにサーバーとの非同期通信を実現し、ページの一部を更新することを可能にする JavaScriptライブラリです。HTML属性の拡張により簡単に使用できるようにし、結果として、コードの可読性が向上し、将来のメンテナンスも容易になります。これらの特徴から、htmx はウェブサイト制作の現場での活用が期待されます。 簡潔さとアクセシビリティ: htmx は、複雑な JavaScriptコードを書かずに、HTML 内で直接動的な振る舞いを宣言することを可能にします。これにより、Web開発がよりアクセスしやすく、より理解しやすくなることを意味します。 非同期リクエストの簡易化 : htmx は、Ajaxリクエストを簡単に実装するための属性を提供します。これにより、サーバーへの非同期リクエストを簡単に行い、ページの一部を更新できます。 導入の容易さ :

HTML 5.2のそれぞれの要素が入れ子にできる「子要素」、包含されることが可能な「親要素」の一覧のルールを視覚化して表示します。 ※1 a要素の親要素が包含可能であること※1 audio要素の親要素が包含可能であること※1 canvas要素の親要素が包含可能であること※1 del要素の親要素が包含可能であること※1 ins要素の親要素が包含可能であること子要素省略※1 map要素の親要素が包含可能であること※1 noscript要素の親要素が包含可能であること かつ body要素の子孫であること子要素省略※1 video要素の親要素が包含可能であること ルート要素＆文書メタデータ html 親 子 head 親 子 title 親 子 base 親 子 link 親 子※HTML 5.2から可能。フレージングコンテンツが期待される場所※head要素の子孫であること meta 親 子※he

'Caninclude' tool to help determine if one HTML tag can be included in another HTML tag

<script> タグには defer または async 属性を指定できます。この2つは挙動が異なるため、うまく使い分けてサイトの表示を高速化しましょう。 <script> タグ まず、defer や async を使わずに <script> タグで外部ファイルを読み込む場合について見ていきます。 <script src="script.js"></script> このように記述した場合、HTMLパーサはこの部分に到達するとHTMLのパースを停止し、スクリプトファイルのダウンロード、および実行を行います。実行が終わると再びHTMLのパースに戻ります。 ただしこの挙動は document.write などを使ってHTMLを出力するようなスクリプトでない限り、不必要にHTMLのパースを止めてしまっています。 というわけで、「このスクリプトはHTMLのパースを止めてまで実行する必要はないですよ

自分で管理するWebサイト内で他のサイトの文章を使用する場合、それが“他から引用した文章”であることをしっかりと明示しなければなりません。 今回は引用の正しい表記・使い方を解説します。 引用とは何か?引用とは外部で公開されているコンテンツをそのまま、または抜粋して自分のコンテンツ内で使用することです。例えば、参考資料として他サイトに掲載されている情報を自分のブログ内で使用する場合は引用に該当します。 以下のような場合は引用の一例です。 引用を使用する場合は、それが引用したコンテンツであることを必ず分かるようにする必要があり、一般的には引用だと分かるデザインにしたり、引用元の情報を一緒に記述したりします。 引用を表すHTMLタグとは?HTMLで引用文をマークアップするのにはblockquoteタグ、またはqタグを使用します。どちらも引用文を表しますが、タグの使いどころが異なります。それぞれの

別のサイトにある記事などを引用したいことはよくあるでしょう。 その際に使うのが、blockquoteタグ、qタグ、citeタグです。 １．blockquoteタグ、qタグ、citeタグの使い方 １−１．blockquoteタグ、citeタグの使い方 ここでいうblockは一続きという意味です。そしてquoteとは英語で引用するという意味です。blockquoteとはひと続きの引用を意味しています。citeも英語で引用するという意味です（ちなみにローカルSEOで使われる用語のcitationはこの言葉の名詞形です）。 外部の文章を引用する場合に、どこからどこまでが引用部分なのか？を明示的に表すために使うのがblockquoteタグです。 引用元がどこのURLであったのか？を明示するのがciteタグです。 ■使用例 <blockquote> <p>タラバガニ（鱈場蟹、学名：Paralithod

📝 ウェブ制作 制作雑記 Published @2022-09-22 (Thursday) Updated @2022-09-23 (Friday) 執筆者 : 清水公太 結論 素直に disabled属性を使おう。 どういう事か？ セレクトボックスを作るselect要素に、選択肢を設定するために記述するのがoption要素です。 これを、フォームに入力された条件に応じて消したいというケースがたまにあります。 例えばECサイトで、Tシャツの種類を選択させるようなフォームがあったとします。 そのTシャツのサイズは「S」「M」「L」が用意されているけど、「赤色」だけ「L」しかない、というようなケースです。 （そもそも一般的にこういうものはECのシステム側で制御されていますが） そういう時に、次のように「S」と「Ｍ」のoption要素にCSSでdisplay: none;を適用したとします。

Golden rule Enforce these, or your own, agreed upon guidelines at all times. Small or large, call out what’s incorrect. For additions or contributions to this Code Guide, please open an issue on GitHub. Every line of code should appear to be written by a single person, no matter the number of contributors. HTML Syntax Don’t capitalize tags, including the doctype. Use soft tabs with two spaces—they

行（横軸）を固定してスクロールする 縦にスクロールしてください。 上部の「見出し」だけ固定され、他の要素だけスクロールしていることが確認できます。 ↓　HTMLコード <table> <tr> <th class="fixed01">見出し</th> <th class="fixed01">見出し</th> <th class="fixed01">見出し</th> </tr> <tr> <td>テキスト</td> <td>テキスト</td> <td>テキスト</td> </tr> <tr> <td>テキスト</td> <td>テキスト</td> <td>テキスト</td> </tr> </table>

「SEO に強い HTML の書き方」というツイートがそこそこバズっていて、その内容に対して駆け出しエンジニアの方たちが「参考になった」などと称賛の声を挙げていたのを見かけて思うところがあったのでこの記事を書きました。 元ツイの概要は次の通り。 body > main > article > sectionに h1は 1 ページに 1 つ（要キーワード） 見出しタグは毎度 section で囲む ヘッダーメニューは nav で囲む 画像に適切な alt を設定する title / description を書く 階層を意識して書く div はあまり使わない 画像は p で囲む この記事は元ツイおよび元ツイの投稿者を批判する意図で書いたものではなく、あくまで挙げられている内容に対する個人的見解をまとめたものです。 正しいか正しくないかをそれぞれの項目のはじめに書いていますが、あくまで僕個人の