ホームページ作成 人気記事ランキング
2024年04月27日 ホームページ作成内でアクセスの多かった記事をご紹介します。
1位【HTML+CSS】ウインドウ幅に合わせて画像サイズを変化させる方法
HTML+CSSだけで画像サイズを画面サイズに自動で合わせる方法を解説。レスポンシブWebデザイン採用サイトや、デバイスの画面幅に合わせて(縦横比率を維持したまま)画像を拡大縮小させたい場合の簡単な書き方を中心に解説していきます。
装飾・レイアウトの動的変更 (HTML,CSS,JavaScript)ガイド記事2位CSSのletter-spacingでHTMLの文字間隔を調整する方法
HTMLで書いた文章の文字間隔を調整するには、CSSのletter-spacingプロパティを使います。単位emやpxを使って望みの字間を数値で指定すれば、細かく自由な幅で文字と文字の距離を広げられます。マイナスの値を指定すれば文字詰めもできます。CSSで字間を広げたり狭めたりする簡単な方法を解説。特に文字間隔を広げたい場合に、空白文字を使って調節してはダメな理由もご紹介。
テキストの配置・装飾 (HTML,CSS)ガイド記事3位自分のPCを簡単にウェブサーバにする!
自分のPCをウェブサーバにしましょう!そうすると、CGIやSSIの動作を確認するためにわざわざサーバにファイルをアップロードする必要はなくなります。その他メリットはたくさんです。
ホームページ作成テクニック、小技ガイド記事4位移転先へ自動移動(転送/リダイレクト)させる方法
ホームページを別のURLへ移転した際に便利な、指定したページへ自動的に移動(リダイレクト)させる方法を解説。すぐに自動転送するほか、旧サイトの全ページに同じ「新しいホームページへの引っ越し案内」を一括表示する方法も説明。.htaccess・HTML・JavaScriptの3通りでリダイレクトする書き方を紹介しています。
アクセス制限・認証、サイト内検索ガイド記事5位idとclassの違いと使い分け!スタイルシート(CSS)適用法
idとclassの違いと、使い分け方法をご紹介いたします。HTMLにスタイルシート(CSS)を適用する方法には、class属性を使う方法と、id属性を使う方法があります。この「class」と「id」は明確に役割が異なります。全部にclass属性を使っている場合は問題ありませんが、全部にid属性を使っている場合は問題がある可能性があります。
HTML・スタイルシート(CSS)の基礎ガイド記事6位タブ機能の作り方!ページ移動せずに内容を切り替える
タブ機能の作り方を解説。ページを移動することなくボックス内の表示内容を切り替える方法です。HTMLとCSSでタブを作り、JavaScriptを使って表示タブを切り替えます。タブ表示部分がクリックされれば一瞬でページ内容が変化するタブ機能は、狭い領域にたくさんの情報を掲載したい場合に便利です。
装飾・レイアウトの動的変更 (HTML,CSS,JavaScript)ガイド記事7位100種類以上ある! ウェブ上で使える矢印記号(絵文字)
ウェブ上に表示できる矢印記号は、実は100種類以上もあります。上下左右を表す矢印「↑↓←→」だけではなく、斜め方向の矢印、二重線の矢印、カーブした矢印、太い矢印、手や指の形をした矢印など、テキストで表示できる絵文字のような矢印記号が多数あります。矢印の代わりに三角記号「▲▽」も使われますが、これも上下以外に横向きの三角形も表示できます。数値文字参照の書き方を使って特殊な矢印記号の出し方をご紹介。
特殊文字・記号の記述 (HTML)ガイド記事8位ドロップダウンメニューとは?HTML+CSSだけで簡単に作る方法
ドロップダウンメニューとは?HTML+CSSだけでドロップダウンメニューを作る方法を解説。jQueryなどのJavaScriptは不要。リストの書き方(ul要素)を使って2階層以上のサブメニューも作れます。クリックせずにメニューを開閉できる、簡単でレスポンシブなメニューバーUIの作り方をサンプルと共にご紹介。
表示・非表示の切替 (HTML,CSS,JavaScript)ガイド記事9位ウェブページ周囲の余白サイズや背景色を調整する方法
Webページの周囲にある余白を消す方法や、余白部分にだけ背景色や背景画像を加えるスタイルの書き方、任意の余白サイズを指定する方法などを簡単に解説。Webページ周囲の余白は主に、HTMLのbody要素に対するマージンで作られています。上下左右のマージン量をCSSで調整したり装飾したりすれば、ページ周囲の余白をなくすことも自由な色を付けることも簡単です。
レイアウトの作成・調整 (HTML,CSS)ガイド記事10位イメージマップの作り方 !HTMLで1画像内に複数リンクを設定
イメージマップの作り方をご紹介。1枚の画像内部に複数個のリンクを設定できるイメージマップ。画像1つを丸ごとリンクにするのではなく、画像内の一部分だけをリンクにしたり、画像の中の座標ごとに移動先の異なる複数のリンクを作ったりできます。HTMLのmap要素とarea要素を使って、画像内を円形や矩形など自由な形で区切るだけです。
画像の表示・活用 (HTML,CSS,JavaScript)ガイド記事