WordPress,WordPressカスタマイズ,CSSデザイン,CSS

色々な見出しデザインのCSSサンプル集です WordPressの子テーマなど上書きが必要な場合はHタグのborder等を初期化しておくと良いです h2.sample{ border:none; background:none; } が、環境 ...

CSS,CSSアニメーション

CSSでアニメーションを定義する時に使うanimationプロパティのメモです 個別プロパティの指定値と初期値 プロパティ 内容 指定可能な値 初期値 animation-name キーフレーム名 文字列 none animation-du ...

CSS,CSSアニメーション

小さくバウンドする文字 NARUHODO html <p class="item_text">NARUHODO</p> CSS .item_text{ animation: key1 .3s ease infinite alte ...

CSS,グリッドレイアウト

最近更新したコンテンツで利用中のフォームデザインです わかりやすくレイアウトを３つに別けてるのでちょっと長いかもです スマホから入力だと、どういうのが使いやすいのかまだまだつかめてないですが、、 See the Pen CSS form o ...

CSS,グリッドレイアウト

最近更新したコンテンツで利用中のフォームデザインです わかりやすくレイアウトを３つに別けてるのでちょっと長いかもです スマホから入力だと、どういうのが使いやすいのかまだまだつかめてないですが、、 See the Pen CSS form o ...

CSS,CSSデザイン

テキストエリアに限らずですがスマホ表示用にフォームアイテムはスマホ端末表示用に横幅100％ぴったしで表示したい時がありますが、そのまま100％としてもだと微妙にハミ出てしまいます ハミ出していると表示がずれてしまい、特にスマートフォンでの操 ...

未分類CSS,CSSアニメーション

CSSで要素の拡大縮小アニメーションを実装します 回転させる要素、今回は簡単な正方形をCSSで描きます .square{ width: 100px; height: 100px; 　background:red; } アニメーション時間をt ...

CSS,CSSアニメーション

CSSで要素の奥行回転アニメーションを実装します 回転させる要素、今回は簡単な正方形をCSSで描きます .square{ width: 100px; height: 100px; 　background:red; } アニメーション時間をt ...

CSS,CSSアニメーション

CSSで要素の奥行回転アニメーションを実装します 回転させる要素、今回は簡単な円をCSSで描きます .circle{ width: 100px; height: 100px; border-radius: 50%; border: soli ...

CSSデザイン,CSS

Google Code Prettifyやプラグインでシンタックスハイライトをせずとも<pre>と<code>のCSSだけで見やすいCSSに出来ればちょっとでもページを軽くできていいですよね font-family指 ...

CSS,PHP,WEBサイト高速化

gooleのサイトテスト「PageSpeed Insights」にて最適化項目となる「「スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する」」の対策として簡単なCSSファイルのインライ ...

CSS,JavaScript,WEBサイト高速化

Googleのスピードテストで出てくる「スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する」という最適化項目 余談：ん、「PageSpeed Tools」ちょっと変わったみたいですね ...

CSS,グリッドレイアウト

サイドバーコンテンツの導入をしやすいように縦に分割した２からむのグリッドレイアウト 画面サイズにあわせてレスポンシブで1カラムに変更してます html <div id ="container"> <div id ="hea ...

CSS,グリッドレイアウト

グリッドレイアウトCSSでヘッダー下に置く感じの横並びメニューを組んでみました 普通のリストで良いのでHTML構造は単純に、リストタグではありませんが、、 <div id ="menus"> <a class="item" ...

CSS,CSSデザイン

checkboxのオンオフでアイコン色をCSSで切り替えているだけです 電源のアイコンマークにはgoogleのmaterial iconを利用しています See the Pen new pen by yochans (@yochans) o ...

CSS,グリッドレイアウト

Microsoft edgeがWindows 10 Fall Creators Updateからベンダープレフィックスなしのグリッドレイアウトに対応しましたね edge用に記述するベンダープレフィックスがきつすぎたのと、そもそもグリッドレイ ...

CSS,CSSアニメーション

ひとつの要素に2つのキーフレームの定義するのにメモ animation:で定義を2つ書くと上書きになってしまいますが、ひとつの要素に複数のアニメーションキーフレームを定義するのはカンマ区切りで良いのですね .sample{ animatio ...

CSS,CSSデザイン

CSSで指定した要素のサイズから背景画像をはみ出さない様にする background-sizeを指定する contain：縦横比保持、背景領域に収まる最大サイズになるように背景画像を拡大縮小 cover：縦横比保持、領域を完全に覆う最小サイ ...

CSS,CSSデザイン

filterプロパティ、画像もだけどCSS要素にも便利だったりで結構使うことありますよね 他のプロパティと合わせる事で一枚のアップデード画像・CSSだけで、かなり自由度のあるWEBデザインが可能となります drop-shadowで影をつける ...