2017-03-27

CSSで文字にボーダー(縁取り)をつけたい。

CSS HTML Design

Illustratorの線やPhothopのレイヤースタイルの境界線みたいに文字にボーダー(縁取り)をつける方法のメモ。
といっても、イラレの線やPhoshopの境界線みたいにバチッとした縁取りを付けるのは難しそうです。

1. text-stroke を使う方法

f:id:kikiki-kiki:20170327123709p:plain
text-stroke サポート状況

IE以外はそこそこサポートされてきてるっぽい。
プロパティには-webkit-のブレフィックスが現状では必要。(なぜかFirefoxも。-webkit-text-stroke ってプロパティ名？)

書き方

f:id:kikiki-kiki:20170327130903p:plain

/* width | color */
-webkit-text-stroke: 2px #000;

又は

-webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: #000;

ボーダー(縁取り)は文字の内側に付く
※ color: transparentにすれば文字部分を透過に出来ます

2. text-shadow を使う方法

text-shadowの構文は下記の様な感じです。

/* offset-x | offset-y | blur-radius | color */
text-shadow: 1px 1px 0 #000
/* color | offset-x | offset-y | blur-radius */
text-shadow: #000 1px 1px 0

このoffset-x | offset-y | blur-radius | colorのセットを「,」区切りで複数指定することが出来るので、上下左右にソリッドなtext-shadowを付けることで文字にボーダー(縁取り)を付けることができます。

書き方

f:id:kikiki-kiki:20170327141539p:plain

// 上
text-shadow: 2px 2px 0 #000,
             -2px 2px 0 #000,
             2px -2px 0 #000,
             -2px -2px 0 #000;
// 下
text-shadow: 2px 2px 1px #000,
             -2px 2px 1px #000,
             2px -2px 1px #000,
             -2px -2px 1px #000;

ボーダー(縁取り)は文字の外側に付く
※ color: transparentにしても文字部分はtext-shadowの色で塗りつぶされている

text-shadowはIE10+で効くようなので、こちらを使えばほぼ全てのブラウザで表示ができそうです。text-shadow サポート状況
※ 文字の大きさに対してoffsetの値が大きすぎるとフォントの周りがギザギザになってしまうので注意が必要です。
　
text-shadowの指定方法を工夫すれば太めの縁取りもできるみたいで、次のようなジェネレーターサービスを使うと簡単かもしれません。

CSS text-stroke generator (text-shadow hack)

まとめ

text-stroke は内側にラインが入る
text-shadow は外側にラインが入る

と覚えておけば良さそうです。
IEも10以上なら表示されるし、Illustratorの線やPhothopのレイヤースタイルの境界線に近いのはtext-shadowの方かなと思いました。
また、IEではtext-strokeが表示されないので少し表示が変わってしまいますが、text-strokeとtext-shadowと合わせて指定するとこもできます。
f:id:kikiki-kiki:20170327141750p:plain
両方サポートしているブラウザなら細かな表現ができそうですが、やはり限界があるように感じます。

デザインの形を完全に再現するのであれば、画像になりますがSVGを利用するなどする方が無難かなとも思います。

サンプル

See the Pen OUTLINE TEXT Test by KIKIKI (@chaika-design) on CodePen.

[参考]

はじめてのCSS設計フロントエンドエンジニアが教えるメンテナブルなCSS設計手法 (WEB Engineer’s Books)

作者: 田辺丈士,大江遼,藤岡龍太,安光太郎,株式会社アイ・エム・ジェイ
出版社/メーカー: 翔泳社
発売日: 2017/03/14
メディア: 単行本（ソフトカバー）
この商品を含むブログを見る

2017-03-26

CSS 100%幅の子要素にネガティブマージンを使うと右側だけはみ出して横スクロールが表示されてしまう

CSS HTML Responsive

所謂Bootstrapの.row・.col-で使われているような親要素が左右のネガティブマージンを持ち子要素がfloatを使ったカラムレイアウトを100%の画面に入れた時に右側だけが100%のブラウザサイズからはみ出して横スクロールが表示される現象に遭遇しました。

横スクロールが発生する例

HTML

<div class="container">
  <div class="row">
    <div class="col col-half">
      <div class="content">content</div>
    </div>
    <div class="col col-half">
      <div class="content">content</div>
    </div>
  </div>
</div>

CSS (stylus表記)

*
  box-sizing: border-box
.container
  width: 100%
.row
  margin-left: -15px
  margin-right: -15px
  .col
    float: left
    padding-left: 15px
    padding-right: 15px
  .col-half
    width: 50%

f:id:kikiki-kiki:20170325212944p:plain
こんな風に横スクロールが発生してしまいます。

解決方法1 ネガディブマージンを持つ要素の親にパディングを持たせる

Bootstrapをよくよく観察していると、ネガティブマージンを持つ.rowの親要素には必ずネガティブマージン分のパディングを持つ要素がある事に気が付きました。親要素にパティングを持たせておくことでウィンドウサイズからはみ出さないようにしているようです。

HTML

<div class="container">
  <div class="wrap">
    <div class="row">
      <div class="col col-half">
        <div class="content">content</div>
      </div>
      <div class="col col-half">
        <div class="content">content</div>
      </div>
    </div>
  </div>
</div>

CSS

.wrap
  padding-left: 15px
  padding-right: 15px

ネガティブマージンを持つ要素を囲み、囲った要素にネガティブマージン分のパディングをもたせればOKです。
f:id:kikiki-kiki:20170325223024p:plain
横スクロールは発生しませんが、.contentは.colの持つパディング分左右が小さくなります。
border-boxを使っているこの状態なら下記のような.rowに初めからネガティブマージンを持たせないものと同じ結果です。

*
  box-sizing: border-box
.container
  width: 100%
.row
  .col
    float: left
    padding-left: 15px
    padding-right: 15px
  .col-half
    width: 50%

解決方法2 ネガティブマージンを持つ要素の親にoverflow: hiddenを設定する

.colの持つパディング分を画面外に出し、.contentを画面の端一杯にしたいときは、ネガティブマージンをもつ.rowの親に幅指定と共にoverflow: hiddenを設定すればOKです。
HTML

<div class="container">
  <div class="row">
    <div class="col col-half">
      <div class="content">content</div>
    </div>
    <div class="col col-half">
      <div class="content">content</div>
    </div>
  </div>
</div>

CSS

*
  box-sizing: border-box
.container
  width: 100%
    overflow: hidden // <- 追加
.row
  margin-left: -15px
  margin-right: -15px
  .col
    float: left
    padding-left: 15px
    padding-right: 15px
  .col-half
    width: 50%

f:id:kikiki-kiki:20170325223042p:plain
図のように画面端から.contentのエリアになります。
overflow: hiddenを使用するのであまり上のレイヤーの要素にこの設定をしてしまうと他のデザインで苦労する自体が発生しかねないので注意が必要です。
　
しばらくCSSとか書いてなかったので予期しないレベルダウンを感じています…
今までこんな所に躓いたこと無かった気が…

ITがメインではない仕事に就いている(正確には仕事がない)とドンドンレベルダウンしていっているのを身にしみて感じていて、今迄できていたような事がカンタンに出来なくなるってのが凄まじいストレスと自己嫌悪になるので、都会に引越ししてエンジニア的なお仕事に再就職したい今日この頃なのでした…

[参考]

はじめてのCSS設計フロントエンドエンジニアが教えるメンテナブルなCSS設計手法 (WEB Engineer’s Books)

作者: 田辺丈士,大江遼,藤岡龍太,安光太郎,株式会社アイ・エム・ジェイ
出版社/メーカー: 翔泳社
発売日: 2017/03/14
メディア: 単行本（ソフトカバー）
この商品を含むブログを見る

2017-03-24

Google スプレッドシート nヵ月前の日付をチェックしたい

Google Drive Spreadsheet

例えば、下記のような期限日が入力されているシートで期限まで3ヵ月切っているセルをハイライトしたいような時のメモ。

	A	B
1	案内日	期限(6ヵ月後月末)
2	2016/07/07	2017/01/31
3	2016/08/07	2017/02/28
4	2016/09/10	2017/03/31
5	2016/10/06	2017/04/30
6	2016/11/04	2017/05/31
7	2016/12/05	2017/06/30
8	2017/01/05	2017/07/31
9	2017/02/03	2017/08/31
10	2017/03/07	2017/09/30