zukucode
主にWEB関連の情報を技術メモとして発信しています。

カテゴリー「CSS」に関連するページ一覧 2ページ目

  • CSS flexboxであらゆる要素を横並びで表示する

    あらゆる要素を横並びで表示する方法を紹介します。一昔前までは要素を横並びにするにはflot: leftが使われていましたが、使い勝手悪く、今ではflexboxを使うことが多いです。以下のように、親要素...


  • CSS マウスオーバーしたときのみスタイルを適用する

    ある要素の上にマウスが置かれたとき(マウスオーバー)に指定したスタイルを適用する方法を紹介します。例えば以下のようにリンクボタンにマウスオーバーしたときに色を変更したいときなどに使用します。マウスオー...


  • CSS transitionでスタイルの変化をアニメーションする

    transitionを使って、スタイルの変化をアニメーションで表現する方法を紹介します。例えば以下のように、マウスオーバーすると擬似クラスが適用されて横幅が伸びる要素があるとします。このときの横幅の変...


  • CSS 要素が入り切らない場合にスクロールバーを表示する方法

    要素が入り切らずにはみ出してしまうときにスクロールバーを表示する方法を紹介します。以下のように、サイズを指定した親要素の中に、入り切らないテキストなどがあると、親要素をはみ出してしまいます。overf...


  • CSS 縦または横のみにスクロールバーを表示する方法

    要素が入り切らずにはみ出してしまうときにスクロールバーを表示する方法をCSS 要素が入り切らない場合にスクロールバーを表示する方法で紹介しました。overflowのスタイルは縦と横の両方のスクロールバ...


  • CSS テーブルのセルの中身を文字寄せする方法

    テーブルのセルの中身を文字寄せする方法を紹介します。文字寄せするスタイルはtext-alignやvertical-alignを使用しますが、テーブルのセルの場合でも同じように指定します。以下のようなテ...


  • CSS テーブルのセル内の文字列の折り返しの制御を行う方法

    テーブルのセル内の文字列の折り返しの制御を行う方法を紹介します。以下は、セルの幅を200pxに指定しているのですが、半角英数字の長い文字列があると、セルの幅を無視してセルが伸びてしまいます。テーブルの...


  • CSS リンクボタンの下線を消す方法

    リンクボタンの下線を消す方法を紹介します。以下は何もスタイルを指定していない状態のリンクボタンです。ブラウザによって多少は異なりますが、青色で下線の付いたテキストになります。文字に下線を付けるスタイル...


  • CSS ローディングアニメーションを作成する

    CSSのスタイルのみでローディングアニメーションを作成する方法を紹介します。以下のようなローディングアニメーションを作成します。適用しているスタイルを1つづつ解説します。まずはローディングアニメーショ...


  • CSS 上下にアニメーションする要素を作成する

    上下にアニメーションする要素を作成する方法を紹介します。以下のようなイメージです。上下に移動する要素をCSSのスタイルのみで作成します。move-yという名前でアニメーションを作成します。transl...