部分的に全画面表示にするには『calc』が便利

HTMLCSSフロントエンド

mori

公開日2020.11.30

更新日2020.12.01

main_img

文章の半分50%を全画面の半分50vwで引いて要素を広げます。

calc((50vw – 50%) * -1)
文章の外側部分のマージンを取得するため-1をかける。『calc(50% – 50vw)』でOK。

デモを見る

【HTML】

<div class="image"><img src="img/img01.jpg" alt="img01"></div>

【CSS】

.image {
	margin: 0 calc(50% - 50vw) 100px;
}
.contents .image img {
	display: block;
	width: 100%;
	height: auto;
}

このcalcでの計算対象は縦スクロールバーも含まれます。

なので、スクロールバーを常に表示される設定をしたPCで閲覧すると、その分追加して計算してしまいます。

対処法はhtmlとbodyに『overflow-x: hidden』を追記して下さい

【CSS】

html,body {
	overflow-x: hidden;
}

ファイルをダウンロード

参考サイト: 部分的に全画面表示にするには『calc』が便利。

導入事例: サイト名：タイタン・アート東京---制作事例
URL：https://tokyo.titan-art.com/works/suggoi_package/

【更新履歴】: 2020.11.31　記事を公開しました。

最新記事: タグマネージャーの設定（随時更新）

2021.11.09 WEB・APPSEO対策

mori; メルマガの開封・クリックをGoogleアナリティクスで測定する方法

2021.10.19 WEB・APPテクニックSEO対策

mori; 横スクロールサイトがかっこいいサイト

2021.10.18 WEB・APPテクニックアイデア

mori

カテゴリー: WEB・APP(94); アニメーション(7); テクニック(44); アイデア(17); SEO対策(11)

タグ: UX・UI デザインバックエンドフロントエンド ECサイトサーバー・ドメイン SNS ツール PHP SEO Webツール note JavaScript GoogleTagManager Git Facebook ショップサーブオウンドメディア CSS SearchConsole VScode Instagram お名前ドットコムカラーミー CMS HTML GoogleAnalytics XD プログラム言語 Twitter heteml EC-CUBE WordPress 操作方法アプリ画像関係 Python VBA データベース MySQL Ruby Shopify

メンバー: kitada(29); mori(23); nakano(7); nishimura(31); hatori(7); watanabe(2); titan-suzuki(0)

月別アーカイブ