ゆき

webデザイナーを目指し勉強中。 自分用の忘備録として記録しています。

ゆき

webデザイナーを目指し勉強中。 自分用の忘備録として記録しています。

【CSS】text-align

ブロック要素に使え、インライン要素には使えない。

ゆき

    • 【CSS】画像を正円で表示、ホバーすると画像を拡大させる

      プロフィール画像に使えそうな表現。 ホバー時の画像の拡大は、記事のリンクの画像に対しても使えそう。 ポイント ①画像を正円で表示 ・img要素をdivで囲み、width/heightに同じ数値を指定する。 ・画像を丸くするために、img要素にborder-radius: 50%を指定する。 ・画像を丸く囲む線をつけたいときは、img要素の親要素のdivに borderの値、border-radius: 50%を指定する。 (img要素自体に指定することもできるが、box-s

      ゆき

      • 【CSS】テキストを左揃えのまま中央寄せにする

        ①親要素の中に複数のp要素（ブロック要素） ポイント ・p要素の幅を指定し、margin: 0 autoで中央寄せする。 ②親要素の中に複数の要素が混在（ブロック要素、インライン要素） ポイント ・上記①同様、幅を指定して、margin: 0 autoで中央寄せする。 ・a要素はインライン要素のため、display: blockをしてブロック要素にする。 ・ul要素はpadding-left: 0を指定し、余計な余白をなくす。

        ゆき

        • 【CSS】ヘッダーで使える（ロゴ&ナビゲーション） | 要素を横並びにして縦方向は中央に揃える

          要素を横並びにして、なおかつ縦方向は中央で揃える方法。 ヘッダーでよく目にする、左にロゴ、右にナビゲーションという配置で使えそう。 ポイント ・縦方向中央に揃えるために、親要素にalign-items: center;

          ゆき

        【CSS】text-align

        ゆき

        • 【CSS】画像を正円で表示、ホバーすると画像を拡大させる

          ゆき

        • 【CSS】テキストを左揃えのまま中央寄せにする

          ゆき

        • 【CSS】ヘッダーで使える（ロゴ&ナビゲーション） | 要素を横並びにして縦方向は中央に揃える

          ゆき

          【CSS】a要素 | リンクのクリック範囲を親要素まで広げる

          要素全体をaのリンクのクイック範囲としたいときに使える方法。 ポイント ・親要素にposition: relative; a要素にposition: absolute; top: 0; left: 0; width: 100%; height: 100%; とすることで、aが親要素の範囲と重なるようにする。 （親要素にカーソルを載せると、ポインターとなることから

          ゆき

          【CSS】a要素 | リンクのクリック範囲を親要素まで広げる

          ゆき

          【CSS】ホバーエフェクト　要素をふわっと浮かせる

          要素にカーソルをのせると、ふわっと浮かんでるかのように見えるエフェクト。 ポイント ・hover時にtransform: translate(数値、数値);の指定をする。 ・hover時に広がったborder-boxを指定すると、より浮遊感が出る。

          ゆき

          【CSS】ホバーエフェクト　要素をふわっと浮かせる

          ゆき

          【CSS】ナビゲーションにぴったり | ホバーエフェクト 下からほわっと線がでてくる

          ナビゲーションに適用するとぴったりな、ホバーエフェクト。 li(a)にカーソルをのせると、下からほわっと線が出てくる。 ポイント ・aに:afterで疑似要素を作成する。*1 ・a:afterをopacity:0; とすることで、hover時に線がふわっと出てくる表現が可能となる。（hover時はopacity: 1; とする） ・a:afterの要素を非表示にしておくため、visibility: hidden;とする。（hover時はvisibility: visible

          ゆき

          【CSS】ナビゲーションにぴったり | ホバーエフェクト 下からほわっと線がでてくる

          ゆき

          【CSS】正円を表示させる

          border-radiusを使用して、正円を表示させる。 ポイント ・border-radiusを50%にする。 ・width/heightを同じ値にする。 ・中に文字を中央配置したい場合は、 横方向: text-align: center; 縦方向: line-height: width/heightと同じ値にする。

          ゆき

          【CSS】正円を表示させる

          ゆき

          【CSS】要素を2列で表示させる

          display: flexを使って、要素を2列で表示させる方法。

          ゆき

          【CSS】要素を2列で表示させる

          ゆき