TechGardenSchool

TechGardenSchool

マガジン

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

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

  • webコーディングコース 中級編 質問集

    中級編 質問集です。

  • Webコーディングコース 基礎編 質問集

    Webコーディングコース

最近の記事

画像のサイズを変更したい

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になり、見えなくなるイメージです。(非表示のような)なので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;} リンクごとに毎回このように書いているので、もっと良い方法や書き方がある

        マガジン

        • コーディングコース 実践編 質問集
          16本
        • webコーディングコース 中級編 質問集
          23本
        • Webコーディングコース 基礎編 質問集
          31本

        記事

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

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

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

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

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

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

          代替フォントの決め方

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

          代替フォントの決め方

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

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

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

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

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

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

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

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

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

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

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

          教材について

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

          教材について

          画像のサイズについて

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

          画像のサイズについて

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

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

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

          課題の提出について

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

          課題の提出について

          index.htmlの冒頭の ですが、rel="stylesheet" 、 type="text/css" は、どういった意味(機能)になりますでしょうか?

          linkの部分は他のファイルとの紐付けになります。 具体的に今回の場合だとcssファイルとHTMLファイルを紐づける、という意味になります。 (これで、書いたCSSが反映されるようになります。) relやtypeは基本的にCSSを紐付ける時の決まり文句だと思っていただいて構いません。書かなくても動きますが、分かりやすく明示するために記入をしています。(seo対策にも非常に有効です。) よろしくお願いいたします。

          index.htmlの冒頭の ですが、rel="stylesheet" 、 type="text/css" は、どういった意味(機能)になりますでしょうか?