ウエブ制作デザイン覚え書き

DESIGN
NOTES

WordPressやCSS、調べたことをまとめておけば
スピードアップできるかな。
会社ネコと一緒に制作メモをマイペースでアップしています。

Recommend

横並びのデザインをもっと自由に!フレックスボックスレイアウト

2021/10/21

横並びのデザインをもっと自由に!フレックスボックスレイアウト

子要素のレイアウトを指定する ナビゲーションメニューやページネーション、並列のレイアウト等に欠かせないフレックスボックスレイアウトについてまとめてみました! 横の配置をデザインする「justify-c …

CSSで縦書き

2021/01/24

CSSで縦書き

縦書き 文章を縦書きにして右から左へ流す。 縦書きの基本 文章を縦書きにして右から左へ流す。 親{text-align:right; display: inline-block;} 子{writing …

よく使うWordPressテンプレートタグ

2021/01/11

よく使うWordPressテンプレートタグ

URLを出力するWordPressのテンプレートタグ phpファイルにテンプレートタグを使用することで、自動でURLを取得して表示してくれます。これでサイトURLが変わってもコードの修正をしなくても大 …

特定のページだけに表示させたい! よく使う条件分岐

2021/01/11

特定のページだけに表示させたい! よく使う条件分岐

phpで使える便利な条件分岐 「トップページだけに表示させたい」「一覧ページだけ変更したい」 そんな時便利なのが条件分岐です。 トップページとその他 <?php if ( is_home() | …

テキストに縁や影をつける

2020/05/28

テキストに縁や影をつける

cssでテキストに縁や影をつけます。

CSS Transitionで手軽にアニメーションを取り入れたい

2019/08/09

CSS Transitionで手軽にアニメーションを取り入れたい

CSSのアニメーション、Transitionに変化を追加してオンマウスで滑らかに変化させたり、押す感を出せたり。これだけでちょっとインタラクティブなサイトになりますね!

latest

カテゴリーごとにリンクの色を変えたい!属性セレクタを使ってCSSを設定しよう

2022/10/31

カテゴリーごとにリンクの色を変えたい!属性セレクタを使ってCSSを設定しよう

classを付与しなくても属性値によってcssでスタイルをつけられる!お知らせのカテゴリーの色分けに便利! href属性、class属性、target属性、alt属性、src属性、type属性…これら …

cssのanimationを使ったGIFアニメのようなSVGのパラパラ漫画を作りたい!

2022/10/26

cssのanimationを使ったGIFアニメのようなSVGのパラパラ漫画を作りたい!

CSSで作るレスポンシブ対応のスプライトアニメーション やりたいこと ・JavaScriptは使わず、cssのanimationを使った簡単なアニメーション ・レスポンシブ対応 ・拡大しても画質が変わ …

WordPressサイト公開後のチェックリスト10項目

2022/10/11

WordPressサイト公開後のチェックリスト10項目

WordPressサイト本アップ後に確認したいこと 制作したサイトの本アップ時に確認していることリストです。 私はWordPressをインストールしたディレクトリのURLで制作して、お客様に校正してい …

疑似要素を使ってアイコンをつけたい!アイコン画像を左右反転させたい!

2022/10/06

疑似要素を使ってアイコンをつけたい!アイコン画像を左右反転させたい!

疑似要素「:before」で要素の先頭に子要素のアイコンをつける 「:before」だと要素の先頭に子要素、「:after」だと要素の最後に子要素がつけられます。 テキストの前にアイコンをつける co …

スクロールがひっかかる?反発して動かない、ページが読めない場合に対応したこと

2022/09/29

スクロールがひっかかる?反発して動かない、ページが読めない場合に対応したこと

スクロールできない! スマホでスクロールしようとして気が付きました。(PCでは分かりづらかった) スクロールしようとしても画面が動かない、下にもコンテンツがあるのに閲覧できないことがあったんです。 リ …

【MW WP Form】フォーム入力が必要なダウンロードボタンを作りたい!

2022/07/28

【MW WP Form】フォーム入力が必要なダウンロードボタンを作りたい!

MW WP Formで作る資料ダウンロード用フォーム 先日、お客さまの要望で「名前などを入力してもらってから資料をダウンロードできるような仕組みにしてほしい」というのがありました。 登録すると資料がも …

vivus.jsを使って文字のアニメーションを作りたい!

2022/07/13

vivus.jsを使って文字のアニメーションを作りたい!

ロゴの輪郭が描かれていくものや、文字や線を書いているように表示されるアニメーションを見かけます。 今回はSVGとvivus.jsで作れるアニメーションの作り方について調べました! やりたいこと ・Il …

メインビジュアルをブラウザ画面ぴったりになるように調整したい!

2022/06/23

メインビジュアルをブラウザ画面ぴったりになるように調整したい!

パソコン、スマホ、タブレットでも メインビジュアルが画面いっぱいになるように設定 パソコンだと存在感あるファーストビューでも、スマホだと横幅に合わせて小さくなってしまうことがありますよね。 画像の左右 …