はじめてのHTML&CSS入門

リンクされた文字を装飾してみよう

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
リンクをわかりやすくするための装飾方法を学びます。
講師:
07:22

字幕

このレッスンでは CSS によるリンクの装飾について学びます。それではチャプター3、レッスン10のファイルを開いてみます。今画面上では final のファイルが開いています。カーソルを合わせてみるとこの様にCSS だけでもボタンのようなデザインを作ることが可能です。begin と見比べると大分変わっているように見えます。それでは、begin のスタイルシートに記述をしていきましょう。Sublime text でスタイルシートを開くと今この様になっています。今までとちょっと違う書き方のセレクターがあります。実はリンクには4種類の状態があります。link はリンクが張られている状態だけを表しています。そして visited は リンクが訪問済みであることを表しています。hover はマウスがリンク領域に乗っかったという状態を表していてactive はボタンを押した瞬間クリックされた瞬間を表しています。まずは a タグに関してリンクを設定してボタンのようなデザインにしていきましょう。まず a はインライン要素フレージングコンテンツともいい横幅が div のようなボックスのように左右いっぱいには拡がりません。 これをコントロールするためにインラインである属性をdisplay block というプロパティを使って一度箱の状態に変えてしまいます。CSS で display block とすると箱の状態に変えることができて横幅や高さなどを制御することが可能になります。そして width を記入していきます。200px と記入します。そして、やはり分かりやすいように背景色を入れておきましょう。background そして色を薄いグレーここまでで一旦上書き保存をしてブラウザーの方で確認をします。アプリケーションを切り替えて、更新です。そうすると、リンクがこの様に文字だけではなくて、文字の横側の余白300px 分までちゃんとハンドカーソル、リンクが張られてるカーソルになることがわかります。では Sublime text で続きを記述をしていきましょう。文字とボタンの間に余白を作りたい。つまり文字とボタンの間にゆとりを持たせてあげるのは、内側の余白 padding を設定します。padding 10px としておきましょう。また、文字をボタンの中央に寄せたい箱の中で中央に寄せるときはtext-align というプロパティを使いますのでtext-align で center として中央寄せにしてあげます。 この状態でも上書き保存をしてブラウザーの方で確認をしてみましょう。切り替えまして、更新です。そうすると、padding の分だけボタンが少し大きくなってテキストが真ん中に寄っています。ただこのままだと下線がついていたりするのでリンクであることが少しやぼったく伝わってしまいます。では下線を消してみましょう。サブライムテキストに戻り追加の CSStext-decorationテキストの飾りを司るプロパティです。ブラウザーは勝手に下線を付けてしまうのでこれを none としてとってあげるんですね。これで上書き保存をしてブラウザーの方で見てみると更新下線がとれました。ただ、触ってもリンクであることがハンドカーソルでしか伝わりませんのでCSS で更に設定をしていきましょう。Sublime に戻りまず通常時のリンクの色です。ブラウザーのデフォルトは大抵ブルーになっていますが此方の色は a : link の部分に好きな色を設定することで変えることが可能です。今回は e60 としてみました。また visited の方も記入を先にしておきましょう。こちらも color を333 としておきます。そして上書き保存をしてブラウザーで見てみます。 そして更新無事にリンクの色が自分の指定した色に変わりました。また、この Google の部分をクリックするとGoogle に跳びますが戻ってくると、この様にvisited に変化したことがわかります。それでは更に Sublime で記述を続けていきましょう。今度は触った状態hover の部分を変えていきます。color をf f f、つまり文字色が白になる。そして、実は hover の状態で 他の CSS の状態も変えることが可能ですのでbackground のプロパティも指定してみます。background #069 としておきます。そして上書き保存をしてブラウザーに切り替えて更新一見何も変わっていませんがマウスカーソルをボタンに重ねると文字色が白に背景色は紺色に変わりました。そして最後に active の状態も記述をするのでSublime text に戻ります。それでは active の内側にcolor#c00 そして ; 閉じとそして上書き保存をして最後、またブラウザーで確認をしてみます。一度更新をしてから一見何も変わってないですけど、マウスをクリックしっ放しにしてみましょう。クリックしっ放しにしてる時だけ色が変わります。 この様にクリックしっ放しの時の状態これが active ということになります。あまり使う機会はないのですがこれを使うことでボタンを押した感というのを伝えることができることもありますのでこの4種のリンクの状態を、しっかりコントロールできるようになりましょう。このレッスンではリンクの装飾について学びました。

はじめてのHTML&CSS入門

Webデザインの基本はHTMLとCSSにあると言っても過言ではありません。ブラウザにそのページの論理構造を正しく伝えるためのHTMLと、そのページをいかに見せるかを設定するCSSの二本柱をきちんと理解する必要があります。このコースでは前半でHTMLとCSSの基本を学んだのち、後半ではCSSの実際の応用の仕方や各種ツールの使い方などについて学びます。

3時間35分 (38 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2014年03月26日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。