CSS3

CSS3

これは使える!お洒落なアニメーションが目を惹くCSSボタン77選

はじめに 色々なタイプのWEBサイトに使えそうな デザイン性の高いCSSボタンを集めてみました。 どれもHTML+CSSのみで実装されているので コピー&ペーストで 自分のサイトにすぐ導入できます。 1. スマー...
CSS3

超簡単!WordPress+cookieでお気に入り登録の機能を実装する方法

こんにちは、daimaです。 少し前に靴屋さんの商品サイトをWordpressで制作する機会があり、 その際に閲覧者が気に入った商品ページをお気に入り登録して 後からお気に入り一覧ページで見返せるようにしたいという要望があり、 これをCo...
CSS3

コピペで5分!javascriptで埋め込みmp4動画に再生/停止ボタンを追加するコード

はじめに こんにちは、daimaです。 本日はコピペするだけで同じページ内の全てのvideoタグで埋め込んだmp4動画に 再生/停止ボタンを追加することができる便利なjavascriptコードをご紹介します。 ちなみ...
CSS3

子ページをコンパクトに表示できるおしゃれなハンバーガーメニューのコードサンプル

こんにちは、daimaです。 本日は以前ご紹介した こちらのハンバーガーメニューにさらに 各親メニューに対する子ページへの開閉式リンクを追加した 機能追加版をご紹介します。 デモとソースコード DEMO ※メニ...
CSS3

【CSS】マウスオーバーで下からテキストポップアップさせるおしゃれなデザインの実装法

こんにちは、daimaです。 本日はマウスオーバーで画像の下からテキストレイヤーがポップアップする おしゃれなレイアウトの実装方法をご紹介します。 使用する技術はHTMLとCSSのみ! どんなサイトにもコピペで簡単に組み込み可能...
CSS3

コピペで5分!右から出てくるおしゃれなハンバーガーメニューの作り方【レスポンシブ対応】

こんにちは、daimaです。 本日は私も業務でよく使っている おしゃれでコンパクトな ハンバーガーメニューのサンプルコードを コピペしてすぐに使える形でご紹介したいと思います。 最終更新2021/01/30 : ・ナビ部分...
CSS3

border-style:dotted;の点の間隔やサイズを自由自在に変える方法

「dotted」の見た目を自由に変更したい…! 要素に対して 点線のラインを引くCSSの記述といえば 真っ先に思い浮かぶのがお馴染みの 「border-style:dotted」ですが、 このプロパティには「点同士の間隔を調整ができな...
CSS3

超簡単!CSSのみでアコーディオンメニュー

javascriptを使わない、 CSSのみで作る アコーディオンメニューの 実装方法をご紹介します。 DEMO 今回のアコーディオンには フォームタグの「checkbox」を利用します。 .fireが開閉...
CSS3

レスポンシブ対応!世界一簡単なハンバーガーメニューの実装法(コピペOK)

こんにちは、北陸のwebコーダーdaimaです。 本日は、ナビゲーションをコンパクトに纏められる おしゃれなハンバーガーメニューの実装方法をご紹介します。 まずは下記のデモページをご覧ください。 最終更新2020/07/04 :...
CSS3

CSS3のセレクタ、nth-child(n)とnth-of-type(n)の違い

はじめに CSSを書いていると、特定の要素を選択するセレクタを多用します。 今回は、そんなCSS3セレクタの中でも、特に利便性の高い、 nth-child(n)とnth-of-type(n)の使い方と、両者の違いを説明します。 nth...
タイトルとURLをコピーしました