Q&A
そういう意図はないと信じたいのですが、この質問は同サービスへの登録をさせるためのステマになりかねません。（登録しないとソースが確認できないため）。もし質問するなら先方の規約が許す範囲で必要なソースを提示してピンポイントで挙動の確認をするしかないでしょう
コーディング勉強中です。
模写修行(https://moshashugyo.com/lessons/dot-doc)
というサイトで解説を確認しながらコーディングしているのですが下記の点でつまずいてしまい、困っております。
どうか皆様のお知恵をお借りしたいと思い、投稿させていだきました。
①
@media screen and (min-width: 768px) {
.footer-copyright {
margin-left: 120px;
}
という部分、120pxはどこの部分を見れば出てくるのでしょうか？
↑上記のコピーライトの部分にmargin-left: 120px;を支持している状態です。
②”top-kv-img”のwidth="815" height="703"というサイズはどこから取得している数値なのでしょうか？
わかりやすいように、figmaやHTMLを添付できたらよかったのですが、できずに申し訳ありません。
サイトからダウンロードして確認していただくお手間がありますが、何卒よろしくお願いいたします。
ご連絡ありがとうございます！
確かに！教材としては無料ですが登録が必要でした！
皆様に見ていただくには登録をしていただかないといけないことになりますね。
失念しておりました、申し訳ありません。
再度規約を確認しましたが、投稿は難しそうなので諦めます💦
ご返信ありがとうございました。
もし、皆様の中ですでに登録されている方が、いらしたらご教授願います。
質問内容が不明なので、一般論で言うと、
・あるサイトで勉強している
・そのサイトで分からない記述があるが、そのサイト中を探し回っても説明がない
ということであれば、そのサイトは「それぐらい説明しなくても分かるレベルの人向け」なのでは？
ご連絡ありがとうございます。
私もそう思って、確認したのですが
・コーディングの基礎学習中
・コーディングの基礎学習を終えたばかり
の方々を対象にしているそうです…
内容的にはfigmaで作成されているデザインを読み取って、コーディングしているのですが
画像の大きさ指定やpaddingの指定数値がfigmaからでは読みとれないので
何か大体の決まりがあったりするのかと思ったのですが…実際のデザインを見ないと難しいですよね💦
コーディングのお勉強をされている方々は結構利用されていると思ったのですが（口コミを見て）、そんなことないのですね💦
皆さんどのようにコーディング勉強進めているのでしょうか💦
> 画像の大きさ指定やpaddingの指定数値がfigmaからでは読みとれないので
単に読み取る能力が不足しているだけ、という可能性も考えられますし、他の長さから算出するというパターンもありえます。
ご連絡ありがとうございます。
そうなんです・・・
読み取る能力が不足しているのかと思い、算出するというパターンも考慮して伺おうと思っていたので💦
そもそも、
> という部分、120pxはどこの部分を見れば出てくるのでしょうか？
これは、「なんとかして読み取れ」という課題を明示的に与えられたということなのでしょうか？
「そこは自分で適当に書け」という意図なのに、そこを「なんとかして読み取れ」だと誤解してしまったという可能性はありませんか？
…そういう場合もあるのでしょうか💦
1つ１つコーデイングの意図を理解しようとするのが無理あるんですかね
念のために追加で上記にイメージ図は添付したのですが…
これでは情報足りないですよね💦
> 1つ１つコーデイングの意図を理解しようとするのが無理あるんですかね
書いた人に明確な意図があれば、おそらく分かると思います。ただし、意図は無いかも知れません。
1つのことを実現するのにやり方は何通りもあるので、
「案1～案10の中で、なぜ案3を選んだのですか？」と聞かれて、
仮に案6～10を選ばなかった理由は説明できても、案3と案4をくらべて、
案3を選んだ理由は書いた人でも説明できないかも知れません。
「好みで」とか「いつもこうしている」とか「たまたま」とか。
> これでは情報足りないですよね💦
figmaというツールのことは知りませんが、HTML+CSSがあるのなら、ブラウザで開いて開発者ツールを使えばわかりますし、HTMLやCSSの文法を理解していればブラウザに頼らず、自分で読んで解釈してもわかります。「figmaを使ってしか読み取ってはいけない」縛りがあると言うことですかね。
あなたの最終ゴールは何なのかにも依りますね。
・figma操作のエキスパートになりたい
・他人のデザインしたウェブページをHTMLやCSSなどの中味を見ることなく完璧に模写したい
とかなのでしょうか？それが、そのサイトの育てようとしている目標像と合っているのか。
・自分の頭の中のイメージ通りのウェブページをコーディングできるようになりたい
であれば、どうでも良いことに拘っていることになります。
回答2件
0
皆さんどのようにコーディング勉強進めているのでしょうか💦
そもそも論ではありますが、このような「1ピクセルのズレも許さないような模写」というのが、Webサイト開発という背景にマッチしていないのではないかと考えています。
機械加工では他の部品と組み合わせる関係上、許容される誤差が決まっていますが、Webサイト制作の場合には利用者が人間である以上、「1ピクセルずれたこと」自体が（それで他の部分に影響して大幅にレイアウトが変わる事態を生むのなら別として）致命的な問題となることは考えづらいです。
見る端末の環境やブラウザの種類を変えれば、フォントレンダリングやチェックボックスなどの違いで必然的に差分は出るものである以上、通常のWebサイトでは、全体的な見た目や機能性を実現できればそれで問題はないです。
機能性やデザインを大枠で再現できるようになるところまではいいのですが、そこから先は「ピタリと一致させる」ために学習の労力を使うより、やりたいことを見据えて必要な能力を磨くことに時間を使うほうがいいと考えます。
投稿2024/09/04 05:53
総合スコア146715
本当に頭が固くてすみません💦
模写をする上で、同等のコーディングは必須かと思っていました。
見た目、機能面で同じような物になっていれば良いという考え方なのですかね…
通っていたスクールの先生から「見た目はだれでも真似できる、いかに綺麗にコーディングするかが必要とされる人材！」と伺っていたので、色々な勉強サイトのコーディング方法が良いのかと思い、手法をインプットしたかったのです💦
その上で、何故そのコーデイングになったのか、不明点をクリアにしないと進めない気がしたのです💦
> 色々な勉強サイトのコーディング方法が良いのかと思い、手法をインプットしたかったのです💦
それと「厳密な位置を揃える」というのが、どうにも結びつかないです。
「厳密な位置を揃える」ということをしたいのではないのです
ひとつ、ひとつコーデイングの意味を理解したかったのです💦
> 「厳密な位置を揃える」ということをしたいのではないのです
「120pxはどこの部分を見れば出てくるのでしょうか？」という疑問を抱いた以上は、「ピクセル単位で合わせること」を重視していると捉えました。
（このような具体的な値は、デザインの領分に属することであって、多少のピクセル数の差があろうがWebサイト構築にあたって重要な意味を持つものではない、ということもよくあります）
0
ベストアンサー
なんか初心者をいじめるかのような心無いメッセージばかりで可哀想ですね。
CSSは確かに暗黙の決まり事とかが多くあり、断りもなく出現することもあるのですが、自分は知らないので、なんの決まりもないと今は思っておいて数年後にそういう意味だったんだくらいに思うのが良いかと思います。
(あるいはほかの回答を粘り強く待つか。恐らくこっちを選択するだろうが)
とにかくほかの人のメッセージが酷い。
ほかの投稿であまりにも酷いものが多かったので回答しました。
また、暗黙のルールなど調べても出ないので分からないことを聞くのは当然だろうし、熟練のデザイナーが見れば一瞬で解決出来るかもしれないし、何らかのデザイナーソフトで割り出した値かもしれないと当たりをつけるのは素晴らしいし、それを解決するには質問するしかないと思います。
批判してる他の人って何を考えてるんだろう？質問者を攻撃する意味が全く理解できない。
以下蛇足
本人たちは優しさのつもりなのでしょうけど、立場が違うし受け手側の感情があるのでそんなに強く言う必要もないのに。
本人のレベルとか、サイトのレベルがこの質問となんの関係があるんだろう？指定したピクセルの意味を答えればいいのに。それすら答えずに必死に揚げ足を取る方がよっぽど、質問に答えるようなレベルに達してないでしょう。
こんな揚げ足取り、プログラミングを分からない小学生でもできるし。喧嘩売ってるだけにしか見えないし。質問者が反論しないの分かってるからって。
少なくとも自分が悩んできてるのにこんなこと言われたら100%不愉快なんですが？(笑)
特に初心者なんてなんでもありでしょ。特に想像力が豊かであるほど。
画面サイズの1/3とかかもしれないし、あるデバイスに置ける何らかの絶対的な数値が存在するのかもしれないし、昔にあった不具合の名残かもしれないし、何らかの規則的なルールがあるかもしれないし。
そんなのがなんの断りもなく出てきたら混乱するのは誰しも当然でしょ。
ないなら「ない」って答えればいいだけじゃん。それが疑問に思った時に求めるものでしょ。
追記。
改めて確認しましたが酷い回答してるのはotnって人だけでしたね。
こいつは何がしたいんだろう？荒らしなのかね。
クエスチョンマークついてるのに質問内容わからんとか、メッセージしなくていいだろ
投稿2024/09/04 13:16
総合スコア860
ご連絡ありがとうございます！
心優しいコメントで勇気が出ました！
頭が固い私にはコーディング向いていないのではないだろうか…と思っていたので💦
見た目的には出来上がっているのですが、コーディングされた方がどういう理由で、Widthやheight、marginの数値を算出したのかわからず、モヤモヤしていたので質問させていただきました。
htmlの中にある<img>タグでsvgに対してWidthとheightを指定しているのですが、それがデザインカンプと一致していなく、どこの部分を見れば良いのかわからずでした💦
<img width="815" height="703" src="img/top-kv-illustration.svg" alt="" />
↑このような感じです。
…最初からこのような書き方をすれば、わかりやすかったのかもしれませんね💦
あまり深く考えこまず、模写はある程度と割り切って勉強していきます！
本当にありがとうございました！！
その後のやりとりで、どうやら「120pxをどこかから読み取る必要は無さそうだ」ということは分かったのですが、最初は質問をストレートに読み取って、てっきり、サイトの課題で「120pxを読み取れ」と書いてあるのかと思って、課題が出されているなら、解き方はサイトのその前の部分に書いてあるはずだということで、最初のコメントでは、そういう一般論を書いています。
誤解してしまったのがまずいという事なんですかね。
「そのサイトで分からない記述があるが、そのサイト中を探し回っても説明がないならば～～」というのは、「課題が出されたら解き方はサイトのその前の部分に書いてあるはずなので探し回れ」ということです。たしかに、反語表現をそのままの意味としてストレートに解釈されると困りますね。もっと分かり易く書かないといけなかった。
結果的には「120pxをどこかから読み取れという課題は出てなかった」ということかと思います。
（これもまた誤解の可能性もありますが。）
自分のコメントを、そのままの意味としてストレートに解釈されると困るといいつつ、
質問者の質問文を、そのままの意味としてストレートに読み取ってしまったと言うことでは、私の行動が一貫していませんね。その点は謝ります。失礼しました。
> 指定したピクセルの意味を答えればいいのに。
「意味を持つとは限らない」という回答だったのですが、遠回し過ぎたので追記しました。
あなたの回答
tips
プレビュー
