Daily HTML&CSS #004 画面のサイズによって変更させる

2018年12月13日 15:06

ファームノートでUXデザイナーをやっている秋山ウテです。

最終的にはReactでパーツ実装していくためにHTMLとCSSをやりたおそうというこの企画。

目次
justify-contentで揃え方を変える
画像の比率をそのままに画面サイズいっぱいに

justify-contentで揃え方を変える

この部分は左揃えですが、こんな感じでやってます。

.articleActionWrap {
  width: 100%;
  height: 40px;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

これを「justify-content: center」とすると中央揃えになったりします。

その他にも均等に揃えたりいろいろ便利なflexboxでございます。

画像の比率をそのままに画面サイズいっぱいに

画面のサイズによって画像を変えられないかと調べてたところ、こんな感じでやればいいことがわかりました。

.img {
  max-width: 100%;
  height: auto;
  text-align: center;
}

すると、こんな感じになります。

大変便利でございますね。

明日は、コードが洗練されていないので、磨いていきたいと思いますー

ではでは！

ちなみに、コードはこんな感じです。

.headerIcon {
  color: #acacac;
  margin: 8px 8px 8px 8px;
}

.articleIcon {
  color: #373942;
  margin: 8px 0px 8px 0px;
}

.actionIcon {
  color: #373942;
  margin: 8px 8px 8px 0px;
}

ul.headerWrap {
  width: 100%;
  height: 40px;
  background: #ffffff;
  border-bottom: 1px solid #f3f3f3;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

i:hover {
  color: #27ae60;
  text-shadow: #acacac 0px 0px 16px;
}

i {
  margin: 0px 0px 0px 8px;
  padding: auto;
}

div.left {
  position: absolute;
  left: 0;
}

div.right {
  position: absolute;
  right: 0;
}

.img {
  max-width: 100%;
  height: auto;
  text-align: center;
}

.article {
  align-items: center;
  border: 0 solid #000;
  box-sizing: border-box;
}

.articleHeader {
  width: 100%;
  height: 40px;
  background: #ffffff;
  border-bottom: 1px solid #f3f3f3;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.userNameAndAreaNameWrap {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  margin: 8px 8px 8px 8px;
}

.userName {
  font-size: 1vh;
  font-weight: bold;
  color: #373942;
  padding: auto;
}

.areaName {
  font-size: 1vh;
  color: #373942;
  padding: auto;
}

.articleActionWrap {
  width: 100%;
  height: 40px;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.likeCounter {
  font-size: 2vh;
  font-weight: bold;
  color: #373942;
  padding: auto;
  left: 0;
}

.myComment {
  font-size: 2vh;
  color: #373942;
  padding: auto;
  left: 0;
}

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
    <link rel="stylesheet" type="text/css" href="src/styles.css" />
    <link
      href="https://use.fontawesome.com/releases/v5.0.6/css/all.css"
      rel="stylesheet"
    />
  </head>
  <body>
    <nav>
      <ul class="headerWrap">
        <div class="left">
          <i class="fab fa-instagram fa-2x logo iconDefaultColor"></i>
        </div>
        <div class="right">
          <i class="fas fa-compass fa-lg headerIcon"></i>
          <i class="fas fa-heart fa-lg  headerIcon"></i>
          <i class="fas fa-user fa-lg  headerIcon"></i>
        </div>
      </ul>
    </nav>
    <article class="article">
      <header class="articleHeader">
        <i class="fas fa-user-circle fa-2x articleIcon"></i>
        <div class="userNameAndAreaNameWrap">
          <div class="userName">UserName</div>
          <div class="areaName">areaName</div>
        </div>
      </header>
      <img
        class="img"
        src="https://uploads.codesandbox.io/uploads/user/0f2ca779-46fd-45fc-b152-5f37e510b394/wRwe-eggRice.jpg"
        alt="たまごかけご飯"
        title="たまごかけご飯"
      />
      <div class="articleActionWrap">
        <i class="far fa-heart fa-lg actionIcon"></i>
        <i class="far fa-comment fa-lg actionIcon"></i>
        <i class="fas fa-retweet fa-lg actionIcon"></i>
      </div>
      <div class="likeCounter">いいね！ 2件</div>
      <div class="myComment">美味しいです。すごく美味しいです。</div>
    </article>
  </body>
</html>

このnoteを気に入っていただけたら、
「♡スキ」を押していただけると非常に嬉しいです。
より良いコンテンツを作っていく原動力になるのでぜひ！
リクエストもお待ちしているので、お気軽にコメントくださーい！

この記事が気に入ったらサポートをしてみませんか？