マガジンのカバー画像

コーディングコース 実践編 質問集

16
コーディングコース 実践編 質問集
運営しているクリエイター

記事一覧

要素の表示・非表示を切り替える際のプロパティ

要素の表示・非表示を切り替える際のプロパティで、 display: none; visibility: hidden; opacity: 0; これらの違いがよく分かっていません。 どのような使い分けをすればよいでしょうか? →display:noneは要素ごと無くなる(htmlもなくなる)イメージで visibility、opacityに関しては透明度0になり、見えなくなるイメージです。(非表示のような)なのでdisplayとそれ以外で考えていただくといいかと思います。よ

background-size: cover;とobject-fit; cover;の違いを教えていただけると嬉しいです。

見出し1~4のある、背景がカラーカードの部分の質問です。 背景の画像の配置ですが、 background-size: cover; と object-fit; cover; の違いを教えていただけると嬉しいです。 →background-size:coverもobject-fit:coverも同様の表現を行うことができます。 違いは、background-sizeは背景画像に対しての指定になる、object-fitはimg要素に対する指定になる、ということです。 画像を背景

同じページ内のリンクのテキスト色が異なる場合の設定について

ヘッダーのナビメニューは黒、フッターのナビメニューは白、といったようにリンク色が異なる場合、効率のよい書き方はありますか? リンクが出てくる度に、毎回それぞれのセレクタに対して↓のような感じで設定しているのですが、 .contact-btn:link,.contact-btn:visited,.contact-btn:hover,.contact-btn:active { color: #fff;} リンクごとに毎回このように書いているので、もっと良い方法や書き方がある

img要素のalt属性の使い方について

今回カンプの「シューズキットの魅力」と「お客様の声」で配置した画像のalt属性に何とつけようか迷いました。 サンプルコードでは省略されているようでしたが、画像の説明が難しい場合はこちら省略してもよいのでしょうか? また、今回のファストシューズ・Familyで楽しむ・プレゼントの3枚と、お客様の声の2枚に対して、先生だったらどのように書かれるか、一例で構いませんのでご教示いただけますとありがたいです! →alt属性は第4週でつけます!なので、空白で平気です。基本的にはその写真

右側に余白で出来てしまう

今回の課題で渡されたカンプのbodyのwithは1400pxなのでその設定でコードを書くと 右側に余白で出来てしまうんです (下記右側の写真を見てください) 動画内ではbodyのwithを100%の設定にしているのですが コードを書く時はカンプのbodyの横幅や高さは無視してすべて100%で設定をするものなのでしょうか? →お世話になっております。 このあたりもクライアント様と相談して決めることが多いですが、基本的には%で設定することが多いかなと思います。余白はなるべくない

代替フォントの決め方

フォントは基本的にクライアント様と相談して決めることが多いです。 似たようなものでもいいのか、購入していただくかなどはクライアント様と相談が多いですね。似たようなものでもいいというケースも多いです。 宜しくお願い致します。

カンプはWEBデザイナーが作成しますか?

ンプはwebデザイナーが作成しますので、コーダーは基本的にHTMLやCSSのコーディングのみとなります。端数などは、クライアントと相談してどうするか決めることが多いです。

オンラインVSCodeの開き方(動画)

オンラインVSCodeの開き方(動画)です。

ハンバーガーメニューの修正方法

CSSセレクタの優先順位の計算方法

https://qiita.com/oh_rusty_nail/items/e896825cd54e5c0a3666 ▼CSSの優先順位について タグのstyle属性 style="color: red;" 1000点 ID        #hoge      100点 クラス      .hoge       10点

教材について

中級編のファイルの開き方

画像のサイズについて

画像を調整するときはいくつか方法があります。 まずはCSSではなく、画像をあらかじめトリミングしておく方法です。CSSでの指定が大変な時や、いただいた画像サイズがバラバラのときはこのように指定します。①<img>のmax-width:100%をwidth:100%に変更 →object-fit: cover; こちらの方がよいと思います!こちらは自動的に画像をトリミングしてくれます。是非試してみてください!

動画3)XDにlpファイルを開き、パーツの切り出しを行う段階です。切り出したいパーツをクリックしても左側にフォルダがでてきません。

画面左下のボタンの、選択を変えるとうまくいくとおもいます!四角が二つ重なっているところを選択してみてください!よろしくお願いいたします。

課題の提出について

どちらでも構いませんよ! ご自身でしっかりと理解していただいて課題をご提出していただければ問題ありません! よろしくお願いいたします。