ホームページ作成 新着記事一覧

ウェブページを柔軟にレイアウトできるCSS flexの書き方と活用方法を解説。displayプロパティに値flexを指定した上でflex-directionプロパティを併用すれば、横並び・縦並び・正順・逆順などCSSだけで表示順序を自在に指定できます。さらにorderプロパティを併用すれば特定要素の掲載順序を番号で指定できるため、「本来なら中央に表示されるボックス」を右寄せして表示するなど、とても柔軟な配置調整ができます。

わずか9行のjQueryソースで、ウェブサイトのメニューバーにドロップダウンメニュー機能を加える方法を解説。ul＋li要素で作るリスト形式のHTMLを、メニューらしく見えるようCSSで装飾し、JavaScript(jQuery)を使ってサブメニューの開閉を制御するだけで、簡単に「マウスに合わせて自動でサブメニューが展開、メニュー外のどこかをクリックすると消える」という使いやすいドロップダウンメニューが作れます。

画面の小さなスマートフォンでは、スマートフォンで操作しやすいように作られたウェブサイトの方が閲覧しやすいでしょう。スマホ用サイトを作る前の準備として、製作前に知っておきたいポイントや、スマートフォン上のブラウザの仕様などについてを簡単にご紹介いたします。特殊な作り方は必要なく、ポイントさえ押さえておけばPC用サイトと同じ方法で簡単に作れます。ぜひ、スマートフォン対応サイトを作ってみて下さい。

CSSのborder-radiusプロパティを使って、スタイルシートだけでボックスなどの角を丸くする方法を解説。枠線が引かれていれば四角い枠線の角が丸くなりますし、背景色が塗られていれば四角い塗りつぶし領域の角が丸くなります。画像の四隅を丸くカットすることも可能。角丸の半径は1ピクセル単位で設定でき、四隅の一部だけ(上だけ・下だけ・左だけなど)を角丸にすることもできるため、連結ボタンに見せる装飾も簡単に作れます。

HTML5のaudio要素を使えば、Flashなどのプラグインを使わずにブラウザの機能だけで音楽ファイルを再生できます。ブラウザ内蔵の音楽プレーヤー(コントロール)をウェブ上に表示させたり、JavaScriptを使って音を鳴らすタイミングを制御したりできます。拍子木の鳴る「おみくじ」スクリプトの作成を例にして、audio要素を使ってボタンクリックで音を鳴らす方法をご紹介。

ブラウザのタブやブックマークなどに表示されるアイコンである「ファビコン(favicon／サイトアイコン)」の簡単な作り方と設置方法を解説。複数サイズのアイコンを1ファイルに収めたfavicon.icoファイルをブラウザ上で簡単に作成できる「x-icon editor」を使う手軽な作成方法をご紹介。白紙(透過)状態からでも、既存画像からでも、楽にファビコンが作れます。

メディアクエリ(Media Queries)とは、「ブラウザの表示領域」や「端末の画面サイズ」など閲覧環境の細かな条件に応じて、適用するスタイルシートを切り替えられるCSS3の機能です。スクリプトを用いることなく「パソコンなどの広い画面で見るとき専用のCSS」・「スマートフォンなどの狭い画面で見るとき専用のCSS」のように閲覧環境別のデザインを簡単に用意できます。

丸囲み数字、ローマ数字、ハートマークなど一部の特殊な文字や記号は、環境依存文字(機種依存文字)と呼ばれます。なぜそう呼ばれるのかの背景と、文字化けせずに表示する方法を、コピペ用サンプルHTMLソースと共に解説。ウェブ上に出すなら、文字コードにUTF-8(Unicode)を使うか、または数値文字参照の書き方を使えば、閲覧者の環境に関係なく意図通りに表示できます。

PC用サイトにアクセスしてきたスマートフォン利用者を自動的にスマホ用サイトへ誘導できるように、アクセス者の端末(PC/SP)に応じて閲覧先を自動で切り替える機能の作り方をご紹介。閲覧者のユーザエージェント名(ブラウザや機種名)を判別し、「.htaccess」のmod_rewriteを使ってアクセス先を自動振り分けすることで、スマートフォンユーザだけをリダイレクトする方法を解説。

これから新しくホームページ作成ソフトを購入しようと検討している方々のために、どんなソフトウェアをどうやって選べば良いのか、選び方を比較してご紹介いたします。ウェブ製作のスキルに応じた、おすすめのソフトを解説。