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

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

指定日・指定時刻になったときに、自動でウェブページの内容を更新する方法を解説。(1)ウェブサーバのcron機能を使って、指定日時に「既存ページ」のHTMLファイルを「更新ページ」のHTMLファイルで上書きする方法と、(2)CGIを使って、現在日時に応じて新旧どちらかのページデータを返すよう切り替える方法などをご紹介。

ボタンクリックで後続コンテンツを表示する「続きを読む」ボタンの作り方を解説。ページを読み込んだ時点では冒頭以外のコンテンツは折りたたんで(＝非表示にして)おき、「続きを読む」ボタンが押された際にだけ続きを展開(表示)する仕組みを作ってみましょう。グラデーションを使って徐々に後続コンテンツを薄くしたり、アニメーション効果と共に続きを表示したりする方法も紹介しています。

お気に入り登録ボタン（ブックマークボタン）の作成方法を解説。IE11までならJavaScriptでブックマーク登録画面を出せます。SafariやChromeなど他のブラウザでは動かないため、代わりにソーシャルブックマークサービス「はてなブックマーク」や「Pocket」にURLを登録するボタンの設置方法も紹介。

HTML＋CSSだけでタブの切り替え機能を作る方法をサンプルと共に解説。複数のタブから見たい対象を選ぶだけで、ページを移動することなく表示内容が一瞬で切り替わります。選択中のタブがどれなのかを明示できるようにタブの色を変化させるのも簡単。JavaScriptなどのスクリプトは不要です。サンプルソースをコピー＆ペーストして試してみて下さい。

HTMLのcanvas要素上にグラフを描画してくれるスクリプト「Chart.js」の簡単な使い方を紹介。円グラフ・棒グラフ・折れ線グラフなど様々なグラフを、アニメーション効果付きでWebページ上に表示できます。画像ファイルとして作成するわけではないので、JavaScriptソース内の記述を書き換えるだけで、グラフの値も色も大きさも容易に修正できます。

ウェブページのデザインをモバイルファーストで作る際のCSSソースの書き方を解説。スマートフォンに最適化したシンプルなCSSを「共通デザイン」として先に記述しておき、後から「タブレット向けの差分デザイン」や「PC向けの差分デザイン」を付け足していくモバイルファーストな書き方なら、CSSソースの総量を減らしやすく、更新の手間も少なくて済みます。

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

画像クリックで拡大画像を表示できるレスポンシブ対応の代表的スクリプトLightbox2の使い方とカスタマイズ方法を1ページで解説。表示サンプルと共にオプションの書き方も紹介。Lightbox2はjQueryと共にCDN経由で読み込めば、自サイトに何も設置することなく簡単に使用可能。PCでもスマホでも動きます。

ファイル拡張子とはファイルの種類を示す英数字のことです。Web製作PCでは拡張子が見えないと不便なので、拡張子を表示する設定にしましょう。HTMLファイルの拡張子には.htmや.htmlや.shtmlなど複数あります。それらの違いもご紹介。