質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

2243閲覧

position: absolute; で絶対で配置したテキストを画面のサイズに関わらず固定したい。

GenkiSugiyama

総合スコア86

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2019/09/02 10:23

編集2019/09/02 10:24

実現したいこと
ウィンドウの大きさに関わらず「SPECIAL CONTENTS」というコンテンツのタイトル要素を固定したい

現状の問題点
「SPECIAL CONTENT」というテキストの位置を要素を囲んでいる枠線2本の中心に来るように固定したい

↓iPhone 6/7/8サイズで見た理想の配置レイアウト(「SPECIAL CONTENT」のが上下左右中心に配置されている)
イメージ説明

↓iPhone5サイズでのレイアウト(少し上にずれてしまっている)
イメージ説明

↓iPadサイズでのレイアウト(下にずれすぎている)
イメージ説明

topの数値をcalcやvhで指定したりもしましたが、うまくいきませんでした。

スマホ、タブレットの画面サイズに関わらず理想のレイアウトのように固定するにはどうすれば良いかご教示いただけるととても助かります。

以下、該当箇所のコードになります。

HTML

1<div class="special_contents_wrap"> 2 <section class="special_contents"> 3 <div class="special_contents_title">SPECIAL CONTENTS</div> 4 <div class="outer_line"> 5 <div class="inner_line"> 6 <div class="swiper-container swiper2"> 7 <div class="special_contents_slider_wrap swiper-wrapper"> 8 <div class="sc sc01 swiper-slide"> 9 <div class="sc_title">テキストテキストテキストテキストテキストテキスト</div> 10 <div class="sc_img"> 11 <img src="image.jpg"> 12 </div> 13 <a href="#" class="cover" target="_blank"></a> 14 </div> 15 <div class="sc sc01 swiper-slide"> 16 <div class="sc_title">テキストテキストテキストテキストテキストテキスト</div> 17 <div class="sc_img"> 18 <img src="image.jpg"> 19 <a href="#" class="cover"></a> 20 </div> 21 </div> 22 </div> 23 </div> 24 </div> 25 </div> 26 </section> 27 <div class="swiper-pagination page2"></div> 28</div>

CSS

1.special_contents_wrap .special_contents { 2 position: relative; 3 height: auto; 4 padding: 30px 0 95px; 5 } 6 .special_contents_wrap .special_contents::before { 7 display: none; 8 } 9 .special_contents_wrap .special_contents .special_contents_title { 10 position: absolute; 11 top: calc(-2%); 12 left: 0; 13 right: 0; 14 margin: 0 auto; 15 width: 80vw; 16 text-align: center; 17 font-weight: 200; 18 letter-spacing: 1.5vw; 19 font-size: 5vw; 20 } 21 .special_contents_wrap .special_contents .outer_line { 22 width: 100%; 23 border: 2px solid #91d539; 24 padding: 5px; 25 } 26 .special_contents_wrap .special_contents .inner_line { 27 height: auto; 28 padding-bottom: 10px; 29 width: 100%; 30 border: 1px solid #91d539; 31 padding: 20px; 32 } 33 .special_contents_wrap .special_contents .swiper2 { 34 height: 100%; 35 width: 100%; 36 } 37 .special_contents_wrap .special_contents .inner_line .special_contents_slider_wrap .sc { 38 width: 100%; 39 height: 100%; 40 position: relative; 41 } 42 .special_contents_wrap .special_contents .inner_line .special_contents_slider_wrap .sc .sc_title { 43 position: static; 44 line-height: 3rem; 45 width: 100%; 46 font-size: 20px; 47 } 48 .special_contents_wrap .special_contents .inner_line .special_contents_slider_wrap .sc .sc_img { 49 position: static; 50 margin-top: 25px; 51 width: 100%; 52 background: #000; 53 } 54 .special_contents_wrap .special_contents .inner_line .special_contents_slider_wrap .sc .sc_img img { 55 max-width: 100%; 56 /* height: auto; */ 57 } 58 .special_contents_wrap .special_contents::after { 59 content: ''; 60 display: inline-block; 61 width: 100vw; 62 height: 40vw; 63 background-image: url(../images/top2/top_B.png); 64 background-size: contain; 65 background-repeat: no-repeat; 66 position: absolute; 67 left: 50%; 68 margin-left: -50vw; 69 bottom: 55px; 70 z-index: 10; 71 } 72 a.cover { 73 position: absolute; 74 width: 100%; 75 height: 100%; 76 top: 0; 77 left: 0; 78 text-indent: 100%; 79 white-space: nowrap; 80 overflow: hidden; 81 }

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yoshinavi

2019/09/02 22:30

可変単位と、固定単位の組み合わせでは、この場合、希望するレイアウトは出来ません。 フォントを可変にするのであれば、それに伴う枠線も可変にする必要があります。
guest

回答2

0

自己解決

HTML

1<div class="special_contents_wrap"> 2 <section class="special_contents"> 3 <div class="special_contents_title_wrap"> //このクラスを追加 4 <div class="special_contents_title">SPECIAL CONTENTS</div> 5 </div> //このクラスを追加 6 <div class="outer_line"> 7 <div class="inner_line"> 8 <div class="swiper-container swiper2"> 9 <div class="special_contents_slider_wrap swiper-wrapper"> 10 <div class="sc sc01 swiper-slide"> 11 <div class="sc_title">テキストテキストテキストテキストテキストテキスト</div> 12 <div class="sc_img"> 13 <img src="image.jpg"> 14 </div> 15 <a href="#" class="cover" target="_blank"></a> 16 </div> 17 <div class="sc sc01 swiper-slide"> 18 <div class="sc_title">テキストテキストテキストテキストテキストテキスト</div> 19 <div class="sc_img"> 20 <img src="image.jpg"> 21 <a href="#" class="cover"></a> 22 </div> 23 </div> 24 </div> 25 </div> 26 </div> 27 </div> 28 </section> 29 <div class="swiper-pagination page2"></div> 30</div>

CSS

1.spcial_contents_title_wrap { 2 height: 65px; 3 line-height: 65px; 4 position: absolute; 5 top: 0; 6 left: 0; 7 right: 0; 8 margin: 0 auto; 9} 10.special_contents_wrap .special_contents .special_contents_title { 11 position: static; 12 margin: 0 auto; 13 width: 80vw; 14 text-align: center; 15 font-weight: 200; 16 letter-spacing: 1.5vw; 17 font-size: 5vw; 18 padding-top: 0; 19 padding-bottom: 0; 20}

上記のようにタイトル要素を親要素を作りその親要素の高さをpxで固定、タイトル要素をその親要素内で中心に来るよう調整することで全体的にみても中央寄せを実現することができました。

ご回答、アドバイスいただいたみなさま、ご協力ありがとうございました。

投稿2019/09/03 04:38

GenkiSugiyama

総合スコア86

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

.special_contents_titleのfont-sizeをpxで固定し、 枠に合わせた上下の位置の調整はtop: 0で、 transform: translateY(-50%) という感じで translateY で調整してみてはいかがでしょうか。

投稿2019/09/02 10:56

Newbi

総合スコア163

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

GenkiSugiyama

2019/09/02 14:39

@Newbi 様 ご回答ありがとうございます。 記載いただいた方法を試してみましたが、画面サイズが変わると若干ずれてしまいました。。 また、font-sizeをpxで固定してしまうと画面サイズが小さくなるとタイトルが2行になってしまいデザイン的にいまいちになってしまうので、わがままですがfont-sizeは可変させる方法を探してみたいと思います。
Newbi

2019/09/02 14:57

media queryでスマホ以下の画面幅はfont-sizeを変更するというのは、できないでしょうか。 また.special_contents_titleのheightを固定し、display: flexとalign-items: centerで上下中央にした上でtranslateYで調整するのはいかがでしょう。 ちなみに画面幅が変動することでpxで調整しづらいという場合は、media queryとviewportをいい感じに指定すると良いと思います。 レスポンシブは人によってちょっとやり方が違うと思いますので、一概には言えませんが、お役に立てたら幸いです。 ご健闘を祈ってます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問