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

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

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

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

HTML5

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

デザイン

プログラミングでのデザインとは、プログラムの構成や、使用の信頼性・持続性・正確性・利便性の目標達成にはどうするのがベストなのか特定の選択を行うことです。

Q&A

解決済

2回答

1501閲覧

ボックスの真下から内容を続けたい

退会済みユーザー

退会済みユーザー

総合スコア0

CSS3

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

HTML5

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

デザイン

プログラミングでのデザインとは、プログラムの構成や、使用の信頼性・持続性・正確性・利便性の目標達成にはどうするのがベストなのか特定の選択を行うことです。

0グッド

0クリップ

投稿2019/08/16 06:05

###希望のデザインと問題点
HTML5のいろんなデザインをサイトから引っ張って試していて、そのボックス(プログラムは後述)をまず上から数ピクセル固定、左右からは真ん中のところに固定し、そのボックスからまた一定の間を置いて下に内容を、左右から真ん中のところからはじめたいのですが、そのボックスの後に内容を<p>で始めたら、サイドバーのように、そのボックスの右に来て、そのボックスと内容二つをセットとして考えたときの真ん中に来るようになりました。(つまりボックスがメインバー、内容がサイドバーのように位置している)。

こちらがそのプログラムです。

html

1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="utf-8"> 5 <title>title</title> 6 </head> 7 <style media="screen"> 8html, body { 9 height: 100%; 10} 11 12html { 13 background:#1c1c1c; 14} 15 16body { 17 display: flex; 18 justify-content: center; 19 20} 21 22.box { 23 width: 300px; 24 height: 300px; 25 border-radius: 150px; 26 box-shadow: 0 2px 30px rgba(black, .2); 27 background: lighten(#f0f4c3, 10%); 28 position: relative; 29 overflow: hidden; 30 transform: translate3d(0, 0, 0); 31} 32 33.wave { 34 opacity: .4; 35 position: absolute; 36 top: 5px; 37 left: 50%; 38 background: #0af; 39 width: 500px; 40 height: 500px; 41 margin-left: -250px; 42 margin-top: -250px; 43 transform-origin: 50% 48%; 44 border-radius: 43%; 45 animation: drift 3000ms infinite linear; 46} 47 48.wave.-three { 49 animation: drift 5000ms infinite linear; 50 background: linear-gradient(to bottom, #FE2E9A, #0af); 51} 52 53.wave.-two { 54 animation: drift 7000ms infinite linear; 55 opacity: .1; 56 background: linear-gradient(to bottom, yellow,#A9F5A9); 57} 58 59 60.title { 61 position: absolute; 62 width: 100%; 63 z-index: 1; 64 line-height: 300px; 65 text-align: center; 66 transform: translate3d(0, 0, 0); 67 color: white; 68 text-transform: uppercase; 69 font-family: 'Playfair Display', serif; 70 letter-spacing: .8em; 71 font-size: 24px; 72 text-indent: .5em; 73} 74@keyframes drift { 75 from { transform: rotate(0deg); } 76 from { transform: rotate(360deg); } 77} 78 </style> 79 <body> 80 81<div class='box'> 82 <div class='wave -one'></div> 83 <div class='wave -two'></div> 84 <div class='wave -three'></div> 85 <div class='title'>home</div> 86</div> 87 88<p class="btn6"> 89 <a href="#"> 90 to topaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa 91 </a> 92</p> 93 </body> 94</html>

###理想の構図

。             ボックス

左                                 右 
端                                 端 
。              内容
。              ...(他の内容が続く)

どのようなコードに直せば理想の構図のようになるでしょうか?

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

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

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

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

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

guest

回答2

0

ベストアンサー

でっかいdivでくくってみるとか・・・?

HTML

1<div class="test"> 2 <div class='box'> 3 <div class='wave -one'></div> 4 <div class='wave -two'></div> 5 <div class='wave -three'></div> 6 <div class='title'>home</div> 7 </div> 8 9 <p class="btn6"> 10 <a href="#"> 11 to 12 topaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa 13 </a> 14 </p> 15</div>

CSS

1p { 2 top:250px; 3 position:absolute; 4} 5 6.test { 7 position:relative; 8}

イメージ説明

投稿2019/08/16 06:23

azuapricot

総合スコア2341

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

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

0

display: flex;を削除してください。

投稿2019/08/16 06:21

kyoya0819

総合スコア10429

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問