はてなブックマーク

CSSでflexboxがよく利用されるようになって、横並びレイアウトの要素同士の高さをそろえるのがとても簡単になりました。そうなってくると今度は中身の位置もそろえたくなる場合はないでしょうか？ 今回は横並びレイアウトの中身の一番下のボタンの位置を合わせるCSSの方法をご紹介します。ちなみに今回はボタンと仮定してご紹介しますが、もちろん一番下にくるものはボタン以外もものでも問題ありません。 目標のデザイン このように画像→テキスト→ボタンという順番のレイアウトはよくありますよね。でも文章の長さは内容によって異なることがほとんどです。文章の長さをそろえられれば一番良いですが、そんなに都合のよいケースは少ないですよね。 そうなると最後のボタンの位置は文章量によって決まってきます。 特に何もせずに普通にコーディングすれば、下記のような感じになってしまいませんか？ それを今回はデザイン通りに組んでみ

最近のWEBサイトのトレンドは動きのあるものが増えてきていますよね。 今回はその中でもよく見かける色付きのラインが横から現れて消えていったその下にテキストが現れるというアニメーションの作成方法をご紹介します。 今回の完成目標は上記のような感じです。本サンプルでは一回限りの動きですので、再度確認されたい場合は画面を更新してお確かめください。 HTML・CSSの書き方 HTMLサンプル HTMLのコードは下記になります。これはサンプルですので、class名などは実際に試される場合は任意のお名前でお作りください。 今回は通りすぎるというイメージから名前をpassingとして設定してみました。 <div class="passing move"> <div class="passing-box"> <div class="passing-bar"> <div class="passing-txt"