リンクや画像の基本的なマークアップの知識についてまとめました～！
別のサイトへリンクする（別タブで開く）
別のサイトへのリンクを指定するには、
<a href="http://www.sbcr.jp">SBクリエイティブ社のWebサイトへ</a>
これだけ。
<a>タグに「target="_blank"」を追加すれば、リンクをブラウザの別タブ、または別ウィンドウで開かせることができる。
<a href="http://www.sbcr.jp" target="_blank">SBクリエイティブ社のWebサイトへ</a>
ページ内の特定の場所へリンクする
ページ内リンクを設定する方法
ページ内リンクを設定するには、移動先のタグにid属性を追加しておく必要がある。
<h2 id="headline1037">アベンジャーズ</h2>
次に、リンクの<a>タグのhref属性には「＃」に続けて移動先要素のid名を書く
<a href="#headline1037">アベンジャーズ</a></li>
また、href属性が「＃」だけのリンクは、クリックすると常にページの最上部に移動する
<a href="#">ページトップに戻る</a>
テキストリンクにCSSを適用する
リンクテキストにマウスが重なったとき（ホバー状態）や、クリックしたとき（アクティブ状態）にテキスト色を変えたり、下線の表示・非表示を切り替えたり、CSSでスタイルを操作することが可能
リンクの状態に合わせて表示を変える
リンクやマウスポインタの状態によって適用されるスタイルを指定するセレクタは全部で4つある。
「：」で始まるクラスは「疑似クラス」と呼ばれる
| セレクタ | 説明 |
|---|---|
| a | 疑似クラスなしの「a」はすべての<a>タグにスタイルが適用される。 |
| :link |
<a>タグで、かつhref属性がついている要素にスタイルが適用される。 |
| :visited |
<a>タグで、かつリンク先が訪問済みのときにスタイルが適用される。 |
| :hover | その要素にマウスボタンが重なっているときにスタイルが適用される。 |
| :active | その要素の上でマウスボタンがクリックされているときにスタイルが適用される。 |
※実際には:linkと:visitedは省略されることが多い
a{
color:#0073bc;
}
a:hover{
color:#b7dbf2;
}
a:active{
color:#4ca4e8
}
青いところの色が変わる
画像を表示させる
HTMLに画像を表示する<img>タグは。次のようにして使用する。
<body>
<img src="../../images/image1646.jpg" width="904" height="572" alt="陽が沈む">
</body>
この書式は
<img src="表示させたい画像ファイルのパス" width="画像の表示サイズ（幅）" height="画像の表示サイズ（高さ）" alt="画像が表示されないときのテキスト">
となっています～～
オリジナルとは異なるサイズで表示する
レスポンシブWebデザインでページのレイアウトを組んでいるときには、ウィンドウ幅に合わせてレイアウトを変化させるだけでなく、CSSを使えば<img>タグを無視して画像を伸縮させることができる。
<style>
.img-responsive{
display:block;
max-width:100%
height:auto;
}
</style>
</head>
<body>
<img src="../../images/image1646.jpg" width="904" height="572" alt="陽が沈む" class="img-responsive">
</body>
これの応用として、この画像をそのままサムネにすることもできる。
①<img>にクラス名「img-responsive」を付ける。
②<img>を<div>タグで囲み、その<div>の幅をCSSで200pxに固定する
画像にリンクを付ける
画像にリンクを付けるには、<img>を<a>タグで囲むだけ。
画像の下にリンクを付けて、画像もテキストもクリックできるようにするには次のようにする。
<a href="http://studio947.net">
<div>
<img src="../../images/image0320.jpg" width="396" height="292" alt="積み木">
</div>
<p>カラフルな積み木のセット</p>
</a>
最後に
ふい～～～そろそろ難しくなってきたぞ、、、だれずに頑張ろう