レスポンシブいるいるCSS

覚書！これからどんどん追加する！はず！
myデフォルトcssにするの目標！

要素の縦中央（個人的決定版）

あるある

• 縦中央ってホラやっぱ綺麗。
• TOPページのファーストビューには素敵な写真を背景にキャッチコピーをドンと載せるのが定番
• スマホでは中央寄せする要素の高さが変わるんだな。
• ぐぐったら色んな方法が出てくるけど、楽な方法がいい！

いるいる

なんと！中央寄せする要素をタグで括らなくても中央寄せ実現しちゃいます。コードは少ないほうがイイよね～
もちろん子要素に沢山詰め込んでも使えます。

html

<div class="parent">
  ご覧頂きありがとうございます。ご覧頂きありがとうございます。
</div>

親の高さ固定にしたい場合

flexさんの登場です。

css

.parent {
  height: 100px;
  display: flex;
  justify-content: center;/* 横中央揃えする場合はつける */
  align-items: center;
}

親の高さ任意にしたい場合

親要素の上下に同じ値のpaddingつけるという原始的な方法で。

css

.parent {
  padding-top: 3vw;
  padding-bottom: 3vw;
  text-align: center; /* 横中央揃えする場合はつける */
}

フォントサイズ指定

あるある

• スマホ時に全体のフォントサイズをちょっと小さくor大きくしたい時px指定じゃ不便
• 相対指定をしつつ何pxかを把握しながら書きたい
• emだと入れ子にして重ねがけしていくと全体のサイズを変えた時に、デザインおかしくなる（気がする）。

いるいる

• rem使う ※まだ試行錯誤中。

css

html {
  font-size:10px;
}
body {
  font-size: 1.4rem; /* 14px */
}
.xxx {
  font-size: 1.6rem; /* 16px */
}
@media screen and (max-width: 480px) {
  html {
    font-size: 9px;
  }
}

3点リーダー（…）で文章省略したい

あるある

• システムで長い文字入れられたらくずれますやん…
• 文章の抜粋は省略前提のデザインですか。
• 画面幅やフォントで省略の位置変わりますやん…
• js使うん、だるー ##いるいる ###1行省略

html

<span class="ellipsis1">aaaaaaaaaaaaaaaaaaaaaaaaaa</span>

css

/*1行省略*/
.ellipsis1 {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

複数行省略

html

<p class="ellipsis foooooo">
ご覧頂きありがとうございます。ご覧頂きありがとうございます。
ご覧頂きありがとうございます。ご覧頂きありがとうございます。
ご覧頂きありがとうございます。ご覧頂きありがとうございます。
ご覧頂きありがとうございます。ご覧頂きありがとうございます。
</p>

css

/*複数行clump
  ※ellipsisと一緒に、height,line-height,-webkit-line-clampを付けること
  例) height:3em; line-height:1em; -webkit-line-clamp: 3 ;　←3行で... */
.ellipsis {
  overflow: hidden ;
  display: -webkit-box ;
  -webkit-box-orient: vertical ;
  word-break: break-all ;
}
.foooooo {
  -webkit-line-clamp: 5;/*表示する行数*/
  line-height: 1.7;
  height: 8.5em;/*line-heightの値の行数倍*/
}

※非対応のブラウザあり…はよ対応してぇ

google map をレスポンシブ対応したい

あるある

• google mapの埋め込み、固定サイズやん…
• 横600pxとかで埋め込んだら、スマホでおかしなるやん…
• CSSのwidth変えてもきかんやん…可変にしたいやん…

いるいる

html

<div id="map">
    <!-- 埋め込みタグ -->
    <iframe src="https://www.google.com/maps/embed?ほにゃららら" width="600" height="600" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>

css

#map{
  position: relative;
  padding: 0 0 600px; /* bottom の値は任意 */
  height: 0;
  width: 100%; /* 値は任意 */
  overflow: hidden;
}
#map iframe{
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
}

google calendar をレスポンシブ対応したい

あるある

• 幅320pxのスマホで見たら横100%でもはみ出すやん！
• ググったらよく出てくるレスポンシブ対応方法(ラッパー要素の中にabsolute配置)だと…iPhoneでジワジワ縦に伸びる怪現象が…😫
• 皆さん、やり方紹介してくれるのはいいけど実機確認ヨロ！

いるいる

少しの妥協心でコードも見栄えもシンプルに
* そもそもカレンダーの高さを画面幅に追従させる必要もないので、高さをpx指定に。
* カレンダー上部のナビは無くても困らないものもあるので消そう。すると横幅が縮んでくれる。

html

<iframe src="https://calendar.google.com/calendar/embed?showDate=0&amp;showPrint=0&src=＜カレンダーURL＞&ctz=Asia%2FTokyo" style="border: 0" frameborder="0" scrolling="no"></iframe>

幅を画面に追従させるためにiframeのwidthとheight属性は消した。
URLパラメタに「showDate=0&showPrint=0」追記することで印刷ボタン・日付表示を消すことにした。
他の要素を消したい場合は、埋め込みコード取得画面でカスタマイズしてコードを取得。

css

iframe {
  width: 100%;
  height: 400px;
}
@media screen and (min-width:480px){
  iframe {
    height: 500px;
  }
}
@media screen and (min-width:768px){
  iframe {
    height: 600px;
  }
}

画面幅に応じて高さを調整する！