ホームページの作り方《スタイルシートの書き方》

スタイルシートの書き方に関する記事など

スタイルシートの書き方・活用方法に関する記事としては、例えば以下のような記事を公開しています。

• 『箱形のページ移動リンクを作る』
  ★ニュースサイトなどでたまに見かける箱形のページ移動リンクを作ってみましょう。ただ数字を並べるよりも幅が広くて見やすく、クリックしやすいメリットがあります。画像ではなく文字なので、サイズ変更も可能です。
• 『スタイルシートを切り替えられる機能を作る』
  ★複数のスタイルシートを用意しておき、閲覧者がプルダウンメニューを使って自由に切り替えられる機能を作ってみましょう。読み込むCSSファイルそのものを変更できるので、装飾やレイアウトを大きく変更できます。
• 『周囲の余白や文字も含めてリンクをデザイン』
  ★ちょっと変わったリンクのデザイン方法をご紹介。項目の少ないメニューや、目立たせたいリンクに良いかも。周辺の余白も含めて上下の文字列全体がリンクになっているため、クリック可能範囲の広いリンクです。
• 『ページ移動せずに内容を変更するタブを作る』
  ★ページを移動することなくボックス内の表示内容を切り替えられる「タブ」機能を作ってみましょう。閲覧者が「タブ」をクリックすると一瞬で内容が変化します。狭い領域に沢山の情報を掲載したい場合などに使えます。
• 『角の丸い「タブ」を作る』
  ★左上と右上を丸くした「タブ」を作ってみましょう。長方形よりも角が丸い方が「タブ」らしく見え、視覚的に分かりやすいメニューを作ることができます。文字はテキスト・色はCSSで指定する方法なので修正も楽です。
• 『キャプション付き画像を横に並べて配置する』
  ★アルバムのように、キャプション(タイトル名)を加えた画像を横方向にたくさん並べてみましょう。横に並ぶ数を指定せず、ウインドウサイズに応じて自動的に配置される「リキッドレイアウト」で実現する方法をご紹介。
• 『表示面積を限定してスクロールバーを表示！　狭い領域に情報を詰め込むには』
  ★更新履歴の表示など、「広い面積は専有したくないものの、多くの情報を掲載したい」場合、どうしますか？　HTMLとCSSでスクロールバーを表示させましょう。