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

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

新規登録して質問してみよう
ただいま回答率
86.12%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

解決済

文字の表示位置を右側から左側に移動させたい

退会済みユーザー

退会済みユーザー

総合スコア0

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

1回答

0リアクション

0クリップ

91閲覧

投稿2019/07/17 11:47

1.作成したのは以下のものですが、スライドショーが現在<li></li>で囲ったImage 01から06まであり、それぞれにタイトルと小見出しをつけたいと考えています(1枚目だけrogo表示)。
レスポンシブ使用にしたいため、画面を小さくした時には全てのページの文字は現在のとおり中央に配置したいと考えていますが、PC使用の際には現在のように右側に表示したい時とそうではない場合があり、2、4、5ページは左側に移動させたいと考えていますが、どうしても右寄りになってしまい左側への設定ができません。divの中であれば設定ができると思うのですが、aやpは移動ができてもh1やh2が移動できません。

2.6枚目だけ、ほかのページと見え方が違います。ボタンのマウスオーバーが6ページだけ利いている、aにラインが引かれてしまいマウスオーバーすると文字がチラチラします。htmlの記述は同じなのに何故仕様が違ってしまうのかが良くわかりません。

上記2点の問題を解決したいのですが、ご助力頂けませんでしょうか。

html

<header class="top"> <ul class="slideshow"> <li> <span>Image 01</span> <div class="rogo"> <img src="img/rogo.svg"> </div> </li> <li> <span>Image 02</span> <div class="container-fluid"> <div class="row"> <div class="col-md-6 col-md-offset-3 slider-text"> <div class="slider-text-inner"> <h2 class="key_title">AAAAAAAAA</h2> <a class="">bbbbbbbbbbbbbb</a> <p><a href="#" class="btn btn-primary btn-outline">read more</a></p> </div> </div> </div> </div> </li>           </ul> </header>

css

.top { width: 100%; min-height: 700px; height: 100%; min-height: 500px; position: relative; text-align: center; background-size: cover; padding: 100px 0; } .rogo img { width: 300px; height: 300px; position: absolute; top: 50%; left: 50%; margin: -100px 0 0 -100px; z-index: 999; } ul li { list-style: none; } .slideshow li span { width: 100vw; height: 100vh; position: absolute; top: 0px; left: 0px; color: transparent; background-size: cover; background-position: 50% 50%; background-repeat: no-repeat; opacity: 0; z-index: 0; animation: imageAnimation 36s linear infinite 0s; } .slider-text { display: table; min-height: 500px; } .slideshow li div { z-index: 1000; position: absolute; left: 0%; top: 35%; width: 100%; opacity: 0; color: #fff; animation: titleAnimation 36s linear infinite 0s; } .slider-text .textleft { text-align: left; } .intro .slider-text-inner h1 { z-index: 50; font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 50px; color: #fff; font-weight: bold; line-height: 1.2; text-align: center; } .intro .slider-text-inner h2 { z-index: 50; font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 50px; color: #fff; font-weight: bold; line-height: 1.2; text-align: center; } .slideshow li:nth-child(1) span{ background-image : url(../img/01.jpg); } .slideshow li:nth-child(2) span{ background-image : url(../img/02.jpg); -webkit-animation-delay: 6s; -moz-animation-delay: 6s; -o-animation-delay: 6s; -ms-animation-delay: 6s; animation-delay: 6s; } .slideshow li:nth-child(3) span{ background-image : url(../img/03.jpg); -webkit-animation-delay: 12s; -moz-animation-delay: 12s; -o-animation-delay: 12s; -ms-animation-delay: 12s; animation-delay: 12s; } .slideshow li:nth-child(4) span{ background-image: url(../img/04.jpg); -webkit-animation-delay: 18s; -moz-animation-delay: 18s; -o-animation-delay: 18s; -ms-animation-delay: 18s; animation-delay: 18s; } .slideshow li:nth-child(5) span{ background-image: url(../img/05.jpg); -webkit-animation-delay: 24s; -moz-animation-delay: 24s; -o-animation-delay: 24s; -ms-animation-delay: 24s; animation-delay: 24s; } .slideshow li:nth-child(6) span{ background-image: url(../img/06.jpg); -webkit-animation-delay: 30s; -moz-animation-delay: 30s; -o-animation-delay: 30s; -ms-animation-delay: 30s; animation-delay: 30s; } .slideshow li:nth-child(2) div { -webkit-animation-delay: 6s; -moz-animation-delay: 6s; -o-animation-delay: 6s; -ms-animation-delay: 6s; animation-delay: 6s; } .slideshow li:nth-child(3) div { -webkit-animation-delay: 12s; -moz-animation-delay: 12s; -o-animation-delay: 12s; -ms-animation-delay: 12s; animation-delay: 12s; } .slideshow li:nth-child(4) div { -webkit-animation-delay: 18s; -moz-animation-delay: 18s; -o-animation-delay: 18s; -ms-animation-delay: 18s; animation-delay: 18s; } .slideshow li:nth-child(5) div { -webkit-animation-delay: 24s; -moz-animation-delay: 24s; -o-animation-delay: 24s; -ms-animation-delay: 24s; animation-delay: 24s; } .slideshow li:nth-child(6) div { -webkit-animation-delay: 30s; -moz-animation-delay: 30s; -o-animation-delay: 30s; -ms-animation-delay: 30s; animation-delay: 30s; } @keyframes imageAnimation { 0% { opacity: 0; animation-timing-function: ease-in; } 4% { opacity: 1; animation-timing-function: ease-out; } 17% { opacity: 1 } 25% { opacity: 0 } 100% { opacity: 0 } } @keyframes titleAnimation { 0% { opacity: 0 } 4% { opacity: 1 } 17% { opacity: 1 } 19% { opacity: 0 } 100% { opacity: 0 } }

以下のような質問にはリアクションをつけましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

2019/07/19 12:55

こちらの質問が他のユーザーから「過去の低評価」という指摘を受けました。

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
86.12%

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

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

質問する

関連した質問

同じタグがついた質問を見る

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。