すべてのブログから「#初心者Web制作」タグの検索結果

WebサイトをPCで作って、「よし、いい感じ！」と思ってスマホで確認してみたら……「あれ？なんか見づらい…」なんてことがあります。レスポンシブデザインでは、単純にPC版を小さくするのではなく、画面の大きさに合わせて見やすいレイアウトに変えることが大切です。今回は、スマホ表示で特に見直したいポイントをまとめます。① 3列・4列をそのまま表示しないPCでは横に3枚並んだカードも、スマホではかなり窮屈になります。例えば、PC → 3列タブレット → 2列スマホ → 1列というように、画面幅に合わせて変更すると見やすくなります。FlexboxやGridなどを使って、画面幅に合わせてレイアウトを変える方法は、コンテンツを見やすく保つためにも有効です。② 文字サイズもスマホで確認PCではちょうどよかった大きな見出しも、スマホでは何行にも折り返されることがあります。逆に小さくしすぎると読みにくくなってしまいます。**「画面に収まるか」だけではなく、「実際に読みやすいか」**をスマホで確認することが大切です。③ 余白をそのまま使わないPCで左右に80pxの余白を設定していても、スマホで同じ余白を使うと、コンテンツ部分がとても狭くなってしまいます。スマホでは、padding: 0 20px;など、画面に合わせて余白を調整します。④ 画像は画面からはみ出していない？画像に固定幅を指定していると、スマホで横にはみ出すことがあります。そんなときによく使うのが、img {  max-width: 100%;  height: auto;}画像だけでなく、文字やコンテンツが横にはみ出して横スクロールが発生

今日は、WordPressでお問い合わせフォームを作成する際によく使われる Contact Form 7 の設定確認と、フォームのデザイン調整を行いました。Contact Form 7のメール送信テストフォームを作成したら、まず大切なのが正常にメールが送信されるかの確認です。実際にフォームから送信を行い、お問い合わせ送信後に「ありがとうございました。メッセージは送信されました。」と表示されるか管理者宛にメールが届くか入力内容が正しく送信されているかを一つずつ確認しました。今回は最初メールが届かず焦りましたが、原因は迷惑メールフォルダに振り分けられていただけでした。フォームが正常に動作していても、送信先のメールサービスによっては迷惑メール扱いになることがあるため、受信できない場合は迷惑メールフォルダも確認することが大切だと学びました。Contact Form 7のCSS調整次に、お問い合わせフォームをスマートフォンでも使いやすくするため、CSSの調整を行いました。今回調整したポイントはこちらです。入力欄の高さを統一横幅を100%に設定し画面いっぱいに表示スマホでも文字が小さくならないようフォントサイズを調整日付入力欄（date）の高さを他の入力欄と揃えるボックスサイズを統一してレイアウト崩れを防止例えば日付入力欄には次のようなCSSを設定しました。.wpcf7 input[type="date"] {  width: 100%;  height: 56px;  min-height: 56px;  padding: 10px 16px;  font-size: 16px;  li