作ったもの、プログラミングで共有できそうなこと、IT関連でやってみたことなど、なんでも書いていきます。ヤドン可愛い

今日はデザイン周りを中心に進めていきました。

今日のまとめ

  • bootstrapとscssとhtmlをゴリゴリ書いていった
  • 拡張子に注意・・・

bootstrapが使えない・・・

色んなサイトを見ながらbootstrapのインストール手順を確認し、div class="container" などのスペルミスがないかも確認したのに、col-md-4などが反映されなかった・・・エラーメッセージは↓みたいなやつです。

Resource interpreted as Stylesheet but transferred with MIME type text/javascript:

cssではなくjavaScriptとして読み込まれてる感じ?うーん・・・ って思いながらメンターの方と1時間ほど相談してると、唐突にassets/stylesheets/application.cssについて、application.scssにすればいけるんじゃない?と言われました。 ハハハまさかそんなと思いながら拡張子を変えたら見事に通りました・・・すいません以降気をつけます(^^;)

サイズがわからない画像の縦横比を維持する

色んなWebサイトからたくさん画像を拾ってきて、一律の大きさで表示させようとしています。しかし、拾ってくる画像はどれも大きさが違う・・・200×200のブロックに縦横比は揃えて表示させたいと思ってました。

img{
  width: 200px; height: 200px;
  object-fit: contain;
}

object-fit: contain;でいけました。やったぜ。

参考:【CSS3】サイズがわからない画像の縦横比を維持したまま表示する方法【object-fit】

あとはかなり基本的なことをゴリゴリと記述していっただけの制作になりました・・・ただメンターさんには出来を褒められたのでモチベアップ↑

この記事へのコメント

まだコメントはありません