• 【HTML】トレーニングドリル4 ボタンの位置を固定しよう

    難易度: ★★
    目標タイム:8分

    問題

    お問い合わせボタンを右上の位置に固定表示して、画面をスクロールしてもずっと表示されるようにしてみましょう。

    (1)右上にお問い合わせボタンを表示する

    【背景色】 #E34D77
    【文字色】白
    【角丸】6px
    【リンク先】https://geekgirl-labo.com/contact/

    (2)スクロールされているのがわかるように、以下のdivを4つ縦に並べる。

    【高さ】400px
    【背景色】#ecf4f5
    【下余白】20px

    完成イメージ

    申し込みなどに繋がりやすいボタンを、上部(または下部)に固定する実装は、頻出なので、さくっとできるようにしておきましょう!

    模範解答のURLは、GeekGirlCafeのSlackにて随時公開いたします。
    受講生の方はぜひご登録くださいね!

     

    前の問題:【HTML】トレーニングドリル3 ボタン風リンクを作成しよう

    次の問題:【HTML】トレーニングドリル5 テーブルの背景色を設定しよう

     

    The following two tabs change content below.
    柳田 亜沙美

    柳田 亜沙美

    GeekGirlLabo代表。 文学部卒⇒事務職⇒SE(会社員)⇒未経験からフリーランスのWeb屋として独立。その直後にリーマンショック到来、数年後には震災。不況を生き抜いた経験とWebのスキルを活かし、女性×リモートワークを応援したい!と思い立ち、GeekGirlLaboを立ち上げる。 好きな言語はPHP。好きなフレームワークはCakePHP。