ウエブ制作デザイン覚え書き
DESIGN
NOTES
WordPressやCSS、調べたことをまとめておけば
スピードアップできるかな。
会社ネコと一緒に制作メモをマイペースでアップしています。
Recommend
-
-
2021/10/21
横並びのデザインをもっと自由に!フレックスボックスレイアウト
子要素のレイアウトを指定する ナビゲーションメニューやページネーション、並列のレイアウト等に欠かせないフレックスボックスレイアウトについてまとめてみました! 横の配置をデザインする「justify-c …
-
-
2021/01/24
縦書き 文章を縦書きにして右から左へ流す。 縦書きの基本 文章を縦書きにして右から左へ流す。 親{text-align:right; display: inline-block;} 子{writing …
-
-
2021/01/11
URLを出力するWordPressのテンプレートタグ phpファイルにテンプレートタグを使用することで、自動でURLを取得して表示してくれます。これでサイトURLが変わってもコードの修正をしなくても大 …
-
-
2021/01/11
phpで使える便利な条件分岐 「トップページだけに表示させたい」「一覧ページだけ変更したい」 そんな時便利なのが条件分岐です。 トップページとその他 <?php if ( is_home() | …
-
-
2019/08/09
CSS Transitionで手軽にアニメーションを取り入れたい
CSSのアニメーション、Transitionに変化を追加してオンマウスで滑らかに変化させたり、押す感を出せたり。これだけでちょっとインタラクティブなサイトになりますね!
latest
-
-
2022/10/31
カテゴリーごとにリンクの色を変えたい!属性セレクタを使ってCSSを設定しよう
classを付与しなくても属性値によってcssでスタイルをつけられる!お知らせのカテゴリーの色分けに便利! href属性、class属性、target属性、alt属性、src属性、type属性…これら …
-
-
2022/10/26
cssのanimationを使ったGIFアニメのようなSVGのパラパラ漫画を作りたい!
CSSで作るレスポンシブ対応のスプライトアニメーション やりたいこと ・JavaScriptは使わず、cssのanimationを使った簡単なアニメーション ・レスポンシブ対応 ・拡大しても画質が変わ …
-
-
2022/10/11
WordPressサイト本アップ後に確認したいこと 制作したサイトの本アップ時に確認していることリストです。 私はWordPressをインストールしたディレクトリのURLで制作して、お客様に校正してい …
-
-
2022/10/06
疑似要素を使ってアイコンをつけたい!アイコン画像を左右反転させたい!
疑似要素「:before」で要素の先頭に子要素のアイコンをつける 「:before」だと要素の先頭に子要素、「:after」だと要素の最後に子要素がつけられます。 テキストの前にアイコンをつける co …
-
-
2022/09/29
スクロールがひっかかる?反発して動かない、ページが読めない場合に対応したこと
スクロールできない! スマホでスクロールしようとして気が付きました。(PCでは分かりづらかった) スクロールしようとしても画面が動かない、下にもコンテンツがあるのに閲覧できないことがあったんです。 リ …
-
-
2022/07/28
【MW WP Form】フォーム入力が必要なダウンロードボタンを作りたい!
MW WP Formで作る資料ダウンロード用フォーム 先日、お客さまの要望で「名前などを入力してもらってから資料をダウンロードできるような仕組みにしてほしい」というのがありました。 登録すると資料がも …
-
-
2022/07/13
ロゴの輪郭が描かれていくものや、文字や線を書いているように表示されるアニメーションを見かけます。 今回はSVGとvivus.jsで作れるアニメーションの作り方について調べました! やりたいこと ・Il …
-
-
2022/06/23
メインビジュアルをブラウザ画面ぴったりになるように調整したい!
パソコン、スマホ、タブレットでも メインビジュアルが画面いっぱいになるように設定 パソコンだと存在感あるファーストビューでも、スマホだと横幅に合わせて小さくなってしまうことがありますよね。 画像の左右 …