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

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

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

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

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

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

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

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

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

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

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

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

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

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

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