ホームページ作成 人気記事ランキング(6ページ目)

多くのソフトウェアには便利なショートカットキーが用意されています。慣れると非常に重宝するショートカットキーをホームページ内部にも設けてみましょう。ページ内の各オブジェクトをキーで選択する方法をご紹介。

HTMLに書いた文字をCSSで装飾する際に、1文字ずつ異なる文字色で表示されるよう指定する方法を解説。HTMLの特定の要素内に書かれた文字列を、JavaScript（jQuery）を使って文字単位に分解して個別の要素でマークアップすれば、CSSのnth-child疑似クラスなどを使うことで1文字ずつ個別のスタイルを適用できます。1文字ずつ異なる色でカラフルに表示したい場合に便利。

ハート記号（ハートマーク）を書く方法を解説。画像を使わなくても、Unicodeに定義された絵文字を使えば20種類以上のハート記号を簡単にウェブ上に表示できます。CSSを使えばハートの色もサイズも自由に装飾可能。文字実体参照や数値文字参照の書き方を使ってハート記号をウェブページ上に表示する方法などをご紹介。

スマートフォン用にウェブページを作っても、コンテンツが多ければ自動的に縮小されて表示されます。これは、PC用ウェブサイトをうまく閲覧するためには必要な機能ですが、スマートフォン用にデザインしたページの表示では少々困ります。そこで、自動縮小を防ぐ「viewport」の記述を使ってみましょう。

文字列を、円形に配置して表示したり、アーチ状（扇形）にカーブさせて表示したりする方法を解説。jQueryを使うスクリプト「Arctext.js」を活用すれば、テキストを画像化することなく自由な半径でアーチ状に配置できます。上向き・下向きのアーチを組み合わせれば、コーヒー店のロゴのように文字を円形に配置することもできます。

SSLサーバー証明書を取得して、Webサイトを常時HTTPSで通信可能にする設定方法を解説。HTTPとHTTPSの違いから、常時SSL化のためにリダイレクトさせる.htaccessの書き方まで、「HTTPSにするには？」という疑問を解消できるSSL対応と設定の基礎をご紹介。独自ドメインのWebサイトでも無料のSSL証明書を使って簡単にHTTPS化できます。

HTMLのaudio要素を使って、Webページ上で音楽を再生したり効果音を鳴らしたりする方法を解説。ブラウザ内蔵の音楽再生コントロール（再生ボタンがあるプレーヤー）を表示させてMP3ファイルなどの音楽を流す方法や、JavaScriptを使って音を鳴らすタイミングを制御する方法を解説。autoplay属性で自動再生させたり、source要素で複数のファイル形式に対応させたりできます。

隠しリンクの作り方と見つけ方(探し方)、SEOでのペナルティなど注意点をご紹介。HTMLとCSSを使った「簡単に作れて簡単に見つけられる方法」から、JavaScriptを併用することで「リンク一覧作成機能(アドオンなど)を使っても見つけられない方法」まで、4種類の作り方・見つけ方を解説しています。隠しリンクゲームの作成や攻略などにお役立てください。

CSSで段組レイアウトを作る簡単な方法を解説。各段をdiv要素などのボックスで作るだけのシンプルなHTMLに、CSSのfloatとclearプロパティを適用するだけで段組レイアウトが作れます。HTMLとCSSをどう書けば段組になるのかの基本から、2段組や3段組の作り方、回り込み解除の便利な書き方(clearfix)まで、図とサンプルソースを使って説明しています。

画像の表示サイズをブラウザのウインドウ幅や端末の画面幅に自動で合わせたい場合があります。CSSを使えば画面幅と画像サイズを合わせるのは簡単ですが「拡大されすぎ／縮小されすぎ」を防ぎたいこともあります。「画像をウインドウ幅に合わせて表示したいが、本来の大きさより拡大はしたくない」、「画像を画面幅に合わせて表示したいが、極端な拡大や縮小は避けたい」など、画像サイズの自動調整に上限や下限を設けるCSSを解説。