質問とは関係ありませんが…… .Img と .ImgText を重ねる実装を口頭で説明するにはどうするか、という同じような質問を何ヶ月か前にここで見た記憶があります。削除されたのか投稿は見つかりませんが、同じ方でしょうか？もしそうなら、いくつかついていたはずの回答を踏まえた質問内容にしていただきたいです。
4Like
自分が実装したことを言語化（説明）ができるようにしたいです
はじめに
はじめまして、りょうです。
webエンジニアに転職をして、現在、カリキュラムを受けて勉強中です。
勉強を始めて約3か月経過しています。
このサイトを見つけて今回、初の質問をしてみようと思い投稿しました。
まだ使い方が慣れていないのと、日本語おかしいことがありますが温かい目で見てくれると助かります。
解決したいこと
唐突ですが、自分が実装したことを言語化（説明）ができるようにしたいです。
某社でカリキュラムを受けていて、企画書を基に自分でwebページを実装します。
それがOKだった場合、口頭テストがあります。
口頭テストは、企画書で自分が実装したことを、何も見ないで説明して答える形式です。
その口頭テストの問題（一部）には、
「画像と文字の表示をどのように実装したか説明してください。」
というものがありました。
私は、自分が実装したものを言語化できず、説明できず不合格で再テストとなりました。
この問題の他にも実装したことを説明しなくてはなりません。
口頭テストを受けた後、
「画像と文字の表示をどのように実装したか説明してください。」
をいろいろと考えながら実際に言語化してみました。
下記に問題で実際に実装したHTMLファイルとCSSファイルのコードを記述しています。
※この問題で不要なコードは、削除しております。
HTML（img.html）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="img.css">
<title>画像とテキスト</title>
</head>
<body>
<main>
<!-- 画像とテキスト -->
<div class="Img">
<div class="ImgText">
<p>テキスト</p>
</div>
</div>
</main>
</body>
</html>
CSS（img.css）
/* 画像とテキスト */
.Img {
position: relative;
opacity: 0.8;
width: 100%;
height: 38vw;
background-image: url(main.png);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.ImgText {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: yellow;
font-weight: bold;
opacity: 0;
font-size: 6vw;
animation: fadeIn 3s forwards;
}
@keyframes fadeIn {
form {
opacity: 0;
}
to {
opacity: 1;
}
}
実際に自分が言語化した文章
画像の表示には、div要素にクラスを設定し、
CSSでbackground-imageプロパティを使用して表示しています。
これにより、指定した画像がそのdivの背景として表示されます。
テキストを表示するために、画像のdiv要素の中にさらにdiv要素を設け、クラスを設定しました。
このテキスト用のdivには、animationプロパティを設定しており、
これによりテキストが徐々に表示されるようにしています。
このように言語化してみて口頭で説明すれば、講師の方に伝わりますでしょうか？
添削してくれると助かります。また、言語化のコツとかがあればぜひ教えてほしいです。
コツがわかれば、他のことも説明できるのではないかと思っております。
講師の方がいるなら講師に聞けばいいのでは？と思うかもしれませんが、いろんな方の意見も聞きたいのでそこを理解してほしいです。
よろしくお願いします！
⚠️注意⚠️
・質問に関係ないコメントは、基本無視します。不愉快に感じたコメントも同様です。
・質問に質問で回答しないでください。
0
3Answer
Comments
同じく質問とは関係ありませんが、私もすごくすごくよく似た内容の投稿を以前見た記憶がありますね。
ただアカウントも違うようですし、「このサイトを見つけて今回、初の質問をしてみようと思い」とありますし、まったく別の方でしょう。
まさかアカウントを一旦削除して、別のアカウントを作りなおして、初めてと偽りながら似たような投稿をするようなことはさすがにないでしょう。「画像と文字の表示をどのように実装したか説明してください。」
これに対して正しいといえる答えはないと考えます。
あえて言うなら「どういうレベル感で説明してほしいですか？」と聞いたうえで、それにそって答えるぐらいでしょう。
ざっくりとした説明が欲しいのか、完全再現ができるような詳細な説明が欲しいのかが、この質問からは読み取ることはできません。
なので、まずはその認識合わせから行い、質問者が欲している情報を提供するように心がけます。
一般論的には上記のような感じでしょう。で、一般論ではなく、学習を目的とした講習であれば、質問の意図は単純にあなたの理解度を図ってるだけでしょう。
回答の内容ももちろんそうですが、その回答を出すまでにかかった時間なり、話すことに詰まった回数なりも参考にしながら、どれだけ理解しているかをみて、それをもとに合否を出していると思います。
そういったことを踏まえると、言語化の方法うんぬんといった細かい話ではなく、コードの隅々までを完全に理解してどういった質問にも答えられるようにし、自信満々にどや顔をしながら回答すれば合格できるかと。
@Kakedashi_Ryo
Questioner@uasiさん、回答ありがとうございます。
無視しようかと思いましたが、回答してくれたんでストレートにいいます。同じような質問を何ヶ月か前にここで見た記憶があります。削除されたのか投稿は見つかりませんが、同じ方でしょうか？もしそうなら、いくつかついていたはずの回答を踏まえた質問内容にしていただきたいです。
「もしそうなら・・・」これってもう、私のことほぼ同一人物として見てませんか？もし、私が同一人物だったとして、そのいつだか投稿され、削除された質問の回答を踏まえて質問するのって可能ですか？不愉快です。
質問とは関係ありません
質問と関係ないコメントいらないです。
これについても不愉快です。そもそも私が質問してるのに意味のわからない質問するのってどうなのですか？
人を不快にするようなコメントはやめてください。
@Kakedashi_Ryo
Questioner@midoribiさん、回答ありがとうございます。
まずはじめに、回答してくださりありがたいのですが、一言だけいいます。不愉快になると思いますがご了承ください。同じく質問とは関係ありませんが、・・・(以下省略)
質問に関係のないコメントは、求めてないです。他は最初に回答した人と同じ回答です。
以後、よろしくお願いします。「どういうレベル感で説明してほしいですか？」と聞いたうえで、それにそって答えるぐらいでしょう。
講師は、完璧までは求めていないと思います。
ある程度説明できた問題は、OKもらえました。ちなみに問題は、JSのDOMとは、と言ったものです。それは答えられました。
実装の説明になると、どのように話せば伝わるのかってなって色々考えてしまって頭真っ白になります。言語化の方法うんぬんといった細かい話ではなく、コードの隅々までを完全に理解してどういった質問にも答えられるようにし、自信満々にどや顔をしながら回答すれば合格できるかと。
結局、頭に叩き込むしかないってなってしまいますね・・・。合格は、したいですが、一つでも実装の説明できれば他の実装も説明できるかもと思っています。まずはそこからかな？とも考えてます。これも結局、覚えないといけないですけど、解決策に繋がれば今後にもつながるとも思ってます。
@midoribiさんが、実際にこの質問にどう答えるか知りたいです。よろしくお願いします。
私のことほぼ同一人物として見てませんか？
.Imgと.ImgTextを重ねる構成が印象に残っていたのと、 HTML の実装を口頭で説明させるという初めて聞くカリキュラムの話から、同一人物か同じカリキュラムの受講者であろうと考えています。そのいつだか投稿され、削除された質問の回答を踏まえて質問するのって可能ですか？
回答を見て覚えていれば可能ですし、メール通知をオンにしていればコメントがメールボックスに残っているでしょう。回答を見ていないか全部忘れたとしても「都合でアカウントを消してしまいましたが、再度質問します」とでも書いていただければそれでよかったのです。無かったことにして同じ質問をするのは、回答者の労力を無駄にする行為です。
そもそも私が質問してるのに意味のわからない質問するのってどうなのですか？
人を不快にするようなコメントはやめてください。また同じようなことがあるとコミュニティの不利益になるのでコメントを書いています。経緯を知らない回答者が回答を無駄にされると不快な思いをするでしょうから。（Qiita でアクティブに回答しているのは20人にも満たないくらいで、結構な人数が前の質問を覚えているかとは思いますが。）
それと（これは余計なお節介なので無視してもらって構いませんが）不愉快であることを表明して人を動かそうとする手段はこういう場では通用しないので、他のやり方を身につけることをお勧めします。エンジニアとしてやっていく以上、質問サイトは今後も利用することになるはずですから。よければ Qiita のコミュニティガイドラインに目を通してみてください。結構いいことが書いてあります。
せっかくなので質問に回答しますが、自分であればまずは以下のように文章化します。
まず div 要素を配置し、
Imgクラスを指定します。 CSS でImgクラスを対象とするルールを書き、background-imageプロパティに画像のパスを指定して背景画像を表示させます。
次にその div の子として div 要素を配置し、ImgTextクラスを指定して、その中にテキストを書きます。ImgTextクラスについて同じく CSS を書き、位置の調整などを行います。特に、animationプロパティに別途定義したfadeInキーフレームを指定することで、テキストが徐々に表示されるようにしました。だいたい以下のことを理解しているとアピールしているつもりです。
- HTML は木構造を持つ
- CSS は HTML をスタイリングする
- CSS ルールはセレクタによって対象の要素を選び、プロパティによってスタイルを変える
- この実装で重要なのは背景画像の表示と文字のアニメーションである（それについて詳しく説明する用意がある）
口頭で説明するときにはまた違った表現になるとは思いますが。コードの大まかな性質・構造・振る舞いを柱にしつつ、細部に肉付けするように喋ると迷子にならなくて済むはずです。
全体的にみると「設定」と言う単語を使っています。
アプリケーションなどにたいして値を付けることを「設定」と呼ぶことはありますが、こういった構文やプログラムを構築する際に「設定」とはあまり呼びません。
「指定」や「付加」などをつかいます。
クラスを設定
何のクラス名？
この場は見れば分かりますが、主語抜きはほどほどにしないと相手の混乱を招きます。
またmidoribiさんが指摘されてるように、単純に説明できなくて不合格もあると思いますが、どれだけ理解しているかも観られているハズです。
この理解力が口頭説明にも影響して、相手が聞きたかった説明になったどうかにも繋がってくるはずです。
1Like
普通は同一人物と疑われるほど酷似した質問が過去にあれば、回答内容が気になると思うんだけどな。
回答を覚えてくれているかもしれない人に「人を不快にするようなコメントはやめてください」とか意味不明な言動を見るとそういうことなんだろうな。
名前・使用単語・タグもほとんど同じなので同一人物でしょう。
嘘までついて人を不快にさせているのはあなたですよ？
1Like