超基礎的な質問で申し訳ありませんが、3つの画像をflexで並べた際に、なぜ真ん中のひとつだけ少し画像が大きく表示されてしまうのかわからず投稿しております。
いろいろコードを試して、現在calcで3分割しているのですが、どの部分に問題があるのかわかる方がいたら教えていただきたいです。
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>Coding practice</title> 8 <meta name="discription" content="模写"> 9 <link rel="stylesheet" href="css/style.css"> 10 <link rel="stylesheet" href="css/reset.css"> 11</head> 12 13<body> 14 <header class="header"> 15 <div class="header-inner"> 16 <h1 class="header-logo"> 17 <a helf="#"> 18 <img src="img/logo_transparent.png" alt="Coding practice"> 19 </a> 20 </h1> 21 <nav class="header-nav"> 22 <ul class="header-nav-list"> 23 <li class="header-nav-list-item">Top</li> 24 <li class="header-nav-list-item">My Challebge</li> 25 <li class="header-nav-list-item">Just Continue</li> 26 </ul> 27 </nav> 28 </div> 29 </header> 30 31 <div class="mv"> 32 <div class="mv-copy"> 33 <h1 class="mv-copy-ttl">Coding Practice Everyday!!</h1> 34 <p class="mv-copy-txt">Start from HERE</p> 35 </div> 36 </div> 37 38 <section class="content"> 39 <div class="content-inner"> 40 <h2 class="section-ttl">My Challenge</h2> 41 <div class="wrapper"> 42 <div class="contents-box"> 43 <figure class="contents-box-img"> 44 <img src="img/4.png" alt=""> 45 </figure> 46 <div class="contents-box-info"> 47 <h2>もくもく会in大阪のコーディングイベントに参加してきました!!</h2> 48 <time datetime="2020.06.28">2020.06.28</time> 49 </div> 50 </div> 51 52 <div class="contents-box"> 53 <figure class="contents-box-img"> 54 <img src="img/5.png" alt=""> 55 </figure> 56 <div class="contents-box-info"> 57 <h2>模写コーディングを1つ終わらせることができました!!次はもう少し難しいものに挑戦します!</h2> 58 <time datetime="2020.07.02">2020.07.02</time> 59 </div> 60 </div> 61 62 <div class="contents-box"> 63 <figure class="contents-box-img"> 64 <img src="img/6.png" alt=""> 65 </figure> 66 <div class="contents-box-info"> 67 <h2>「1冊ですべて身につくHTML&CSSとWebデザイン入門講座」を完走しました!!</h2> 68 <time datetime="2020.07.10">2020.07.10</time> 69 </div> 70 </div> 71 72 73 </div> 74 <a href="#" class="btn">もっと見る</a> 75 </div> 76 </section> 77 78 <section class="cta"> 79 <div class="cta-innner"> 80 <h2 class="section-ttl-03">Just Continue</h2> 81 <p class="cta-txt"> 82 日々、学び続ける<br> 83 いつか、Webで世界を今より少しだけ<br> 84 よくするために<br> 85 でも、今は自分のために<br> 86 毎日少しずつ勉強する<br> 87 そんな私と共に学んでくれる方を募集しています</p> 88 <a href="#" class="cta-btn">お問い合わせしてみる</a> 89 </div> 90 </section> 91 92 <footer class="footer"> 93 <p><small>copyright(C) 94 </small></p> 95 96 </footer> 97 98 99</body> 100</html>
css
1body { 2 font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; 3} 4 5a { 6 text-decoration: none; 7 color: #333; 8} 9 10img { 11 max-width: 100%; 12 height: auto; 13 14} 15 16.header { 17 height: 80px; 18} 19 20@media (max-width: 768px) { 21 .header { 22 height: 60px; 23 } 24} 25 26.header .header-inner { 27 max-width: 980px; 28 margin-left: auto; 29 margin-right: auto; 30 padding: 0 20px; 31 height: 100%; 32 display: flex; 33 justify-content: space-between; 34 align-items: center; 35 36} 37 38.header-nav-list { 39 display: flex; 40} 41 42@media (max-width: 768px) { 43 .header-nav-list { 44 font-size: 15px; 45 } 46} 47 48@media (max-width: 768px) { 49 .header .header-inner { 50 height: 60px; 51 padding: 0 10px; 52 } 53} 54 55.header-logo a img { 56 width: 179px; 57 height: 40px; 58} 59 60.header-nav-list-item { 61 padding: 10px; 62} 63 64@media (max-width: 768px) { 65 header-nav-list-item { 66 padding: 5px; 67 } 68} 69 70 71.header-nav-list-item:last-child { 72 padding-right: 0; 73} 74 75.header-nav-list-item a { 76 font-weight: bold; 77} 78 79@media (max-width: 768px) { 80 .header-nav-list-item a { 81 font-size: 11px; 82 } 83} 84 85.mv { 86 height: 551px; 87 background-image: url(../img/austin-distel-wawEfYdpkag-unsplash.png); 88 background-size: cover; 89 background-position: center; 90 text-align: center; 91 position: relative; 92} 93 94.mv-copy { 95 position: absolute; 96 top: 50%; 97 left: 50%; 98 -webkit-transform: translate(-50%, -30%); 99 transform: translate(-50%, -30%) 100 101} 102 103.mv-copy-ttl { 104 color: #fff; 105 font-size: 36px; 106 margin-bottom: 10px; 107 font-weight: blod; 108 background-position: center; 109 position: relative; 110 line-height: 1.3; 111} 112 113 114@media (max-width: 768px) { 115 .mv-copy-ttl { 116 font-size: 32px; 117 } 118} 119.mv-copy-txt { 120 font-size: 16px; 121 font-weight: blod; 122 color: #fff; 123 124} 125 126.section-ttl { 127 font-size: 32px; 128 font-weight: blod; 129 text-align: center; 130 margin-bottom: 49px; 131 line-height: 1.2; 132} 133 134@media (max-width: 768px) { 135 .section-ttl { 136 font-size: 28px; 137 } 138} 139 140 141.section-ttl-03 { 142 font-size: 36px; 143 font-weight: blod; 144 text-align: center; 145 margin-bottom: 47px; 146 color: #fff; 147} 148 149@media (max-width: 768px) { 150 .section-ttl-03 { 151 font-size: 28px; 152 } 153} 154 155.wrapper { 156 display: flex; 157 justify-content: space-between; 158} 159 160 161@media (max-width: 768px) { 162 .wrapper { 163 flex-direction: column; 164 } 165} 166 167.content { 168 padding: 60px 0 88px; 169 170} 171 172.content-inner { 173 margin-left: auto; 174 margin-right: auto; 175 max-width: 980px; 176} 177 178.contents-box { 179 margin-right: 25px; 180 width: calc(33.33333333% -25px); 181 box-shadow: 0px 3px 6px rgba(0, 0, 0, .16); 182} 183 184@media (max-width: 768px) { 185 .contents-box { 186 width: 100%; 187 margin-bottom: 20px; 188 max-width: 400px; 189 margin-left: auto; 190 margin-right: auto; 191 } 192 } 193 194 .contents-box:nth-child(3) { 195 margin-right: 0; 196 } 197 198 199@media (max-width: 768px) { 200 .contents-box:nth-child(3) { 201 margin-right: auto; 202 } 203} 204 205.contents-box-img { 206 width: 100%; 207 208} 209 210.contents-box-info { 211 padding: 20px; 212 height: 164px; 213 display: flex; 214 flex-direction: column; 215 216} 217 218@media (max-width: 768px) { 219 .contents-box-info h2 { 220 font-size: 16px; 221 } 222} 223 224.contents-box-info time { 225 margin-top: auto; 226} 227 228@media (max-width: 768px) { 229 .contents-box-info time { 230 font-size: 14px; 231 } 232} 233 234.btn { 235 display: block; 236 width: 310px; 237 padding: 17px; 238 font-size: 18px; 239 font-weight: blod; 240 box-shadow: 0 3px 6px rgba(0, 0, 0, .16); 241 text-align: center; 242 margin-left: auto; 243 margin-right: auto; 244 margin-top: 48px; 245 transition: 0.3s; 246 border-radius: 5px; 247 line-height: 1.0; 248 249} 250 251@media (max-width: 768px) { 252 .btn { 253 width: 80%; 254 font-size: 16px; 255 } 256} 257 258.btn:hover { 259 opacity: 0.8; 260 261} 262 263.cta { 264 background-image: url(../img/tim-bogdanov-4uojMEdcwI8-unsplash@2x.png); 265 background-size: cover; 266 background-position: center; 267} 268 269.cta-innner { 270 padding: 61px 0 44px; 271} 272 273.cta-txt { 274 text-align: center; 275 font-weight: blod; 276 line-height: 1.7; 277 margin-bottom: 50px; 278 color: #fff; 279 280} 281 282@media (max-width: 768px) { 283 .cta-txt { 284 font-size: 14px; 285 line-height: 2; 286 } 287} 288 289.cta-btn { 290 display: block; 291 width: 210px; 292 padding: 19px 0; 293 color: #fff; 294 background-color: #83032A; 295 font-size: 16px; 296 font-weight: blod; 297 box-shadow: 0 3px 6px rgba(0, 0, 0, .16); 298 text-align: center; 299 margin-left: auto; 300 margin-right: auto; 301 transition: 0.3s; 302 border-radius: 5px; 303 line-height: 1.0; 304} 305 306@media (max-width: 768px) { 307 .cta-btn { 308 width: 80%; 309 } 310} 311 312.cta-btn:hover { 313 opacity: 0.8; 314 315} 316 317.footer { 318 text-align: center; 319 background-color: #333; 320 color: #fff; 321 padding: 31px 0; 322} 323 324.footer small { 325 font-size: 14px; 326 letter-spacing: 0.025em; 327} 328 329@media (max-width: 768px) { 330 .footer small { 331 font-size: 12px; 332 } 333}
>超基礎的な質問で申し訳ありませんが、
他者から見た場合「なら、その基礎をきちんとおさえたら良いのでは?」となります。
自身が初学者であると伝えたいだけなら質問に初心者アイコンをつけるにとどめてください。
小姑のようなコメントありがとうございます。次回そうするので質問に答えてもらえると助かります。
実際そう感じる回答者は少なくないですよ。他人ですし。
あと、質問は編集できますのでいつ来るかわからない次回に回すのではなく今回から対応願います。
また、「今どうなっているか」がわかる画面キャプチャを提示してください。
画像だけ個別に提示されても手元のサイズがアップロードされるとは限りません。
基礎的な内容でも応用的な内容でも、時間取らせて申し訳ないという気持ちで書かれてるのかなーと
推測してるんですが、基本的に暇なときにしかteratailのユーザーは回答しないと思うので
別に断りを入れる必要はないかと思うんです
初心者マークを付けなくても解決方法を教えてくれる方もいるんですね。とっても助かりました。
どうしても初心者アイコンを初学者に絶対表示にさせたいなら、サイトの制作者側とお話されたらどうですか?
「なら、その基礎をきちんとおさえたら良いのでは?」と言われましたが、それが自分で調べてもわからないから質問しています。こういった玄人から素人に対して、知識がないことを責められる発言は脅威ですね。こちらのサイトは「15分調べて分からなかったら質問しよう!」とうたっているにも関わらず、サイトの趣旨を理解しているとは思えない、このような回答をいただくとは思いませんでした。
回答者にとって理解しやすい質問を投稿することは必要だと思いますし、なるべくそのような質問をしたいと考えています。しかし、質問すること自体を否定するような発言や回答者への敬意を否定される筋合いはありません。自分が気持ちよく回答していきたいならば、自分の気に入った質問にだけ答えればよい話であり、自分の持っているマイルールを他人に押し付けたり、質問することを否定するようなコメントするのは、学習者側が気持ちよくこのサイトを利用できませんので、控えていただきたいですね。回答者はあなただけじゃないわけですから、心配しなくて大丈夫ですよ。
>質問者さん
私に言ってます?
>K_3578さん
K_3578さんへのコメントではありませんでした。紛らわしく不快な思いをしていたら申し訳ありません。コメントありがとうございます。私の心情は推測のとおりですし、おっしゃられている回答者側の心情も理解できます。質問の書き方などはある程度マニュアルがありますし、回答者にとってわかりやすく質問者が用意する必要があると思いますが、この「心情」を質問の中に表現するかどうかは、質問者に委ねられている部分なので、そこを指摘することに何の意味も改善の余地もないと思います。心情書いたらよくない質問、心情書かないからいい質問、という業界ルールみたいなものがあるのでしょうか?
K_3578さんのように、あ~申し訳ないと思って質問してるんだろうな~と感じる人は感じるし、なにも思わないひとは何も思わないし、逆に書いていないと、なんか一言書けよ、と思う人もいるかもしれないし、感じ方は人それぞれでしょう。
もし実際に対面だった場合、同じ質問が二人から同時に来た時に、自分で調べたけどわからなくて。。。と申し訳なさそうに聞いてくる人と、調べたかどうかも言わず質問だけを投げてくる人と、どちらに先に回答したいと思うでしょうか?多くの人は前者と回答すると思います。では、オンラインで顔が見えない場合はどうでしょうか?前置きせずに、質問だけを明確にしてほしいというのも理解できます。しかし、対面と同じように回答者が質問を見て、この困ってる初心者助けてあげたいな、と思う人もいるかもしれません。
この部分については、質問の内容にも、質問のクオリティにも関係ない部分だと思うので、お互いの気持ちを尊重すればいいだけで、サイトの利用には特に問題ないと思います。
以前より運営の方には「質問投稿で初心者アイコンはデフォルトONに」という要望は既に何度か送ってます。
初心者アイコンをつけるかつけないかで回答がつくかつかないかは関係してきませんが、要件とは関係のないことをわざわざ書くことによる印象は変わってきます。
そんなことより何を調べてなにを試したか具体的に書くことに文字数を割いてもらったほうがより確実なアドバイスに繋がりますし、調べ方や試し方の方向性のアドバイスもつきやすくなります。
質問しなくても解決できたらそれが一番早いのは言うまでもないと思いますが、他人に頼ることを選んだ以上は初心者かどうかよりも書くべきことが沢山あるよね、ということです。
そのための初心者アイコンですしね。
読む側はあくまで問題解決のアドバイスのためにみるので、その回答者側のことを少しでも考えられるなら「初歩的で」のような但し書きは全く不要であることは分かるのではないかと思います。
「いや初歩的だと自分で判断できるなら自分でできるでしょ」と感じます。基礎だとわかってるなら基礎を学べば自分で解決できることが分かっている ということになります。
自身の怠慢のためだけに他者の時間を使うことを選択するのは間違ってると思います。
「おそらくそうではない」と推し量ったとしてもそれはあくまで「おそらく」つまり解釈であり事実と違うこともあります。
本当にそのつもりで書いてる人との区別は赤の他人にはできません。書いてないことは何も伝わらない。基本書いたとおりに伝わると思ってください。
私自身も「初心者である」とか「基礎的」とか書かれているのはあまり好ましくないと思いますが、
なにより質問の始めに書いてあるのが余計に良くないかな、とは思いました。
ヘルプでも「質問詳細の最初に実現したいことを書きましょう」とありますので。
今回の質問に関してはもう少し調べたことを詳しく書けたかなぁとは思います。
特に、「基礎的な内容」と思っているならばこそ、「基礎的な内容」が何故調べても
解決出来ないのか?
もしかしてキーワードの選択が誤っていて、欲しい情報を得られていないのでは?
と思えたので。
まぁ書くにしても締めに書いておくぐらいかなぁ・・・。
>以前より運営の方には「質問投稿で初心者アイコンはデフォルトONに」という要望は既に何度か送ってます。初心者アイコンをつけるかつけないかで回答がつくかつかないかは関係してきませんが、
ーはい、運営に訴え続けてください。私からも送付しておきます。初心者の基準が現時点では曖昧で、しかも回答がつくつかないに関係ないなら、質問者に対してこれを指摘する意味はありません。
>要件とは関係のないことをわざわざ書くことによる印象は変わってきます。
ー関係ないことってなんですか?書いてないです。
そう思うなら、ご自身が私の質問とは関係ないことをわざわざコメントに書くことで、私に与えた印象について考えてみたらどうでしょうか。
>そんなことより何を調べてなにを試したか具体的に書くことに文字数を割いてもらったほうが~
ーこういうアドバイスはとても助かります。おっしゃる通りだと思いますので、次回から気を付けます。
>そのための初心者アイコンですしね。
ー正直言ってこのアイコンの存在に気付いていませんでした。初めて投稿した前回も気付いていなかったと思います。なので「超基礎的な質問で申し訳ありませんが」という一文で、素人の質問だとわかってもらえると考えていました。アイコンを使うのか、一文入れるのか、何が違うんですか?回答者が得る情報として「この質問者は素人」という結果に変わりはないと思います。
>その回答者側のことを少しでも考えられるなら「初歩的で」のような但し書きは全く不要
ー但し書きを書いても、回答をくれる人はくれます。自分が気にするからと言って、自分が全回答者を代表して言ってます、みたいな言い方やめたほうがいいと思いますよ。事実と異なるので、全く説得力がないです。そういう人もいるんですね、分かりました。としかお返事できません。
>「いや初歩的だと自分で判断できるなら自分でできるでしょ」と感じます。
ー初歩的な質問だと分かっていた場合には、質問してはいけないのですか?むしろ、初歩的なことしか今まで勉強していないんだから、ミスも当たり前に初歩的であり、未だに初歩的なレベルの問題に気付くことができない、っていうだけなんです。
>基礎だとわかってるなら基礎を学べば自分で解決できることが分かっている ということになります。
ー基礎を学んでもわからないことなんてたくさんあると思いますけど。様々な学習サイトやスクールがあり、それぞれ「基礎」の内容もレベルも教え方も異なります。どこで基礎を学べば、一発で基礎の質問をしなくていいレベルになるんですか?おすすめの学習サイトやスクールがあればぜひ教えていただきたいです。
>自身の怠慢のためだけに他者の時間を使うことを選択するのは間違ってると思います。
ー怠慢?誰のことですか?このサイトは15分以上調べて分からなかったら質問しよう!とアドバイスしているのを承知して、回答者をされているのでしょうか?もちろん私も数時間あれこれ試してからの質問ですが、いったい何時間、何日同じ問題で苦しめば、回答者さんは質問者を怠慢だと思われないのか気になりますね。最低15分で間違いないですよね?
K_3578さん
ああ、なるほどですね。最初に書くか、最後に書くかで変わってくるわけですね。
残念ながら初心者アイコンに気付いておりませんでした。回答者によっては初歩的な質問をパスする人もいるだろうと思い、最初に初心者であることを表明した次第でありました。プロからすれば信じられないかと思いますが、私レベルの初心者では「質問する」の機能をすべて理解し、使いこなすというのは難しいのが現状です。
投稿の仕方について、アドバイスいただきありがとうございました。そうですね、失敗したコードや参考にしたサイトを載せてもわかりにくくなってしまうかなぁと思ってしまっていました。次回の質問に生かさせていただきます!
>質問者さん
勘違いされそうなので断っておきますが、最初に書く、最後に書くというのはあくまで個人の感覚です。
初心者アイコンに関しては気付かれない方が少なからず居ますのでもっと目立つようにお願いしたいですね。私も問い合わせてみます。
初心者であるからこそ、是非ともヘルプを使って頂ければと。
私へのコメントではないでしょうが、15分調べて云々に関しては、キャッチコピーとして使われている
ものの、実際この業界だと15分じゃろくに調べれないので、あくまで知名度を上げるための売り文句(有償のサイトではないですが)みたいな物だと思って頂けると良いですかね・・・。
実際質問を書こうと思うと15分程度の調査じゃまともな文書けないので調べながら書いてると、
私は数時間経過したり、まとめている内に自己解決したりします。
私みたいに数時間掛けろと言う訳ではありませんのですが、
投稿する前に質問画面右下にチェックリスト等もありますので、一度振り返る癖を付けて頂くと
質問者さん自身の成長にも繋がると思います。
以下は私の経験談です。
私がteratailを使う上で調べたのはヘルプ、それとteratailタグの過去質問、ベテランの回答者さんの
されている質問などはとても参考になりました。
teratailタグの質問は使い方などに関して長年討論されている過去質問がありますので、
teratail自体の空気感を掴むのに重宝しました。
ベテランの回答者さんの質問は情報の整理の仕方が上手なので、ハイレベルの質問故に回答が
付いていないこともしばしばありますが、質問の書き方自体はお手本になりました。
長々と書いて申し訳ない、かなり脱線してるのでそろそろ自重しますね。
>K_3578さん
コメント、アドバイスありがとうございます。
おっしゃる通り、15分云々というのは調べるにはあまりに短いと思います。このキャッチコピーから何が言いたいかというと、いくら考えても調べても答えに辿りつかずに結局諦めてしまうのは勿体ない、知らないことは悪ではない、ここは気軽に質問できる場であり、専門知識があってしかもそういう人の力になりたいと思っている人と困っている人を繋ぐことがこのサイトの趣旨だと私は理解しました。
そうは考えない人もいる、管理者でもないのにマイルールを押し付けてくる人がいる、モラルのない発言をする人もいる、ということを今回初めて知りました。もちろん回答者だけでなく、質問者にも同じことが言えるでしょう。
そういった人から攻撃され、やる気を失ったり、このサイトで聞きたいことが質問できなくなるような人が増えないことを祈るばかりです。
経験談、とても参考になります。過去質問で似たようなものを探したのですが、どれもレベルが高く内容が複雑すぎて何を言っているのかわからない、質問を探すこと自体に時間がかかってしまう、、、と途中で諦めてしまっていました。週末、またみなさんの質問・回答を見る時間を作りたいと思います。
長々とお時間割いてお返事いただき恐縮です。ありがとうございました。K_3578さんのコメントに救われ、もう少し頑張ってみようという気持ちになりました。引き続き、私のような初心者も見捨てずに、回答してもらたら助かります。応援しています。
最後に一つだけ。返信は不要です。
今回指摘されていたm.ts10806さんですが、自分のルールを押しつけている訳ではなく、
長年回答者として色んな質問に答えられてきた方なので、悪い方ではないとだけ言っておきます。
teratailはユーザーの自治にある程度任されているところがあるため、
自分ルールというよりは、teratailのルールをm.ts10806さんなりに解釈されているのかと。
色んな質問を回答されているため、極力質問には無駄な文章を書いて欲しくない、と思われている
のかと。長年回答者をされている方と最近始められた方なので認識にズレが生じるのは
仕方ないとは思いますし、互いにすれ違ったままヒートアップしてしまったのかなと。
teratailの質問に答えられる質問があれば是非挑戦してみてください。
思ったより骨が折れます(苦笑)
質問者だけでなく、回答者としても会えることを楽しみにしてますーそれではっ
気になっていた情報が見つかったのでちょっとだけ追記
15分云々はGoogle人工知能チームの「15分ルール」が基に作られたらしいです。
https://tkybpp.hatenablog.com/entry/2016/08/16/173055
回答1件
あなたの回答
tips
プレビュー