CSSで要素の横並びを実現する手法の1つとして、「display:inline-block;」を使う方法があります。 例えば、以下のようなHTMLがあったとします。 CSS側は以下のように指定すれば、簡単にリストを横並び…
display:inline-block;でできた隙間(余白)をなくす3つの方法
CSSアニメーションで要素が一瞬伸縮したりちらつく場合の対処法
transitionやtransformでCSSアニメーションを要素にかけた時に、要素の幅が一瞬だけ伸縮してしまったり、ちらついてしまう場合があります。私もよく以下のようなCSSを指定することがあるのですが、アニメーショ…
WordPressのカスタムメニューで開いているページのみ装飾を変更する方法(カレント表示)
WordPressのカスタムメニューで、開いているページのナビゲーションだけ装飾を変更する方法をご紹介いたします。いわゆる”カレント表示”というやつです。 当ブログでいうと、例えばトップページを開…
様々なグラデーションがまとめられていて、CSSをコピーしたりPNG画像をダウンロードできる「WebGradients」
WebGradientsは、様々なグラデーションがまとめられているサイトです。気に入ったグラデーションがあったら、グラデーションを表現するためのCSSをコピーしたり、PNG画像をダウンロードすることができます。 WebG…
様々なフォームデザインとサンプルコードがまとめられている「77 CSS Forms」
77 CSS Formsは、様々なフォームのデザインとそのデザインを実現するためのサンプルコードがまとめられているサイトです。 各フォームのデモを確認したり、HTMLとCSSのコードセットをダウンロードすることも可能です…
コピペで簡単にアニメーション付きのボタンを実装できる「Bttn.css」
Bttn.cssは、コピペで簡単にアニメーション付きのボタンが実装できるスタイルシートです。 各ボタンのデモは、デモサイトにてご確認いただけます。 Bttn.cssの使い方 ファイルのダウンロードとスタイルシートの読み込…
Flexboxを使ったレイアウトが直感的に作成できるWEBサービス「Flexible Boxes」
Flexible Boxesは、Flexboxを使ったレイアウトを作成することができるWEBサービスです。 プレビューで視覚的に確認しながら、レイアウトを作成することができます。 Flexible Boxesの使い方 F…
CSSのみで作成されたローダーを簡単に実装することができる「CSS Loader」
CSS Loaderは、クラスを追加するだけでCSSのみで作られたローダーを実装することができるライブラリです。 デモはこちらのページで確認することができます。 CSS Loaderの使い方 GitHubからファイルをダ…
CSSのみで作られたアイコンをコピペで利用できる「CSS ICON」
CSS ICONは、CSSのみで作られたアイコンを集めたライブラリです。アイコンを選択するとHTMLとCSSが表示され、コピペするだけでサイトに実装することができます。 CSS ICONの使い方 CSS ICONにアクセ…
クラスを追加するだけで写真にフィルタをかけられるCSSライブラリ「CSSCO」
CSSCOは、クラスを追加するだけで写真にフィルタをかけることができるCSSライブラリです。Photoshopなどのソフトを使わなくても、CSSを読み込んでクラスを追加するだけで写真にフィルタをかけることができます。 フ…