コース: CSS 基本講座
今すぐ登録して、23,200件以上登録されている、業界エキスパート指導のコースを受講しましょう。
ボタンの静的スタイルを定める
このレッスンでは ボタンにする要素に基本的なスタイル、 動きのない 静的スタイルを定めたいと思います。 ボタンにしたいのは、このリンクです。 a要素ですね。 ボタンとかあるいはインプットの要素が ボタンの形にできるんですけれども そうでないもの、例えばこのa要素でも CSSで ボタンのスタイルにすることはできます。 リンクをボタンにしたいという時は これが便利ですね。 では、この a要素のスタイルを変えてみましょう。 これがHTMLドキュメントです。 a要素はdiv要素、 container の中にp要素があって さらにその子供として a要素が設定されています。 まだこのa要素に対する スタイルはありません。 このdiv要素、親要素ですね、 container に対しては幅が400ピクセルと いうことで設定されています。 ではこのa要素に対して 基本的な設定を加えていきましょう。 クラスがp要素ですね。 これがボタンになっていますから .button と。 その子供のa要素、スペースですね。 これでa要素に対する 設定ができますけれども まずはフォントスタイルを設定しましょう。 大きさは 30px として フォントファミリーは sans-serif にします。 そして display の設定です。 通常はp要素、あるいはその中のa要素は インラインで表示されるんですけれども ボタンにしたいので、 これは block のスタイルにします。 そして、そうなると幅が決められますから width で 200px と。 それからテキストの位置揃え、 これは text-align ということで 設定ができます。 ボタンですからやはり文字は center がいいですね。 そしてもうひとつぐらい 設定しましょうか。 background-color ですね。 これは lightseagreen というふうにして まだ先があるんですが、 とりあえずこれで確認しましょう。 ファイルを保存します。 このようになりました。 この大きさ、形、 背景色などはいいんですけれども リンクなのでデフォルトの設定では このようにアンダーラインが ついてしまいますね。 このアンダーラインは取って テキストカラーも設定しましょう。 ではさらにプロパティを加えて パディングを加えましょうね。…
エクササイズファイルを使って実践してみましょう。
インストラクターがコースで使用しているファイルはダウンロードできます。見て、聞いて、練習することで、理解度を深めることができます。
コースをダウンロードして学習しましょう。
ラーニングコースをダウンロードしてオフラインで視聴しましょう。ダウンロードしたコースはLinkedInラーニングのモバイルアプリ (iOSまたはAndroid) で視聴できます。