記事一覧
CSSセレクタの優先順位の計算方法
https://qiita.com/oh_rusty_nail/items/e896825cd54e5c0a3666 ▼CSSの優先順位について タグのstyle属性 style="color: red;" 1000点 ID #hoge …
画像のサイズを変更したい
mgタグに対してwidthやheightを登録するとサイズの指定が可能です。img{
width:200px
}などです。
上記の場合だと、全ての画像のサイズが変わってしまうので
imgタグに対してクラス名などをつけてあげると良いかもしれません。<img class=“aaa”>
.aaa{
width:200px
}
要素の表示・非表示を切り替える際のプロパティ
要素の表示・非表示を切り替える際のプロパティで、
display: none;
visibility: hidden;
opacity: 0;
これらの違いがよく分かっていません。
どのような使い分けをすればよいでしょうか？
→display:noneは要素ごと無くなる（htmlもなくなる）イメージで
visibility、opacityに関しては透明度0になり、見えなくなるイメージです。（非表
background-size: cover;とobject-fit; cover;の違いを教えていただけると嬉しいです。
見出し1～4のある、背景がカラーカードの部分の質問です。
背景の画像の配置ですが、
background-size: cover;
と
object-fit; cover;
の違いを教えていただけると嬉しいです。
→background-size:coverもobject-fit:coverも同様の表現を行うことができます。
違いは、background-sizeは背景画像に対しての指定になる、
同じページ内のリンクのテキスト色が異なる場合の設定について
ヘッダーのナビメニューは黒、フッターのナビメニューは白、といったようにリンク色が異なる場合、効率のよい書き方はありますか？
リンクが出てくる度に、毎回それぞれのセレクタに対して↓のような感じで設定しているのですが、
.contact-btn:link,.contact-btn:visited,.contact-btn:hover,.contact-btn:active { color: #ff
img要素のalt属性の使い方について
今回カンプの「シューズキットの魅力」と「お客様の声」で配置した画像のalt属性に何とつけようか迷いました。
サンプルコードでは省略されているようでしたが、画像の説明が難しい場合はこちら省略してもよいのでしょうか？
また、今回のファストシューズ・Familyで楽しむ・プレゼントの３枚と、お客様の声の２枚に対して、先生だったらどのように書かれるか、一例で構いませんのでご教示いただけますとありがたいです
右側に余白で出来てしまう
今回の課題で渡されたカンプの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ファイルを開き、パーツの切り出しを行う段階です。切り出したいパーツをクリックしても左側にフォルダがでてきません。
画面左下のボタンの、選択を変えるとうまくいくとおもいます！四角が二つ重なっているところを選択してみてください！よろしくお願いいたします。
課題の提出について
どちらでも構いませんよ！
ご自身でしっかりと理解していただいて課題をご提出していただければ問題ありません！
よろしくお願いいたします。
index.htmlの冒頭の ですが、rel="stylesheet" 、 type="text/css" は、どういった意味(機能)になりますでしょうか？
linkの部分は他のファイルとの紐付けになります。
具体的に今回の場合だとcssファイルとHTMLファイルを紐づける、という意味になります。
（これで、書いたCSSが反映されるようになります。）
relやtypeは基本的にCSSを紐付ける時の決まり文句だと思っていただいて構いません。書かなくても動きますが、分かりやすく明示するために記入をしています。（seo対策にも非常に有効です。）
よろしくお願