Web Pro

ホームページやWebデザインでは文字色や背景色、ボタンの色などを色コードで指定します。白は「#FFFFFF」黒は「#000000」。しかし色コードとは何？HEXとRGBは何が違う？どれを使えばいい？ホームページ制作ではどう指定するの？という方も多いでしょう。ホームページ制作で使われる色コードの仕組みからHEX・RGB・RGBA・HSL・HSLAのカラーコードの種類の違い、使い方、実務での使い分け方までわかりやすく解説します。

ホームページを制作する際、他人が作成した画像や写真を自分のサイトに掲載する「引用」は一定の条件を満たせば法律上認められていますが、画像は作品としての独立性が高く著作権侵害に該当しやすいため実務ではトラブルにつながるケースも少なくありません。SNS投稿のスクリーンショット、商品画像の無断転載、人物写真の取り扱いなど画像特有のリスクは多岐にわたり、引用のつもりでも、「改変」「無断転載」「商標権侵害」「肖像権侵害」といった別の権利問題に発展する可能性があります。画像引用における基本ルールから、実務でよくあるトラブル事例、そして著作権・商標権・肖像権それぞれの注意点まで、ホームページ制作の現場で必要な知識を整理して解説します。

インターネットには無料で利用できる画像が数多く公開されていますが、著作権者が一定の条件のもとで利用を許可しているケースが多く、その代表がクリエイティブコモンズ（CCライセンス）です。一方でCCライセンスを正しく扱えず、著作権侵害のトラブルに発展するケースが後を絶ちません。背景には、「Webライターやブロガーにありがちな2大誤解」があります。ここでは、CC0から複雑な複合ライセンス（CC BY-NC-SAなど）までの正しい条件と注意点を徹底解説。さらに、ウィキメディアコモンズやFlickrといった安全なCCライセンス画像の検索サイトと、トラブルをゼロにする実践的な使い方を紹介します。

ホームページを運営していると「他サイト画像や写真を自分のページで紹介したい」ことがありますが画像の引用は扱いが厳しくHTML5から導入されたfigureタグや figcaptionタグ、文章とセットで囲むblockquoteタグを適切に使いこなす必要があります。画像の無断転載トラブルを防ぐためのHTMLの正しい記述例、コーダーが迷いがちな「alt属性とキャプションの書き分け」などを解説します。

ホームページを運営する上で他サイトの文章や発言を紹介したいことがあります。HTMLには文章の引用を意味的に表現するための要素として<blockquote>・<q>・<cite>の3つが用意されています。見た目を整えるタグではなく「長い引用」「短い引用」「出典・作品名」といった役割を持ち検索エンジンや閲覧者に対して明確な情報構造を伝えます。これら3つの引用関連タグの基本的な使い方から実際の記述例、出典情報の書き方までを解説します。

実務でよく使用する position（ポジション）を使って・画面右下にページトップボタンを固定する・スクロールしても追随する購入ボタンを画面下に固定する・長い表の見出し行（ヘッダー）をスクロール中も固定する実務でよく使われるUIを実装するユースケースを紹介します。「スクロールに合わせてUIをどう動かせばいいの？」「fixedとstickyはどう使い分ければいいの？」という疑問を解消していきましょう。

CSS positionでの・画像右上に表示するバッジ（ラベル）の作り方・画面中央に表示するモーダルウィンドウの作り方を初心者にも分かりやすく解説します。UIデザインパーツの実装方法を通して「なぜその配置になるのか」という考え方もあわせて理解できるように解説します。

CSSのpositionプロパティの種類（static、relative、absolute、fixed、sticky）と基本的な使い方、実務でよく使うユースケースについて解説します。Webサイトを作っていると「要素を特定の位置に固定したい」「他の要素と重ねて表示したい」「スクロールしても常に画面上部に表示させたい」といった対応が必要になる場面がありますが、HTMLの構造を変えずにCSSだけで要素の配置を細かくコントロールできるのがpositionプロパティです。

Webサイトの「テキストの前にアイコンを付けたい」「見出しの左に装飾ラインを引きたい」などの時に活用したいのがCSSの擬似要素。擬似要素を利用すれば、CSSだけで要素の前後や特定の部分にスタイルを適用できます。CSSの代表的な擬似要素や基本的な使い方を解説します。