今すぐ使える!CSSレシピブック

メディアクエリなしのレスポンシブ

アイテム
アイテム
アイテム
アイテム
アイテム
<div class="grid">
  <div class="column"><div>アイテム</div></div>
  <div class="column"><div>アイテム</div></div>
  <div class="column"><div>アイテム</div></div>
  <div class="column"><div>アイテム</div></div>
  <div class="column"><div>アイテム</div></div>
</div>
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  grid-gap: 22px 20px;
}
.column {
  padding: 1em;
  background-color: #f4f2f0;
}

ぶら下げインデント

あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。
<div class="text">あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。</div>
<div class="text">あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。</div>
.text {
  display: table;
  width: 100%;
}
.text::before {
  display: table-cell;
  padding-right: .2em;
  content: '※';
}

文字の省略

あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。またそのなかでいっしょになったたくさんのひとたち、ファゼーロとロザーロ、羊飼のミーロや、顔の赤いこどもたち、地主のテーモ、山猫博士のボーガント・デストゥパーゴなど、いまこの暗い巨きな石の建物のなかで考えていると、みんなむかし風のなつかしい青い幻燈のように思われます。
<div class="text2">あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。またそのなかでいっしょになったたくさんのひとたち、ファゼーロとロザーロ、羊飼のミーロや、顔の赤いこどもたち、地主のテーモ、山猫博士のボーガント・デストゥパーゴなど、いまこの暗い巨きな石の建物のなかで考えていると、みんなむかし風のなつかしい青い幻燈のように思われます。</div>
.text2 {
  position: relative;
  height: 5.25em;
  line-height: 1.75;
  overflow: hidden;
}
.text2::before {
  position: absolute;
  right: 0;
  bottom: 0;
  content: '...';
  background-color: #fff;
}
.text2::after {
  position: absolute;
  width: 100%;
  height: 100%;
  content: '';
  background-color: #fff;
}

●●●●



境界で色が変わる文字

あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら。
<div class="container3">
<div class="text3" data-text="あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら。">
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら。
</div>
</div>
.text3 {
  position: relative;
  margin: auto;
  width: 50%;
  color: #13548d;
  font-size: 2em;
}
.text3::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  content: attr(data-text);
  color: #fff;
  clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);
}

●●●●



●●●●



●●●●



●●●●



●●●●



		

この投稿へのコメント

コメントはありません。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

この投稿へのトラックバック

トラックバックはありません。

トラックバック URL