ホームページ作成 人気記事ランキング(2ページ目)
2024年04月25日 ホームページ作成内でアクセスの多かった記事をご紹介します。
11位右クリックを禁止する方法と禁止を解除(回避)する方法
ブラウザ上で右クリックした際に表示されるメニュー(コンテキストメニュー)の表示を禁止したり、コピー操作を無効化したり、その際に警告を表示したりする方法はとても簡単です。しかし、その禁止や無効化を解除(回避)する方法もとても簡単です。右クリックやコピーを禁止するHTML+JavaScriptの書き方と、その解除方法の両方を解説。
アクセス制限・認証、サイト内検索ガイド記事12位100種類以上ある! ウェブ上で使える矢印記号(絵文字)
ウェブ上に表示できる矢印記号は、実は100種類以上もあります。上下左右を表す矢印「↑↓←→」だけではなく、斜め方向の矢印、二重線の矢印、カーブした矢印、太い矢印、手や指の形をした矢印など、テキストで表示できる絵文字のような矢印記号が多数あります。矢印の代わりに三角記号「▲▽」も使われますが、これも上下以外に横向きの三角形も表示できます。数値文字参照の書き方を使って特殊な矢印記号の出し方をご紹介。
特殊文字・記号の記述 (HTML)ガイド記事13位別窓を開かずにその場クリックで拡大画像を表示する4つの方法
画像のクリック後にページを移動せず、その場で拡大画像を表示できるLightbox系スクリプトのおすすめ4本を紹介。JavaScriptを読み込むタグと短いHTMLを書くだけで簡単に使えます。jQueryを使う定番のLightbox2や、動画のポップアップも可能なColorbox、スマホ対応で全画面表示もできるIntense Imagesなどを紹介。CSSを使えば画像サイズの調整も簡単です。
画像の表示・活用 (HTML,CSS,JavaScript)ガイド記事14位HTMLの表示/非表示を切り替える2つの方法
HTML内の特定の要素について表示/非表示を切り替えたい場合は、JavaScriptを使って当該要素のスタイルを変化させれば簡単です。ある要素の表示/非表示を切り替えるには、displayプロパティの値を変更する方法と、visibilityプロパティの値を変更する方法があります。ボタンのクリックで動作するサンプルを使って、画像の表示/非表示を動的に切り替える処理の書き方をご紹介。
表示・非表示の切替 (HTML,CSS,JavaScript)ガイド記事15位丸囲み数字などの環境依存文字を使う方法
環境依存文字(機種依存文字)でも文字化けせずに表示する方法を紹介。丸囲み数字、ローマ数字、ハートマークなど一部の特殊な文字や記号は、環境依存文字と呼ばれます。HTMLファイルの保存時に文字コード(テキストエンコーディング)をUTF-8にできない場合でも、数値文字参照という特殊な書き方を使えば、閲覧者の環境に関係なく各種記号を文字化けせずに表示できます。
特殊文字・記号の記述 (HTML)ガイド記事16位CSSでの左寄せ・中央寄せ・右寄せ方法、1行に混在も可
CSSで左寄せ・中央寄せ・右寄せする方法を解説。同一行内に左寄せと右寄せを共存させたり、左寄せ・中央寄せ・右寄せ全部を同じ行に共存させることもできます。複数の文字寄せの共存もfloatプロパティを使うなど少しの工夫で実現できます。1行の文字寄せ方向の指定ならtext-alignプロパティを使うだけ。
テキストの配置・装飾 (HTML,CSS)ガイド記事17位HTMLファイルの中に画像を埋め込んで表示させる方法
HTMLソースの中に画像を直接埋め込んで表示する方法を解説。HTMLはテキストデータですから、そのままではバイナリデータである画像を含められません。しかし、Base64という方法で画像をエンコード(=テキストデータに変換)すれば、画像をHTMLソースの中に直接埋め込むことができます。読み込むファイル数を削減して高速化したい場合などに活用できます。HTMLソース内に画像を直接挿入してみましょう。
画像の表示・活用 (HTML,CSS,JavaScript)ガイド記事18位CSSでIMEの状態を制御するime-modeの使い方+代替方法
Web上の入力フォームで日本語入力機能(IME)のON・OFF・無効状態を制御する方法に、CSSのime-modeプロパティがあります。対応ブラウザはIEやFirefoxで、Edgeでは効かなくなりました。ime-modeの書き方と、ime-modeを使わずに済ませる代替方法として、ChromeやiOS版Safariなどで使えるHTML5.1のinputmode属性や、半角全角を自動変換する方法などをご紹介。
フォームの活用・装飾 (HTML,CSS,JavaScript)ガイド記事19位画面サイズ別にCSSをメディアクエリで切り替える方法
画面サイズ別にCSSをメディアクエリで切り替える方法を解説。メディアクエリとは、画面サイズなどの閲覧環境に応じて適用スタイルを切り替えるCSSの機能です。レスポンシブWebデザインを作る際にも使い、HTMLのmedia属性値やCSSの@media規則で条件を指定します。スマホ専用スタイルや、PC等の広い画面幅向けスタイルなどを作成しておき、簡単に切り替えられます。
装飾・レイアウトの動的変更 (HTML,CSS,JavaScript)ガイド記事20位HTMLでセルや行全体をクリック可能なリンクにする方法
HTML+CSSで「1行全体」をクリック可能なリンクにしたり、テーブルの枠線内で「1つのセル全体」を余白も含めてクリック可能なリンクにしたりする方法を解説。HTMLのa要素で作るリンクを、CSSでブロック化した上で空白量を調整する簡単な記述で作れます。文字(リンクテキスト)だけでなく余白も含めた広い範囲をクリック可能にする、押しやすいリンクの作り方をご紹介。
リンクの表示・装飾 (HTML,CSS,JavaScript)ガイド記事