iPentec.com  /  Document

HTML 記事一覧

トピックス記事

HTML 基本タグ

HTML のページ

HTML 一般

HTMLページでタブUIを実装する
文字列を強調するタグと表示結果
相対パスの基準となるURL位置を変更する - baseタグを使用した相対パスの変更
buttonタグでクリック時にページ遷移しない動作にする
HTML5ドキュメントであることを明示的に指定するHTMLの書式
HTML4ドキュメントであることを明示的に指定するHTMLの書式
HTML 特殊文字、記号 の表記と実体参照表記
Formタグ内のButtonタグのボタンでリダイレクト処理が動作しない
Webページに 「への字型」の上向き矢印、「逆への字型」の下向き矢印、「くの字型」の矢印文字を表示したい
ページに favicon を設定する
フォームのすべてのコントロールに対してスペルチェックのアラート表示を無効にする
ワードラップ時に指定した位置で文字列を改行する
HTMLの書式
HTML中にUnicode文字を記述するコードと表示結果
SVG形式の画像ファイルを表示する
一定時間経過後に別のURLに自動的に遷移させる - meta http-equiv="refresh" の利用
Audio タグを利用してサウンドを再生する
HTML フォームを作成する
HTMLフォームでのポスト時の送信データ形式
<P>タグ内に<div>タグを挿入すると意図した動作にならない
ページの幅をスマートフォンの画面幅に合わせる - Webサイトのスマートフォン対応

ASP.NET, C#

テキストボックス(HTMLテキストボックスコントロール)をクリックした際にテキストボックス内のテキストを全て選択する

Azure Maps

HTMLのページ上に Azure Mapsの地図を表示する

Aタグ, CSS, HTMLタグ

div枠全体をリンクする

Aタグ, HTMLタグ

リンク (ハイパーリンク) を作成する - Aタグの利用
リンクをクリックした際に、Webブラウザーの別ウィンドウでリンク先のページを開く

Aタグ, HTMLタグ, アンカーリンク

ページ内リンクの設置 - アンカーポイントの記述

Bootstrap

ウィンドウ幅に応じて段組みを変更する
グリッドオプションの紹介 (col- col-sm- col-md- col-lg- の違い)
Bootstrap でのコンテナの利用 (continer と container-fluid の違い)
Bootstrap の利用

CSS

font-styleプロパティを設定してもマルチバイト文字 (日本語文字) が斜体で表示されない
文字を太字にする、細字にする
HTML / CSS で定義されているカラーコード、カラーネーム
テキストボックスが編集状態のときに表示される枠の色やスタイルを変更する
段落の先頭行をインデントする - 段落の先頭文字の字下げ
スタイルシートによるフォントの変更 - フォントやフォントファミリーを変更する
テキストをイタリック・斜体にする
スタイルシートによる文字色、フォントカラーの変更
CSSによる文字の大きさの変更 、フォントサイズの変更
別ファイルのスタイルシートをリンクしてスタイルを利用する - 外部スタイルシートファイルの利用
タグ内にstyle属性を記述してスタイルを利用する
文字や枠などのHTML要素の透明度を設定する
角の丸い枠を描画するコードと表示結果

CSS スタイル変更, JavaScript

class属性を動的に変更する - classNameプロパティの利用

CSS, CSS background-image

背景画像のサイズを指定する
background-imageの背景画像の基準位置を指定する
background-clipプロパティーによる背景の塗りつぶし範囲の変更

CSS, CSS スタイル変更, JavaScript

JavaScriptでCSSのスタイルを動的に変更する方法

CSS, CSS ドロップシャドウ

ドロップシャドウのある枠のコードと表示結果 - 影を画像で表現する方法

CSS, CSS メディアクエリー

レスポンシブページで、DIV枠などのブロック要素が中心で折り返されるようにしたい

CSS, HTML テキストボックス

テキストボックスにマウスカーソルが重なったときに、テキストボックスの枠やスタイルを変更する
テキストボックスのフォーカス時の太線の外枠を表示しないようにする

CSS, HTML ラジオボタン, HTMLタグ

画像を選択するUIを作成する - RadioButton を利用

CSS, JavaScript

HTML, CSS, JavaScriptでの色指定
テキストボックスに文字が入力されている場合にだけ、テキストボックスの中にクリアボタンを設置する
テキストボックスの中にクリアボタンを設置する

CSS, Webフォント, デザイン, フォント

アイコン Webフォントを作成する (Webページ用アイコンフォントの作成)

Google Cloud Platform, Google Map, JavaScript

Google Maps API の APIキーを取得する

Google Font

Exo フォントを用いて文字を描画する - Google Fontの利用

Google Map

Google Maps Embed API を利用してWebページ内にGoogle Mapを表示する

Google Map, Google Maps JavaScript API

Google Maps JavaScript API を利用してWebページ内にGoogle Mapを表示する

Google Map, JavaScript

Google Mapへ追加したマーカーをすべてクリアする
Google Map API でアイコンと影を描画順を指定して地図に表示する
Google Map JavaScript API v3 を使って地図上にアイコンを表示する
Google Map APIで表示した地図にビル名や施設名が表示されない (Google Map APIによる施設の表示)
Google Map JavaScript API v3 を使ってマップ上にピンを立てる (マーカーを表示する）
Google Map JavaScript API v3 APIを使ったシンプルな地図表示

HTML Canvas, JavaScript

HTML Canvas の描画設定を保存し、後で描画設定を復帰させる
HTML Canvasを利用して 画像のモザイクフェードイン、フェードアウトを実装する
HTML Canvasを利用して 画像のモザイク処理をする
HTML Canvasの描画内容を別のHTML Canvasに描画する
HTML Canvas オブジェクトを作成する - メモリー上でのHTML Canvasの作成
HTML Canvas に動的に線形グラデーションを描画する
HTML Canvas に動的に円形グラデーションを描画する
HTML Canvasでピクセル情報を設定する
HTML Canvasでピクセル情報を取得する
HTML Canvas でのマウスポインタの位置を取得する - HTML Canvas でのマウスポインタの移動の検出
HTML Canvas を利用して文字列のアウトラインを描画する
HTML Canvas を利用して文字列を描画する
HTML Canvas を利用して長方形 (矩形) を描画する
HTML Canvas を利用して円を描画するコードと実行結果
HTML Canvas を利用して画像を描画する
HTML Canvas を利用して線を描画する
HTML Canvas を利用して図形を描画する

HTML iframe

iframeの埋め込み先のページ表示をブロックする

HTML スライダー, HTMLタグ

スライダーコントロールを表示する

HTML セレクトボックス, HTMLタグ

セレクトボックスを表示する

HTML チェックボックス, HTMLタグ

チェックボックスの右側の文字列をクリックすると、チェックボックスのチェック状態が変更できるようにしたい
チェックボックスを表示する

HTML テキストボックス

テキストボックスでWebブラウザーの自動補完(オートコンプリート) ポップアップを無効にする

HTML テキストボックス, HTMLタグ

HTMLページに複数行のテキストボックスを配置する
HTMLページにテキストボックスを表示する
HTMLテキストボックスで未入力時に表示する説明文（プレースホルダー）を設定する方法

HTML テキストボックス, JavaScript

JavaScriptで編集状態のテキストボックスの背景色やボーダーを変更する - フォーカスのあるテキストボックスのスタイルの変更

HTML ラジオボタン

ラジオボタンを表示する

HTML ラジオボタン, HTMLタグ

ラジオボタンの右側の文字列をクリックすると、ラジオボタンにチェックがつく動作にしたい

HTML5

枠や領域を編集可能にする - ContentEditable を利用した編集可能な枠の作成
画像の下部に意図しない数ピクセルのマージンがとられる
HTML5のプログレスバーコントロールを表示するコードと表示結果

HTML5, JavaScript

HTML hidden Property による要素の表示・非表示の切り替え

HTML5, JavaScript, JavaScript Drag&Drop

複数の要素をドラッグ＆ドロップできるようにする
要素をドラッグ＆ドロップできるようにする

HTMLタグ

日付の入力フィールドを作成する
結果を出力する領域を作成し、フォームの入力フィールドが変更されたタイミングで処理を実行する - oninputイベント outputタグの利用
テキストボックス (inputタグ) でスペルチェックのアラート表示を無効にする
複数行テキストボックス (テキストエリア / textarea) でスペルチェックのアラート表示を無効にする
HTMLの引用ブロックを作成する方法 - blockquoteタグの使い方
テキストのインライン要素のセクションを作成する - span タグによるインライン要素のテキストの表示
テキストのブロック要素のセクションを作成する - div タグによるブロック要素のテキストの表示
HTMLでの改行 - BRタグを利用した改行
段落を記述する - Pタグによる段落の記述
水平の区切り線を記述する - HRタグによる区切り線の記述
HTMLで見出しを表現する - hタグの利用

HTMLタグ, HTMLリスト

箇条書きリストを記述する方法 - ULタグ、LIタグの基本と使い方
番号付きリストを記述する方法 - OLタグ、LIタグの基本と使い方

HTMLタグ, preタグ

整形済みテキストのセクションを作成する - preタグを利用した整形済みテキスト

HTMLタグ, TABLEタグ

表(テーブル)を作成する - TABLEタグによる表の記述

HTMLタグ, カラーピッカー

HTMLページでカラー選択ボックス (カラーピッカー ダイアログ)を表示する

HTMLリスト

HTMLのUL・OLタグでリストマークや番号をカスタマイズするコードと表示結果

imgタグ

imgタグで画像がなかった場合に指定した画像を表示する
imgタグで画像がなかった場合に何も表示しない
HTMLページに画像を表示する - imgタグの利用

Javascript

シンプルなポップアップを表示する

JavaScript

日付の入力フィールドに設定したvalue の値が入力フィールドに反映されない
Aタグをクリックしてもページ遷移しないコードと実行結果 - HTML・JavaScriptでリンク動作を制御する方法
JavaScriptでページの背景色、前景色(文字色)を変更する
Webブラウザーのウィンドウ内に擬似ダイアログボックスを表示する

JavaScript, カラーピッカー

カラー選択ボックス (カラーピッカー) で選択したカラーの値を取得するコードと実行結果

srcset

srcset にピクセル密度記述子を設定した場合の動作
高DPIディスプレイでHTMLページを表示すると画像がぼやける現象への対処

SVG

SMIL のSVGファイルのアニメーションがループしないようにしたい
SVG画像のデータをCSS中に埋め込んで表示する
SVG画像のデータをHTML中に埋め込んで表示する
SVG形式の画像を表示する

TABLEタグ

TABLEタグの表の罫線を一重で表示する - cellspacing の利用

textarea

textareaタグのテキストボックスでテキストを自動で折り返さないようにするコードと実行結果 - textareaでのワードラップの禁止

WebBroker

HTML Web Workers を利用する - シンプルな Web Workers の作成

Windows

タグの組み方により、Webブラウザーのダブルクリックで選択される範囲に違いがある現象について

XHTML

<タグ名 ..... /> の記述をするとスキーマエラーになる : XHTMLコーディングでのスキーマエラー

アコーディオンパネル

details タグを利用したアコーディオンパネルのコードと表示結果

エンコーディング

HTMLページのエンコーディングを指定する

レイヤー

コンテンツに重ねて別のコンテンツを表示する - レイヤーの利用