ホームページ作成
リンクの表示・装飾 (HTML,CSS,JavaScript)
HTMLやスタイルシート(CSS)、JavaScriptを使ったリンクの表示、装飾方法について解説しました。
記事一覧
-
別ウインドウで開くリンクにアイコンを付加
新規ウインドウを開くリンクを区別できるようにするリンクを作るa要素に「target="_blank"」という属性(値)を加えることで、リンク先を新規ウインドウで開くよう指示することができます。 しかし、「target属性が使われているリンク」も「使われていないリンク」も、ブラウザ上の表示は同じ...続きを読む
-
元のページに戻れないリンクを作る
【ここは記事の1ページ目】現在のページをブラウザの履歴に残さないようにする通常、リンクをたどって次のページに移動しても、ブラウザの「戻る」ボタンを押せば、元のページに戻る(再表示する)ことができます。しかし、特殊なリンク方法を使えば、次のページに移動した後で「戻る」ボタンを押しても、そのページ...続きを読む
-
周囲の余白や文字も含めてリンクをデザイン
リンクをデザインする以下の3つのリンクにマウスを載せてみて下さい。 一見、サイト名部分だけがリンクのように見えますが、実際には周辺の余白も含めて、上下の文字列全体がリンクになっています。 いまオススメの素材やその使い方など、Web素材のお役立ち情報を紹介 All About...続きを読む
-
箱形のページ移動リンクを作る
div.sourcecode { background-color: #eeeeee; padding: 4px 4px 4px 20px; margin: 12px; line-height: 1.4; font-family: monospace; } div.samplearea { ...続きを読む
-
どのリンクが選択中なのかを際立たせる装飾
div.sourcecode { background-color: #eeeeee; padding: 4px 4px 4px 20px; margin: 12px; line-height: 1.4; font-family: monospace; }メニューやリンクリストに活用するとお...続きを読む
-
リンク文字の直後にアイコンを加える
div.sourcecode { background-color: #eeeeee; padding: 4px 4px 4px 20px; margin: 12px; line-height: 1.4; font-family: monospace;}div.testground { mar...続きを読む
-
実は重要!スタイルシートの記述順!
div.sourcecode { border: 2px #eeeeee solid; background-color: #eeeeee; padding: 0.5em; font-family: monospace; }span.sourcecode { font-family: mono...続きを読む
-
PDFへのリンクに便利。リンク移動前に確認させる方法
リンク先がHTMLとは限らない通常のウェブページへのリンクだと思ってクリックしてみたら、実はPDFファイルで、Acrobat Readerが起動してしまった……というような経験はありませんか?急いでいるときにそうなると、腹が立ってしまう人も居そうです。そこで今回は、リンクをクリックしたときに、...続きを読む
-
マウスが乗ると押し下がるテキストリンクの作り方
押し下がるのはボタンだけじゃないボタンはクリックすると押し下がりますね。 しかし、テキストリンクや画像リンクでは、ボタンのように押し下がったりしません。では、この サンプルリンク の上にマウスを乗せてみて下さい。どうでしょうか?リンクになっているテキストがちょっとだけ押し下がりませんでしたか?...続きを読む
-
空白部分もクリック可能!クリックできる面積を増やす
クリックできる面積を増やそうまずは、下記のリンクサンプルをご覧下さい。普通のリンクですね。クリック可能なのは、タイトル部分だけです。 ...続きを読む