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

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

CSSCSSアニメーション

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

CSSCSSアニメーション

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

CSSグリッドレイアウト

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

CSSグリッドレイアウト

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

CSSCSSデザイン

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

CSSCSSアニメーション

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

CSSCSSアニメーション

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

CSSCSSアニメーション

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

CSSCSSデザイン

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

CSS, PHPWEBサイト高速化

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

CSS, JavaScriptWEBサイト高速化

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

CSSグリッドレイアウト

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

CSSグリッドレイアウト

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

CSSCSSデザイン

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

CSSグリッドレイアウト

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

CSSCSSアニメーション

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

CSSCSSデザイン

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

CSSCSSデザイン

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