CSS・デザイン– category –

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

値を動的に算出するための便利な関数 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>ここにテキストが入ります。ここにテキストが入ります。ここ...

閲覧ありがとうございます。 ページテーマ Google公式の方法でreCAPTCHAを非表示にする reCAPTCHAを導入できたけどロゴがボタンと被ってる・・・ 表示を消す方法あるのかな？ ロゴを消していいの？ そんな問題を解決します。 \ このサイトで利用しています...

閲覧ありがとうございます。 ページテーマ javascriptを使えるようにしよう！ Javascriptを使ってアニメーションのタイミングを変えたい！ Javascriptを使える環境を作りたい そんな問題解決につながれば嬉しいです。 \ このサイトで利用しています / おす...

閲覧ありがとうございます。 ページテーマ WordpressでURLを呼び出しているのに動かないを解消 ｊｓを使用したくてfunction.phpにコードを書いたのに動かない… そんな問題解決につながれば嬉しいです。 \ このサイトで利用しています / おすすめテーマ お...