カスタマイズ– category –

WordPressのお問い合わせフォームプラグイン「Contact Form 7」を使っていると、「パソコンでは綺麗に表示されているのに、スマホで見ると送信ボタンが左にズレている」という現象に悩まされることがあります。 text-align: center; を指定しても変わらな...

こんな悩みありませんか？ 自分のサイトをGoogleで検索したら、トップページの下にいくつか別のページが表示されている！ でも、表示されているのが『会社概要』じゃなくて『プライバシーポリシー』や『サンプルページ』…これってどうやって直すの？ 企業...

はじめに 今回の記事で対象になるThemify Shoppeはお客様の使用しているテーマで私も初めて触らせていただくテーマです。あまり使用している方はいないかと思いますが、「テーマ特有のコードが邪魔をしてうまくいかない」という パターンは他にも共通する...

値を動的に算出するための便利な関数 min() 画面幅に応じて動的に変化する値に対してあらかじめ最大値を設定できます /*親要素の幅５０％かつ６００px以内で伸縮*/ width: min(50%,600px); /*以下と同じことです*/ width: 50%; max-width: 600px; max-marg...

ｐｘ（ピクセル） スクリーンの１ピクセルの長さを１とした単位 固定サイズで表示させたい箇所全般に広く使われる 用途 固定したサイズで表示したいとき 文字サイズに使用した場合、ブラウザの文字サイズ変更機能が効かなくなる <div class="box_p...

display: flex;の要素の中央寄せ flexコンテナの要素を中央寄せするときalign-itemsとjustify-contentを使って中央寄せする方法があります。 <div class="xxx"> <p>テキスト</p> </div> .xxx{ display: flex; align-ite...

各名称 .selector{ property: value; } .セレクタ｛ プロパティ：値； ｝

制作概要と技術 既存サイトの実績一覧タイトルの視認性向上が目的。シンプルな装飾ながら、汎用性の高い疑似要素 ::beforeを活用し、デグレード（既存機能の不具合）を徹底的に回避したCSS実装を行いました。 実装上の課題 タイトルに使われているclassが...

一番簡単なレスポンシブ 一段組みの可変レイアウト シンプルな１カラム シンプルな１カラムのボックスがブラウザ幅に合わせて伸縮します。 <div class="container-1"> <p>ここにテキストが入ります。ここにテキストが入ります。ここ...

このカテゴリーはコーディングに関するアウトプットを中心にまとめたカテゴリーになります。 学びに使用しているツール 「HTML＋CSS コーディングの強化書」 著：草野あけみ