HTML

はじめにWeb制作のスキルアップにおいて、誰もが一度は通る「模写コーディング」。ただ既存のサイトを目で見て真似るだけでなく、プロの現場に近い環境である「デザインカンプ（設計図）」からの模写を行うことで、実戦に直結する多くの気づきがありました...

Laravelで開発していると必ずと言っていいほど頻繁に見かける route() ヘルパー関数。 「なんとなく使っているけれど、改めて仕組みやメリットを整理しておきたい」という自分への備忘録1. route() ヘルパー関数とは？route...

Webサイトで問い合わせフォームやログイン画面を作る際、必ず目にする <form> タグ。その中でも特に重要な action 属性について、役割や書き方をシンプルにまとめました。1. action 属性の役割とは？action 属性を一言で...

1. iframeとは何か？<iframe>（インラインフレーム）は、Webページの中に別のHTMLドキュメントを表示するための「窓」を作るタグです。役割: 外部の情報を自分のサイトの一部としてシームレスに表示する。メリット: 外部サイトの...

Webサイトに音楽や動画を直接埋め込みたいと思ったことはありませんか？ かつてはFlashなどの外部プラグインが必要でしたが、HTML5の登場により、タグ一つで簡単にメディアを再生できるようになりました。今回は、基本となる <audio> ...

HTMLで文章のレイアウトを調整する際によく使う <hr> タグと <br> タグ。どちらも「閉じタグ（</hr> や </br>）」を持たない特殊なタグ（空要素）だが、その持つ「意味（セマンティクス）」は全く異なる。後から見返したときに迷...

HTMLには、普段あまり使わなくても、特定のシーンで抜群の便利さを発揮する「特殊なタグ」や「マイナーなタグ」が数多く存在します。これらを使うことで、JavaScriptに頼らずに機能を実装できたり、アクセシビリティを高めたりすることができま...

Webサイトをコーディングする際、なんとなく画面のレイアウトに合わせて <div class="box"> ばかり使ってページを区切っていませんか？現在のHTML（HTML5以降）では、ページの各パーツの意味に合わせて正しくタグを使い分ける...

Webサイト制作において欠かせないのが、ページ同士を繋ぐaタグ（アンカータグ）です。　今回は、コーディング時に迷いがちなaタグの基本属性から、HTML5以降のマークアップ規則、SEOやアクセシビリティを意識した使い方まで、備忘録としてまとめ...