Q&A
提示のコードは画像では無く、コードブロックで提示されると、検証しやすくなり、回答もつきやすくなるかと思います。
実現したいこと
添付のサイトの
旅を贈ろう
Airbnbギフトカード云々
ギフトカードを登録ボタン
の３つの要素の配置を、見本のように配置する。
現状
見本のように、真ん中やや左への配置がうまくいきません。
自分でやったこと
3つの要素を含む.messageにtext-align:center を適用したのですが、位置は見本に近くなりましたが、テキストまで中央寄せになっています。
自分でやったことその２
見本のコードをデベロッパツールでチラ見したところ、3要素を含む要素にmargin-right:auto とmargin-left:autoを適用していたので、
それを真似てみましたが、要素の位置は左端に寄ったままでした。
一度模写が全くできず、結構みっちり基礎を学びなおしたのにまたすぐに詰まってしまい、心が折れそうです。
”実現したいこと”を実現させる方法とともに、もし可能でしたら「どこの勉強が足りないのか」も併せて教えていただけると励みになります。
今のままでは、LP制作で収入を得るどころか、プログラミングも全く楽しくなく辞めてしまいそうで本当につらいです。
宜しくお願いいたします。
回答2件
0
結果として同じレイアウトを表示するにも様々なhtml/cssの組み方があります。
模写をされていて、真似をしたい「部分」を見てやってみて同じようにならない場合、その「部分」の親要素、そのまた親要素の設定はどうなっているかと見ていくとヒントがつかめると思います。
cssに書いてあることが親要素との相対性で適用されるケースは多々ありますので。
投稿2019/03/11 09:15
総合スコア1899
ありがとうございます。該当箇所→親要素と広げて確認していくｸｾを付けたいと思います。
ただ、追いかけているうちに情報過多でよく分からなくなることがありますが、慣れるしかないでしょうね…。
0
ベストアンサー
基となるサイトがあるのであれば、ここで尋ねるより、実際に確認しましょう。
【理由】
「模写」の段階で、どのようなコードか「想像がつかない場合」、基となるコードを「キチンと見るべき」です。
「どのようなコードか想像がついた場合」でも、基となるコードと違う場合があります。何故なら、レイアウトの手法は、ひとつではなく、複数ある場合が多々あります。
どのコードを選択するべきかは、周囲のコードとの影響の有無や、コーダーの好みもあり、「十人十色」の部分でもあるからです。
「どのようなコードが適用されているのか？」「何故そのコードが適用されているのか？」その理屈を理解する所が「模写」の大事な所です。
投稿2019/03/10 11:29
総合スコア3523
ありがとうございます。
ですがそれだと答えを見て丸写しになってしまいそうです。
「この書き方によって、要素の位置決めをしているな」と分かっても、恐らくクラス指定とかその他のCSSと併せて指定など、その見本独自の書き方がされていると思います。
それを分解して、要素の位置決めについてのコードだけ私の手元のコードに組み込む、というようなやり方でしょうか。
よく分からなくなっていつまでも完成できず、丸写ししてしまいそうです。
CSSはHTMLと違い、SEOを意識する必要がなく、「結果良ければOK」的な部分もあり、「2」を表す場合でも「1+1＝2」や「3-2＝2」「10/2+9/3-6＝2」と、いろいろ状況によるところがあり、フレームワークを使用しているサイトだと、クラスを多用してレイアウトするので、最初は理解しにくいかもですね。
最初は「丸写し」でも良いと私は思います。「想像がつかない」のは、必要なコードが頭に入っていないからです。
少しでも残っていれば「あれ、こういう時は、確かマージンやパディングの調整が出来たよな？」とか「ポジションで好きな位置に持って行けたよな？」等、何か浮かんできます。
少しでもキッカケを浮かばせるには、より多くのレイアウト手法の知識を頭に叩き込む必要があり、基となるモノが無い時は、ひたすら関連しそうな言葉で「検索を掛けまくる」「ひたすら試す」のも大事なことです。
最初は結果が出ても「余分」な設定も当然、入ってきます。いきなり、「100点満点」は絶対無理です。
その後に、少しでも的確なコードかどうかを判断して行くことが重要です。
なので最初は「丸写し」は恥ではありません。将来のための「第一歩」です。
乱文でスミマセン。
いえ、わざわざありがとうございます。
おっしゃるとおりで、何通りものやり方があって、「正解が分からない、答え見よう」という正解探し的考えだとコーディング力が付かない、というのも何かで読みました。
その通りだと分かってはいるのですが、ついつい、
考えてもわからん！しんどい！
↓
答え見て分かった気になる
↓
後々、似たようなコードを自力で書く機会があったとき、何も出てこず絶望
を繰り返してしまい疲弊しています。
何パターンものレイアウトをコーディング（最初は丸写しだろうと何だろうと）して、パターンを脳内引き出しに地道に増やしていくしかないのですね。
膨大な時間がかかりそうですが、本当に自分のものにしたいならやるしかないですね。
パターンを脳の引き出しに入れておく場合に、全てを入れておく必要はありません。
ほんの少しのきっかけだけで良いのです。
そのきっかけを基にすれば良いからです。
どんなにベテランの人でも、すぐそばに参考書を常備したり、参考サイトをブックマークしています。
先ずは、簡単な所からで良いと思います。
例えば、ある要素を中央に移動させる場合に、その要素は、インライン要素かブロック要素か？を確認してから、divならブロック要素と判断して「CSS ブロック要素 中央寄せ」で検索して出てきたプロパティを試してみる。
など、検索の仕方を覚えておく所から始めて行けば、問題が発生した場合の対応も、同時に身について行きます。
その際に、参考にしたサイトはブックマークしておいて、時間がある時に見直せば、頭に少しずつ残って行くようになります。
脱初心者・脱初級者は、「何が問題か？」を把握出来る事かと思います。
コーディング力が身につくのは、その後です。
まあ、解決してるみたいだしあんま意味ねーが、
> CSSはHTMLと違い、SEOを意識する必要がなく、「結果良ければOK」的な部分もあり、
と書かれているが、裏を返せば「CSSの書き方を意識する必要がある部分も存在する」っつーことだから
あんまコピペとかでテキトーに書いてオッケーみたいな感じにはしないようにするとヨロシ
あなたの回答
tips
プレビュー
