リンク用のスタイルを追加しよう|さきちんWEB▲SakichinWEBホームページの作り方:さきちんうぇぶホームページの作り方を基礎から学べるウェブサイト。わかりやすい説明で初心者も安心!スタイルの追加と確認HOMEホームページを完成させようSTEP5.他のページを作る前にスタイルの追加と確認スタイルを追加しようブラウザのバージョンにより異なりますが、リンクを設定すると画像に枠ができていたり、レイアウトが崩れたり、テキストのリンク色が違って表示される場合があります。IE11以下のブラウザを使っている場合に多く発生します。これを解決するために、新しくスタイルを作成して適用してあげましょう。どのブラウザで見てもレイアウト崩れのないように、スタイルを設定します。画像の枠を表示させないスタイルそれではまず、リンクが設定されている画像の枠を表示させないスタイルを作成しましょう。「style.css」をテキストエディタで開き、以下のスタイルを作成します。{border:0px;}このスタイルの役割は、すべての画像(img)に枠(border)を表示させない(0px)という意味になります。特定の画像に適用するのではなく、ページ全体に適用するので「.」や「#」を付けません。入力が完了したら、「style.css」を保存してブラウザで確認してみましょう。画像の枠が表示されていなければOKです。次はテキスト(文字)リンクのスタイルを作成しましょう。リンク色を変更して、マウスポインタが触れた時にアンダーラインが表示されるようにします。※忘れてしまった場合は、「リンク色の変更と装飾」を見て思い出しましょう。「style.css」をテキストエディタで開き、以下のコードを入力します。{color:#630;}step.1まずは「a」に「text-decoration:none;」を入力し、飾り付けなしにします。step.2次に「a:link」でアクセスしたことのないリンクを設定します。「color:#630;」を入力し、色を指定しましょう。step.3「a:visited」はアクセスしたことがあるリンクです。こちらも「color:#630;」を入力し、色を指定しましょう。step.4「a:hover」はマウスが上に乗っている状態のリンクです。ここには「color:#630;」で色を指定し、「text-decoration:underline;」でアンダーラインが表示されるようにしましょう。step.5「a:active」はクリック中のリンクです。こちらも「color:#630;」で色を指定しましょう。[CSSの記述例]すべて入力が終わったら、「style.css」を保存してブラウザで確認しましょう。テキストリンクカラーが「color:#630;」で表示され、マウスを上に乗せるとアンダーラインが表示されれば成功です。[ブラウザでの表示例]これでトップページは「完成品」とまったく一緒になりました。次はこのソースコードを他ページに貼り付け、編集を行いましょう。覚えておきたいポイント画像の枠線を非表示にしようブラウザの種類やバージョンにより、画像にリンクを設定すると縁取り枠が表示されてしまう場合があります。自分のパソコンでは表示に問題がなくても、利用者は様々なパソコンやブラウザでホームページにアクセスします。誰にでも同じように表示されるように非表示の設定は行っておきましょう。良質なコンテンツを作り込む検索エンジン最適化(SEO対策)広告を出すSNSを利用する独自ドメインを取得しようあとがき快適なサイト運営のためにウィルス対策について安心してホームページを運営するための心がけ。HTMLの特殊文字一覧よく使う、HTMLの特殊文字・記号の一覧表。カラーコードの一覧HTML・CSSで使えるカラーコードの一覧表。当サイトをご利用になる前に、必ずご確認ください。FAQよくあるご質問など。お問い合わせさきちんWEBについてのお問い合わせはこちらから。個人情報管理とWeb広告配信について。運営者情報さきちんWEBの管理・運営者、さきちんについて。サイトマップさきちんWEBのサイトマップ。さきちんWEBについてホームページの作り方を学習できるウェブサイトです。さきちんWEBはホームページの作り方が学べるウェブサイトです。基本から応用まで、ホームページ制作に必要な知識が身につきます。初心者でもOK!難しい専門用語を使わず、わかりやすい説明でホームページの作り方を学ぶことができます。お手本を見ながらサクサク学習。実践形式でグングン上達。まで必要な知識がまとめて身につく、オールインワン学習サイトです。SakichinWEB。