セカヤサブログ世界で一番初心者に優しいWeb制作のメディア。HTML/CSS/JavaScript、WordPress、Web制作の考え方を解説します。コピー2019.06.04こんにちは。今回はHTMLにおいて意外と厄介な「画像の扱い方」について説明していきます。比率維持した状態でbackground-imageを使うまとめ比率維持した状態でimgタグを使うまずはimgタグです。imgタグは基本的には画像の元のサイズ/比率のまま出力されます。これを調整する場合、親要素の縦か横に合わせることになります。合わせる基準が縦なのか横なのかによって指定を変えます。ヘッダーのロゴは縦幅に、記事のアイキャッチ画像は横に合わせることが多いです。横幅に合わせて画像が伸び縮みするまた要素自体はインラインなので配置に難があります。block;にしてから使うようにしています。auto;}上記のコードで以下のような挙動です。100%;}上記のコードで以下のような挙動です(便宜上heightを100vhにしています)。(gif画像)このような指定をすれば比率を崩さず画像を扱えます。比率維持した状態でbackground-imageを使うさて、background-imageで比率を維持したい場合です。この場合はdivなどのimgタグでないものを比率維持する必要があります。比率維持したdivを作るには、padding-topを使います。padding-topを%指定する場合、なんと基準が親要素のwidthなんです。16:9のdivを作りたいときは以下のように指定します。pink;}この指定で、以下の挙動です。(gif画像)これで比率を維持したdivが出来ました。理想は画像の比率と全く同じ比率のdivを作ることですが、動的に画像を入れる場合は必ずしもそうなりません。最低限綺麗に見えるように指定します。no-repeat;}これで比率を維持してbackground-imageを使うことが出来ました。まとめいかがでしたでしょうか。画像の扱いに困ったら、まずはこの方法を試してみてください。fixed;がスマホ(iOSのSafari)で効かない問題を完全に解決する【CSSのみ】こんにちは。fixedがスマホ、特にiOSのSafariで動かない問題を回避するための方法を書いていきます。Grid編)みなさんこんにちは。先日、widthの基本について徹底的に解説しました。gridなどと組み合わさった場合について解説していこうと思います。type=”date”で、どこをクリックしてもカレンダーが表示されるようにする。今回はinputタグについてです。最近仕事で出くわしたので紹介します。(ブラウザによっては動作しない可能性があります。grid;を使ってレスポンシブ時に要素の順番が変わるレイアウトを攻略するこんにちは。今回は、今までは再現するのに手間のかかった「レスポンシブで要素の順番が変わるレイアウト」をgridを使って上手く攻略していこうという内容です。grid自体の解説はあまり詳しく行わないので、以下の記事を参考にしてください。「レス...2022.09.30HTML/CSSを学ぶHTML/CSSを学ぶ【徹底解説】CSSでチェックボックス/ラジオボタンをカスタマイズする方法を超絶優しく解説するはい、今回はHTML/CSSの中でも比較的高難易度な、チェックボックスやラジオボタンのカスタマイズについてです。高難易度でありながら実務においては頻出です。gridを使って要素を重ねるこんにちは。gridを使って要素を重ねる方法について考えていこうと思います。ブログなどの記事一覧でよく見るカードの形です。左上のタグが画像に重なっています。コメントをキャンセルメールアドレスが公開されることはありません。※サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。秀樹フリーランス8年目|「世界一初心者に優しい」→セカヤサ。初心者が5年後も10年後も仕事を奪われない人になるための発信中。最新情報まとめWeb制作役立ちツールホーム検索トップサイドバータイトルとURLをコピーしました。