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

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

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

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

HTML5

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

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

HTML

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

CSS

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

Q&A

解決済

1回答

1057閲覧

CSSでのレスポンシブに対応した、要素を動かす方法について

leaf.

総合スコア16

CSS3

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

HTML5

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

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

HTML

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

CSS

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

0グッド

1クリップ

投稿2018/12/23 13:09

実現したいこと

イメージ説明
画像のサイドバーの部分を動かしたいです。

やったこと

html

1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width,initial-scale=1.0,minium-scale=1.0,user-scalable=no"> 6 <meta name="description" content="テストテストテストテストテストテストテストテストテストテスト"> 7 <title>テスト</title> 8 <link rel="stylesheet" href="css/index.css"> 9 <link href="https://fonts.googleapis.com/css?family=Viga" rel="stylesheet"> 10 <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> 11 <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet"> 12 </head> 13 <body> 14 <!--ヘッダー--> 15 <header> 16 <p> 17 <a href="index.html">テスト</a> 18 </p> 19 </header> 20 21 <!--記事--> 22 <div class="all"> 23 <div class="main"> 24 <ul class="container"> 25 <li> 26 <img src="img/テスト.png"> 27 <time datetime="2018-12-21">2018年12月21日</time> 28 <dl> 29 <dt>テストテストテストテストテストテスト</dt> 30 </dl> 31 </li> 32 <li> 33 <img src="img/テスト.png"> 34 <time datetime="2018-12-21">2018年12月21日</time> 35 <dl> 36 <dt>テストテストテストテストテストテスト</dt> 37 </dl> 38 </li> 39 <li> 40 <img src="img/テスト.png"> 41 <time datetime="2018-12-21">2018年12月21日</time> 42 <dl> 43 <dt>テストテストテストテストテストテスト</dt> 44 </dl> 45 </li> 46 <li> 47 <img src="img/テスト.png"> 48 <time datetime="2018-12-21">2018年12月21日</time> 49 <dl> 50 <dt>テストテストテストテストテストテスト</dt> 51 </dl> 52 </li> 53 </ul> 54 </div> 55 <!-- サイドバー --> 56 <aside class="side"> 57 <h3>CATEGORY</h3> 58 <ul> 59 <li><a href="#">テストテスト</a></li> 60 <li><a href="#">テストテスト</a></li> 61 <li><a href="#">テストテスト</a></li> 62 </ul> 63 </aside> 64 </body> 65</html> 66

css

1/*PC閲覧用*/ 2body{ 3 margin: 0; 4 padding: 0; 5 background: rgb(234, 237, 242); 6} 7/*ヘッダー*/ 8header{ 9 background: skyblue; 10 width: 100%; 11 height: 50px; 12 display: flex; 13 align-items: center; 14 justify-content: center; 15} 16header p a{ 17 text-decoration: none; 18 color: white; 19 font-size: 190%; 20 font-family: 'Viga', sans-serif; 21} 22/*最新記事*/ 23.container{ 24 display: flex; 25 list-style: none; 26 padding: 0; 27 margin: 0 auto; 28 padding: 0; 29 flex-wrap: wrap; 30 justify-content: center; 31 width: auto; 32} 33.container img{ 34 width: 100%; 35 height: auto; 36 border-top-left-radius: 10px; 37 border-top-right-radius: 10px; 38} 39.container li{ 40 width: 15%; 41 margin: 1%; 42 box-sizing: border-box; 43 padding: 1px; 44 background: white; 45 border-radius: 10px; 46 opacity: 1; 47 transition: opacity 1s; 48} 49.container li:hover{ 50 opacity: 0.5; 51} 52.container li time{ 53 color: #666; 54 font-size: 13px; 55} 56/*float*/ 57.all{overflow: hidden;} 58.main{ 59 width: calc(100% - 500px); 60 float: left; 61} 62.side{ 63 float: right; 64 background: white; 65 width: 300px; 66 display: flex; 67 text-align: left; 68 flex-direction: column; 69} 70.side ul li{ 71 list-style: none; 72} 73.side ul li a{ 74 text-decoration: none; 75 list-style: none; 76 color: #333; 77 font-family: 'Roboto Condensed', sans-serif; 78 letter-spacing: 1px; 79 opacity: 1.0; 80 font-size: 15px; 81 transition: opacity 1s; 82} 83.side ul li a:hover{ 84 color: #333; 85 font-family: 'Roboto Condensed', sans-serif; 86 letter-spacing: 1px; 87 font-size: 17px; 88 opacity: 0.5; 89} 90.side h3{ 91 background-color: skyblue; 92 margin: 0; 93 padding: 20px; 94 color: white; 95 text-align: center; 96 font-family: 'Roboto', sans-serif; 97 letter-spacing: 2px; 98} 99/*レスポンシブ*/ 100@media screen and (min-width:0px) and (max-width:480px) { 101 header{ 102 background: skyblue; 103 width: 100%; 104 height: 100px; 105 display: flex; 106 align-items: center; 107 justify-content: center; 108 } 109 .container li{ 110 width: 80%; 111 margin: 1%; 112 box-sizing: border-box; 113 padding: 1px; 114 background: white; 115 border-radius: 10px; 116 opacity: 1; 117 transition: opacity 1s; 118 } 119 .container li dl dt{ 120 font-size: 90%; 121 } 122 .side ul li a{ 123 letter-spacing: 1px; 124 opacity: 1.0; 125 transition: opacity 1s; 126 font-size: 15px; 127 } 128 .side ul li a:hover{ 129 opacity: 0.5; 130 font-size: 17px; 131 letter-spacing: 1px; 132 } 133 .main, .side{ 134 float: none; 135 } 136 .main{width: auto;} 137 .side{ 138 width: calc(100% - 50px); 139 margin-left: auto; 140 margin-right: auto; 141 } 142 .all{ 143 display: flex; 144 flex-direction: column; 145 } 146} 147 148@media screen and (min-width:750px) and (max-width:1000px){ 149 header{ 150 background: skyblue; 151 width: 100%; 152 height: 150px; 153 display: flex; 154 align-items: center; 155 justify-content: center; 156 } 157 header p a{ 158 text-decoration: none; 159 color: white; 160 font-size: 300%; 161 font-family: 'Viga', sans-serif; 162 } 163 .container li{ 164 width: 40%; 165 margin: 1%; 166 box-sizing: border-box; 167 padding: 1px; 168 background: white; 169 border-radius: 10px; 170 opacity: 1; 171 transition: opacity 1s; 172 } 173 .container li dl dt{ 174 font-size: 140%; 175 } 176 .side h3{ 177 font-size: 30px; 178 padding: 10px; 179 } 180 .side ul li a{ 181 font-size: 20px; 182 letter-spacing: 1px; 183 opacity: 1.0; 184 transition: opacity 1s; 185 } 186 .side ul li a:hover{ 187 opacity: 0.5; 188 font-size: 22px; 189 letter-spacing: 1px; 190 } 191 .side{ 192 margin-left: auto; 193 margin-right: auto; 194 width: calc(100% - 150px); 195 } 196 .all{ 197 display: flex; 198 flex-direction: column; 199 } 200 .main{width: 100%} 201 .main, .side{ 202 float: none; 203 } 204} 205@media screen and (min-width:1001px) and (max-width:1024px){ 206 header{ 207 background: skyblue; 208 width: 100%; 209 height: 150px; 210 display: flex; 211 align-items: center; 212 justify-content: center; 213 } 214 header p a{ 215 font-size: 300%; 216 } 217 .container li{ 218 width: 45%; 219 margin: 1%; 220 box-sizing: border-box; 221 padding: 1px; 222 background: white; 223 border-radius: 10px; 224 opacity: 1; 225 transition: opacity 1s; 226 } 227 .container li dt{ 228 font-size: 30px; 229 } 230 .main, .side{ 231 float: none; 232 margin-left: auto; 233 margin-right: auto; 234 } 235 .side{ 236 width: calc(100% - 400px) 237 } 238 .side h3{ 239 font-size: 30px; 240 } 241 .side ul li a{ 242 font-size: 28px; 243 opacity: 1.0; 244 transition: opacity 1s; 245 letter-spacing: 1px; 246 } 247 .side ul li a:hover{ 248 opacity: 0.5; 249 font-size: 30px; 250 letter-spacing: 1px; 251 } 252} 253

JSFiddle

試したこと

margin-right,margin-topを使って調節してみたが、画面サイズを変えたところズレてしまうようになった。
positionはあまり使わないほうがいいとの指摘を受けたので、それ以外のやりかたも教えていただきたいです。

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

Google chrome
Atom

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

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

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

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

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

yoshinavi

2018/12/24 02:50

サイドバーをどのように動かしたいのですか?
x_x

2018/12/26 04:26

ブレイクポイントおかしくないですか? 481-749には何もないのでしょうか?
Raiden

2019/01/06 02:37

サイドバーをどの時にどの位置に動かしたいの? 意味がわからないよ
guest

回答1

0

自己解決

margin-topとmargin-top-leftで調節

投稿2018/12/26 09:11

leaf.

総合スコア16

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問