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

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

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

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

HTML5

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

受付中

jS,CSSを使って、画像をFadeInさせながら、textも切り替えるようなサイトを作りたい

free_teku
free_teku

総合スコア82

CSS3

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

HTML5

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

1回答

-1評価

0クリップ

172閲覧

投稿2022/01/18 05:29

前提・実現したいこと

表題の通り、こちらのようなサイトを作成しようと考えています。

なお、今回はdemosite1のimgのみの大きさだけ調節させたいです。
画像は下記に記します
※frontでは、紫色で囲った画像をきちんと表示させたい。

全体の表示=(左のtextと右の画像をきちんと表示させたい)
front

イメージ図

発生している問題・エラーメッセージ

試したこと

上記のサイトを参考にして、手を動かしながら行っていましたが、どうもいうまくいきません。
より詳細に行ったことは
画像がわかりやすく、表示できるように縮小させながら表示させました。→×

・cont_text_imgやfrontのwidth などを調整させましたが、、きちんと表示されない。

該当のソースコード

HTML

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta content="IE=edge" http-equiv="X-UA-Compatible"> <meta content="width=device-width, initial-scale=1.0" name="viewport"> <title></title> <link href="./style.css" rel="stylesheet"> </head> <body> <div class="cont_principal"> <div class="cont_text_img"> <div class="cont_img_back"><img alt="" class='img_1' src="./img/works/demosite1.png" style="min-width: 20%;"> <img alt="" class='img_2' src="./img/works/works_demosite2.png"> <img alt="" class='img_3' src="./img/works/demosite3png.png"></div><!-- /.cont_img_back--> <div class="cont_text"> <h1>San Francisco</h1> <p>San Francisco, officially the City and County of San Francisco, is the cultural, commercial, and financial center of Northern California and the only consolidated city-county in California. San Francisco encompasses a land area of about 46.9 square miles (121 km2) on the northern end of the San Francisco Peninsula, which makes it the smallest county in the state.</p><button class="btn_read_m">READ MORE</button> <div class="cont_icon_like"> <p><i class="material-icons">&#xE87E;</i><span>288</span></p> </div><!-- /.cont_icon_like --> </div><!-- /.cont_text --> <div class="cont_img_front"> <img alt="" class='img_1' src="./img/works/demosite1_expansion2.png" style="min-width: 20%;"> <img alt="" class='img_2' src="./img/works/works_demosite2.png"> <img alt="" class='img_3' src="./img/works/demosite3png.png"> <div class="cont_icons_img_from"> <ul> <!-- <li><i class="material-icons">&#xE8AE;</i> </li> --> <!-- <li> <i class="material-icons">&#xE55B;</i> </li> --> <!-- <li><i class="material-icons">&#xE410;</i></li> --> </ul> </div><!-- /.cont_icons_img_from --> </div><!-- /.cont_img_front --> </div><!-- /.cont_text_img --> </div><!-- /.cont_principal--> <script src="./js/jquery-3.6.0.min.js"> </script> <script src="./js/script.js"> </script> </body> </html>

CSS

@charset "utf-8"; /*========= レイアウトのためのCSS ===============*/ * { margin:0px auto; padding:0px; text-align: center; } .cont_principal { position:absolute; height: 100%; width: 100%; /* background-color: #90A4AE; */ } .cont_text_img { position: relative; top:50%; margin-top:-175px; width: 700px; height: 350px;; background-color:#fff; box-shadow:0px 10px 25px -5px rgba(0,0,0,0.25); } .cont_text { position:relative; float: left; width: 50%; height:80%; margin:5%; text-align:justify; } .cont_text_img_act > .cont_text > * { opacity:1; left: 0px; } .cont_text > h1 { font-family: 'Open Sans', sans-serif; font-weight: 100; margin-bottom:20px; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; -webkit-transition-delay: 1.2s; /* Safari */ transition-delay: 1.2s; opacity:0; position: relative; left: -50px; } .cont_text > p { font-family: 'Open Sans', sans-serif; font-size:14px; margin-bottom:20px; font-weight: 300; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; -webkit-transition-delay: 1.4s; /* Safari */ transition-delay: 1.4s; opacity:0; position: relative; left: -50px; } .cont_icon_like { position:relative; float:right; width:70px; margin-top:10px; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; -webkit-transition-delay: 1.5s; /* Safari */ transition-delay: 1.5s; opacity:0; position: relative; left: -50px; } .cont_icon_like > p > i { color:#999; cursor:pointer; } .cont_icon_like > p > span { font-family: 'Open Sans'; position: relative; top:-5px; left:5px; color:#666; } .btn_read_m { position:relative; float: left; padding:10px; border:none; background-color:#495FE9; color:#fff; margin:10px 0; box-shadow:1px 2px 10px 0px rgba(0,0,0,0.3); font-size:11px; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; -webkit-transition-delay: 1.6s; /* Safari */ transition-delay: 1.6s; opacity:0; position: relative; left: -50px; } .cont_img_front { position:relative; float: left; width: 35%; background: #eee; height:100%; margin-right:5%; overflow:hidden; top:0; } .cont_img_front_active { padding: 25px 0px; top:-25px; box-shadow:1px 1px 20px 0px rgba(0,0,0,0.3); -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; } .cont_img_front > img { top:-25px; position:relative; left:-420px; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; } .cont_img_back { position:absolute; width: 100%; height: 100%; overflow:hidden; } .cont_img_back > img { top:-25px; position:relative; -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */ filter: grayscale(100%); opacity:0.2; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; } .img_2{ opacity:0; display:none; } .img_d_n { display:none; } .img_d_b { display:block; -webkit-animation-name: escala_imagen; /* Chrome, Safari, Opera */ -webkit-animation-duration: 10s; /* Chrome, Safari, Opera */ animation-name: escala_imagen; animation-duration: 10s; } .cont_img_front:hover >.cont_icons_img_from { bottom:0px; } .cont_icons_img_from { position:absolute; bottom:-100px; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f24f5a+0,ffffff+78&1+0,0+78 */ background: -moz-linear-gradient(bottom, rgba(242,79,90,0.5) 0%, rgba(255,255,255,0) 85%); /* FF3.6-15 */ background: -webkit-linear-gradient(bottom, rgba(242,79,90,0.5) 0%,rgba(255,255,255,0) 85%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(bottom, rgba(242,79,90,0.5) 0%,rgba(255,255,255,0) 85%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f24f5a', endColorstr='#00ffffff',GradientType=0 ); /* IE6-9 */ height: 70px; width:100%; } .cont_icons_img_from > ul > li { position:relative; float:left; width:33.33%; } .cont_icons_img_from > ul { margin-top:20px; } .cont_icons_img_from > ul > li { list-style:none; } .cont_icons_img_from > ul > li > i { margin-left:20px; text-align:center; font-size:32px; color:#fff; cursor:pointer; } @-webkit-keyframes escala_imagen { from { transform: scale(1); } to { transform: scale(1.5); } } @-o-keyframes identifier { from { transform: scale(1); } to { transform: scale(1.5); } } transform: scale(1); } to { -webkit-transform: scale(1.5); -moz-transform: scale(1.5); -ms-transform: scale(1.5); -o-transform: scale(1.5); transform: scale(1.5); } } @keyframes identifier { from { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } to { -webkit-transform: scale(1.5); -moz-transform: scale(1.5); -ms-transform: scale(1.5); -o-transform: scale(1.5); transform: scale(1.5); } }

JS

/* ------------------------------------- ------------------------------------- The image changue every 10 Secons ------------------------------------- ------------------------------------- */ var Cont = 0; function inic(){ if(Cont % 2 != 0){ document.querySelector('.img_1').style.opacity = '0'; document.querySelectorAll('.img_1')[1].style.opacity = '0'; setTimeout(function (){ document.querySelector('.img_1').className = 'img_1 img_d_n'; document.querySelectorAll('.img_1')[1].className = 'img_1 img_d_n'; document.querySelector('.img_2').className = 'img_2 img_d_b'; document.querySelectorAll('.img_2')[1].className = 'img_2 img_d_b'; },500); setTimeout(function (){ document.querySelector('.img_2').style.opacity = '0.2'; document.querySelectorAll('.img_2')[1].style.opacity = '1'; },600); Cont++; }else{ document.querySelector('.img_2').style.opacity = '0'; document.querySelectorAll('.img_2')[1].style.opacity = '0'; setTimeout(function (){ document.querySelector('.img_2').className = 'img_2 img_d_n'; document.querySelectorAll('.img_2')[1].className = 'img_2 img_d_n'; document.querySelector('.img_1').className = 'img_1 img_d_b'; document.querySelectorAll('.img_1')[1].className = 'img_1 img_d_b'; },500); setTimeout(function (){ document.querySelector('.img_1').style.opacity = '0.2'; document.querySelectorAll('.img_1')[1].style.opacity = '1'; },600); Cont++; } } window.onload = function (){ inic(); document.querySelector('.cont_text_img').className = "cont_text_img cont_text_img_act"; setTimeout(function(){ document.querySelector('.cont_img_frond').className = "cont_img_frond cont_img_frond_active"; },1700); } setInterval(function(){ inic() }, 10000);

補足情報(FW/ツールのバージョンなど)

良い質問の評価を上げる

以下のような質問は評価を上げましょう

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

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

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

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

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

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

CSS3

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

HTML5

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。