HTML | コンピューター

HTMLのCDATAセクションとは？意味・書き方・非推奨になった理由を解説

CDATAセクションとは CDATA（Character Data）セクションは、XML文書内でエスケープ処理を行わずにテキストをそのまま記述するための仕組みです。通常、XMLでは「<」や「&」などの記号は特殊文字として扱われるため、< や & の形式に変換（エスケープ）する必要があります。しかし、CDATAセクション内に記述されたテキストはパーサーによる解析の対象外となるため、これらの記号をそのまま書くことができます。 CDATAの基本的な書き方 CDATAは以下のような構文で記述します。 <![CDATA[ ... ]]> 記述例実際にCDATAセクションを

HTMLマークアップのどこに<script>タグを配置すべきか？正しい書き方と属性を解説

JavaScriptのコードは、HTML文書内の<script>タグと</script>タグの間に記述します。このスクリプトタグはWebページ内のどこにでも配置できますが、従来は<head>タグ内に記述することが一般的に推奨されてきました。<script>タグは、ブラウザに対して「このタグ間のテキストをスクリプトとして解釈せよ」と指示する役割を果たします。scriptタグの主な属性<script>タグには、次の2つの重要な属性があります。language属性 − 使用するスクリプト言語を指定します。通常は「javascript」を設定

HTMLでリンク（a href）を新しいブラウザタブで開く方法

ブラウザの新しいタブ（またはウィンドウ）でリンクを開きたい場合は、HTMLのアンカー要素（<a>）に target 属性を追加するだけです。 href 属性にリンク先のURLを指定するのと同じように、target 属性にも特定の値を設定する必要があります。この値が _blank です。これを指定すると、リンクをクリックした際に新しいタブでページが開くようになります。新しいタブでリンクを開く具体例たとえば、techstacker のトップページを新しいタブで開くリンクは次のように作成します。 Techstacker.com へ移動上記の例で使用しているHTMLコード： <

HTMLコードにコメントを書く方法【基本の書き方と注意点】

HTMLドキュメントには、Webブラウザに解釈されないコメントを記述することができます。コメントを活用する目的は、コードの内容を簡単に説明（ドキュメント化）しておくことです。将来の自分のため、あるいはチームメンバーのために役立ちます。 HTMLにコメントを追加するには、開始タグを使用し、その間にテキストを記述します。以下のように書きます。  コメントは複数行にわたって記述することも可能です。  注意点として、HTMLコメントがブラ

リンクとURLの違いとは？技術的な構造とHTMLでの実装方法を徹底解説

リンクとURLの違いは何か、そしてその違いを意識する必要はあるのでしょうか？ウェブページ上のコンテンツへの直接の経路について雑談しているだけであれば、リンクとURLの違いはそれほど重要ではありません。たとえば、友人に素晴らしい記事を共有するときなどがその典型です。大まかな（非技術的な）レベルで言うと、リンクとはクリックできるユーザーインターフェースのことであり、特定の場所へ移動させるためのものです。そして、その行き先はURLによって定義されます。見た目上、リンクはテキスト要素、画像、ボタン、その他のUI要素として表現できます。これらはすべてHTMLコードで定義されています（詳細は後述しま

SEO基礎知識：フォローリンクとノーフォローリンクの違いとは？

SEOにおけるフォローリンク（Follow Link）とノーフォローリンク（No Follow Link）の違いをわかりやすく解説します。 SEOを始めたばかりの方にとって、「フォローリンク」と「ノーフォローリンク」の違い、そして自社サイトで使うリンクの種類を指定することに意味があるのかどうかは、混乱しやすいポイントの一つです。結論から言えば、Googleをはじめとする検索エンジンはウェブサイト上の動きを細かく監視しており、特にリンクスパムには敏感に反応するよう設計されています。リンク、特に被リンク（バックリンク）は、検索エンジンの結果ページ（SERP）での順位を上げるための最も強力なSE

SEO対策の基本:H1タグは1ページにつき1つだけ使うべき理由

見出しタグの基本:H1からH6までの階層構造ウェブ開発者やデザイナーが最初に学ぶことのひとつが、HTML5の見出し要素(H1〜H6)による6段階の階層構造です。初心者のうちは「H1が最も重要な要素であり、メインタイトルや大見出しなど、最も重要なコンテンツに使うべき」と教わります。その後、H2、H3、H4と順番に下位レベルの見出しを小見出しとして使っていくのが基本的なルールです。初心者に多い失敗:H1の重複使用ところが、多くの初心者が同じページ内でH1タグを複数回使用しているのを目にします。おそらく、そのページ上の複数のテキスト要素がどれも重要だと考えているためでしょう。しかし、これは

フローティングラベルで実現する、ミニマルで効果的なフォームUI/UX

フローティングラベルとは何か、フォームデザインでどのように使われているのか、そしてUI/UXデザインにおいてなぜ注目度が高まり続けているのかを解説します。フローティングラベルとは？まずは、こちらのアニメーションをご覧ください。上の図を見ただけで、フローティングラベルがいかに優れたUI要素であるか、直感的に理解できた方も多いのではないでしょうか。「フローティングラベル」という概念に馴染みのない方のために、その魅力を簡単にご紹介します。限られたスペースで、多くの実用的な情報を伝えられる滑らかなトランジション（アニメーション）効果により、フォーム全体がより魅力的になる従来の静的なフォ

プレースホルダーを入力フィールドのラベルとして使ってはいけない理由――ただし、解決策はある

UXデザイナーの間では、「プレースホルダーテキストを入力フィールドのラベルとして使うべきではない」という警告をよく目にします。これには、しっかりとした理由があります。実際に入力してみると分かる問題まずは、下の入力フィールドに実際に文字を入力してみてください。何が起こるかに注目してみましょう。すると、文字を入力し始めた瞬間に、プレースホルダーテキストが消えてしまうことが分かります。なぜこれが問題なのかメールアドレスとパスワードだけといったシンプルなログインフォームであれば、さほど問題にはなりません。しかし、項目数の多いフォームになると話は別です。入力を始めた途端にラベル(この場合、プレ

HTML5でテキストに取り消し線を付ける方法

取り消し線(strikethrough)は、すでに正確ではなくなった情報や、関連性を失ったコンテンツを表すために使われます。典型的な例が、値引き販売中の商品に表示される「旧価格」です。記述例：値引き商品 Intel製 2TB SSDドライブ $249$99 かつてのHTML4では、関連性を失ったコンテンツに対して <strike> タグを使っていました。しかし、このタグは現在では非推奨(deprecated)となっており、最新のHTML5では、より短い <s> タグを使うのが標準的な方法です。上の例のような取り消し線は、次のように記述します。 <s&g

JavaScriptでHTML属性値を変更する方法｜href属性を書き換える2つの手法

JavaScriptを使ってHTML要素の属性値を変更する方法を解説します。たとえば、Webサイト上のアンカー要素の href 属性に、誤ったURLパスが設定されてしまったとします。こうしたトラブルが起こりやすいのは、メニューやナビゲーションバーです。 <nav> <ul> <li> <a href=/path-to-your-page id=some-id>Link</a> </li> </ul> </nav> また、サイ

JavaScriptでHTML属性を作成・追加する方法を初心者向けに解説

この記事では、JavaScriptを使ってHTML属性を作成し、要素に追加する方法をわかりやすく解説します。たとえば、クリックすると関数を実行するはずのボタンがWebサイトにあるとします。ところが、そのボタンにはIDもクラスも設定されておらず、しかも今はHTMLファイルに直接アクセスできない状況だとしましょう。そんなときでも心配いりません。JavaScriptを使えば、新しい属性を作成してボタン要素に動的に追加することができます。やるべきことは次の3つです。 id 型の属性を作成する属性に値(名前)を設定する作成した「属性+値」をボタン要素に追加する HTMLマークアップまずは

HTML・CSS・JavaScriptの違いとは？家に例えてわかりやすく解説

HTML、CSS、JavaScriptの違いを、初心者にもわかりやすく解説します。 Web開発、特にフロントエンド開発の学習を始めるとき、真っ先に身につけるべきスキルとして挙げられるのが「HTML」「CSS」「JavaScript」の3つです。この3つは、フロントエンド開発の基礎中の基礎とされています。 HTML、CSS、JavaScriptはすべて同じWeb開発エコシステムの一部であり、それぞれが連携して初めて、現代のWebのポテンシャルを最大限に引き出すことができます。では、具体的には何がどう違うのでしょうか？まずは名前の由来から確認してみましょう。 HTML は Hypertext

静的Webサイトとは？動的サイトとの違いとメリットをわかりやすく解説

開発者の間でよく「静的サイト」と「動的サイト」という言葉が聞かれますが、具体的にはどういう意味なのでしょうか。本記事では、両者の違いとそれぞれの特徴をわかりやすく解説します。静的Webサイトの定義純粋な静的サイトとは、HTML・CSS・JavaScriptといったフロントエンドのコードだけで構築されたWebサイトのことです。PHPやPython、Node.jsのようなサーバーサイドのスクリプト言語は使用しません。WordPressのような動的なCMSが従来型のバックエンドを持つのに対し、静的サイトにはバックエンドが存在しないのが大きな特徴です。また、静的サイトは「すべての訪問者に同じコ

アンカーテキストは短く、説明的に。リンクの正しい命名方法でSEOとUXを改善する

デザインの観点からアンカーリンクをどのように視覚的にスタイリングすべきかについては、さまざまな意見があります。しかし今回は、それよりもさらに重要なテーマ——「リンクのアンカーテキストをどう命名すべきか、そしてその理由」に焦点を当てます。実は、驚くほど多くのウェブサイトがこの点を間違えています。筆者自身もかつてその一人でした。アンカーテキストとは何かウェブサイト上でクリック可能なリンクを作成するには、リンク先のパスをHTMLのアンカータグ <a></a> で囲みます。アンカータグには多くの属性を含めることができます。URL（リンク先のパス）、class、id、titl

HTMLでmailtoメールリンクを作成する方法をわかりやすく解説

今日は、HTMLでクリック可能なメールリンクを作成するという、Web制作において非常に役立つスキルの習得方法をご紹介します。「えっ？HTMLでメールリンクを作る方法なんて今さら？1998年の話じゃあるまいし」と思った方もいるかもしれません。いえ、決してそんなことはありません。ただ、メールリンクは最も基本的な形ではあまりにシンプルに書けてしまうため、経験豊富な開発者でもうっかり書き方を忘れてしまうことがあります（筆者もその一人です）。 mailtoリンクとは？ mailtoリンクとは、クリックすると訪問者のパソコンに設定されたデフォルトのメールソフト（WindowsならOutlookなど）が

【iOS】input要素の自動ズームを簡単に無効化する方法

一般的なHTMLのviewportメタ設定を使用している場合、iOSデバイスでinput要素をタップすると自動的にズームが発生します。少なくともスマートフォンではその挙動が確認できます。筆者はiPhone 4、5、6でSafariとChromeを使って検証しましたが、調査によるとすべてのiOSデバイスで同じ仕様になっているようです。この自動ズームを引き起こすHTMLコードがこちらです。<meta name=viewport content=width=device-width, initial-scale=1.0 />しかし、この自動ズームは必ずしも望ましいものとは限りません。場合

HTMLのinput要素でスマートフォンに数字キーボードを表示させる方法

私はここ半年間、サイドプロジェクトとしてトレーニング記録アプリを開発しています。ご想像のとおり、この種のアプリには数値の入力が欠かせません。コードエディタのオートコンプリート機能を使うと、input要素のtype属性はデフォルトで「text」になります。 type=number と type=text の違い type属性が「number」に設定されたHTMLのinput要素は、数値のみを受け付けます。この数値入力フィールドに文字を入力してみてください。入力できませんよね。一方、type属性が「text」のinput要素は、文字も数字も両方受け付けます。テキスト入力フィールドに数字と文

【初心者向け】HTML要素にマウスオーバーしたときにテキスト（ツールチップ）を表示する方法

はじめにこの短いチュートリアルでは、画像やリンクなどのHTML要素にユーザーがマウスを合わせた（ホバーした）ときに、簡単な説明文＝いわゆる「ツールチップ」を表示する方法を解説します。ツールチップの追加は数秒で完了します。使うのは、HTMLのtitle属性だけです。ホバー時にテキストを表示する基本の方法以下は、ルービックキューブの画像を使った基本的な例です。画像の上にマウスを移動して1〜2秒待つと、ルービックキューブに関する追加情報がポップアップ表示されます。上記の画像要素のHTMLマークアップは次のとおりです。 <img src=url-to-image-file

【初心者向け】HTML5のvideo要素でMP4動画を埋め込む方法｜サイズ調整・自動再生・ループ設定を解説

この記事では、HTMLの<video>要素を使ってMP4動画を手軽に埋め込む方法を解説します。以下の3つのポイントを取り上げます。動画プレーヤーのサイズ（width / height）を調整する方法動画を自動再生（autoplay）する方法動画を無限ループ（loop）させる方法多くのチュートリアルでは、短い動画の代わりにGIFアニメが使われがちですが、MP4形式ならより高い画質を保ちながらファイルサイズも抑えられます。さらに、MP4はWebMと違ってすべてのモダンブラウザで再生でき、YouTubeなどの動画サービスへのアップロードにも対応しています。 HTML5のvid