chapter 03 section 05 アイコンが自動的に付く 6 7 8 ...198 chapter 01 chapter 02 chapter...
TRANSCRIPT
![Page 1: CHAPTER 03 SECTION 05 アイコンが自動的に付く 6 7 8 ...198 CHAPTER 01 CHAPTER 02 CHAPTER 03 199 SECTION 05 アイコンが自動的に付くユニークなリンクをつくる](https://reader034.vdocument.in/reader034/viewer/2022051408/600de68e3804da5ed156b255/html5/thumbnails/1.jpg)
198
CH
AP
TER
01
CH
AP
TER
02
CH
AP
TER
03
199
SECTION 05 アイコンが自動的に付くユニークなリンクをつくる
CH
AP
TER
01
CH
AP
TER
02
CH
AP
TER
03
制作・文:佐藤とも子/サチコ(螺旋デザイン)
リンク先のURLから拡張子・外部リンクなど、様々な状況に合わせてアイコンを自動的に付けられます。リンクをクリックする前に得られる情報が増えるので、ユーザーフレンドリーなサイトを構築できます。
制作のポイント
・属性セレクタを活用する
・�CSSハックとbehavior:�expressionでIE6に対応
・JavaScriptを使わずにXHTMLとCSSのみで実装する
使用するおもなコード/プロパティ
a[href$="**"]
a[href^="**"]
* html
behavior: expression
X H T M L にclassの記述のないaタグに自動的にアイコンが付きます。
拡張子以外にもURLの文字列を判断してスタイルを付けていけます。
XHTMLでは普通のリンクですが、CSSの属性セレクタで拡張子別に違うスタイルを付けます。
アイコンが自動的に付くユニークなリンクをつくる
05 6 7 8
3 4
リンク先に合わせてアイコンが付くTECHNIC 1 リンク先の拡張子よるアイコンの違いTECHNIC 2
mailtoや外部リンクにも対応TECHNIC 3
IE6でも表示できます。属性セレクタではなくIE 独 自 機 能 の使用で対応しています。
IE6 にも対応TECHNIC 4
XHTMLをマークアップする
01 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
02 <html xmlns="http://www.w3.org/1999/xhtml">
03 <head>
04 <meta http-equiv="Content-Type" content="text/html;
charset=UTF-8" />
05 <title>リンクのユニークな見せ方</title>
06 <link href="link.css" rel="stylesheet" type="text/css" />
07 </head>
08 <body>
09 <p><a href="test.zip">拡張子(.zip)付きのリンクをaタグに設定しています。</a></p>
10 <p><a href="test.html">比較用。リンク先の拡張子は「html」です。</a></p>
11 </body>
12 </html>
まずXHTMLでリンク入りのテキストをつくりましょう 1-1 。
06行目
スタイル作成に使うCSSは「link .css」という名前を付けて外部ファイルとしてリンクさせます。09行目
z ipのみのリンクで進めてみましょう。
011-1 XHTML
作例のソースコードはXHTMLです。文字 コ ー ド が UTF-8の 場 合 は、 <?xml version="1.0" encoding="UTF-8"?> というXML宣言を省略できます。
アイコン付きのCSSをつくる
@charset "utf-8";
a {
background:url(img/zip.gif) no-repeat right center;
padding:1px 15px 1px 0;
}
01 で作成したXHTMLにリンクするCSSをつくります 2-1 。フ
ァ イ ル 名 は「link .css」 と し、XHTMLと同じ階層に保存しましょう。リンクのうしろにzipアイコンが付くデザインとなります 2-2 。アイコンの画像は 2-3 のようにつくっています。ファイルの階層も確認してください。
02
2-2
2-3
2-1 CSS(link.css)
最初の行の@charset "utf-8";はCSSファイル用の文字コードです。これを明示しておかないとテキストエディタによっては、コメントなどの日本語の部分が文字化けしてしまうため、記述しておくことをお勧めします。
i-zip.gif13px×13px
「img」フォルダ
i-xls.gif13px×13px
i-doc.gif13px×13px
i-pdf.gif13px×13px
i-outsite.gif13px×13px
i-mail.gif13px×13px
リンク リンク
link.css
CHAPTER 03 デザインパーツ
ロック付薄形ガイドシリンダ - SMC CorporationCLS CLQ RLQ MLU MLGP ML1C D- -X 選定条件/表1 取付姿勢 垂直 上向き 下向き 水平 負荷の動く最大速度V
Shizuoka Prefecture · Web view入札参加番号 ※この様式は、添付のExcelをダウンロードしてご使用ください ※この様式は、添付のExcelをダウンロードしてご使用ください