作者別: saito

CSSで字詰めの調整をしよう!

デザインをする上で字詰めって大事ですよね。
でもWebページのテキストは、ブラウザの仕様で調整出来ないから諦めていたり…。
そんなことはないでしょうか?

字詰め

実は、CSSに字詰めのプロパティ「font-feature-settings」があります。
使い方は簡単で、「font-feature-settings : “palt”;」を指定するだけです。

    .kerning_sample{
        font-feature-settings : "palt";
    }

注)メイリオは、プロポーショナルメトリクスを含まないため変わりません。

 
例えばデフォルトだとこのような表示だったのが

デフォルト
カーニングとは、文字同士の間隔(アキ)を調整する技法のこと

 
font-feature-settings:”palt”;の指定をすると全体が引き締まった感じになります。

font-feature-settings:”palt”;の指定
カーニングとは、文字同士の間隔(アキ)を調整する技法のこと

 
場合によっては窮屈な感じがするので、「letter-spacing」を使って調整しましょう。

    .kerning_sample.spacing_sample{
        font-feature-settings : "palt";
        letter-spacing:2px
    }
font-feature-settings:”palt”;とletter-spacingの指定
カーニングとは、文字同士の間隔(アキ)を調整する技法のこと

デフォルトと比べて、カッコや句読点の間などが整ってると思います。
各ブラウザの対応もいつの間にか整っていました。
各ブラウザの対応状況

両端揃え

字詰めのプロパティ「font-feature-settings」を使ってブログの本文や説明文などの右端がガタついて気になった場合は、「text-align:justify;」を使ってみるのもいいかもしれません。
デフォルトだと右端がガタついていますが。

デフォルト
カーニング(英語: kerning)とは、主に欧文の組版において、プロポーショナルフォントの文字同士の間隔(アキ)を調整する技法のこと。カーニングを行わない場合は文字の間に不自然な空白を招いてしまう一方、適切にカーニングが施されたフォントでは字面間の空白の面積はほぼ均等になる。
DTPが普及した現在は組版ソフト上で行われることが多いが、以前は活字に特殊な処理を行うか、切り貼りによる文字詰め(もじつめ)と読ばれる作業が必要であった[1]。現在ではこの語や詰め文字(つめもじ)という語をカーニングの訳語として用いることもあるが[2]、カーニングと文字詰めを厳密に区別することもある[注 1]。英語では、活字を加工する工程の呼び名から派生して mortising と呼ばれることもある(原義:くり抜くこと、ほぞ穴を開けること)[4]。
引用 – Wikipedia

 
「text-align:justify;」を使うと右端がそろうと思います。

text-align:justify;とfont-feature-settings:”palt”;の指定
カーニング(英語: kerning)とは、主に欧文の組版において、プロポーショナルフォントの文字同士の間隔(アキ)を調整する技法のこと。カーニングを行わない場合は文字の間に不自然な空白を招いてしまう一方、適切にカーニングが施されたフォントでは字面間の空白の面積はほぼ均等になる。
DTPが普及した現在は組版ソフト上で行われることが多いが、以前は活字に特殊な処理を行うか、切り貼りによる文字詰め(もじつめ)と読ばれる作業が必要であった[1]。現在ではこの語や詰め文字(つめもじ)という語をカーニングの訳語として用いることもあるが[2]、カーニングと文字詰めを厳密に区別することもある[注 1]。英語では、活字を加工する工程の呼び名から派生して mortising と呼ばれることもある(原義:くり抜くこと、ほぞ穴を開けること)[4]。
引用 – Wikipedia

 
毎回、字詰めの調整や確認は大変ですが、この方法だと以外に簡単にできるかもしれません。
Webコンテンツを作る際に役立てていただければ幸いです。
 
 


Instagramの投稿を埋め込むとiPhoneで表示が大きくなる場合の対処法

Instagramの投稿をブログやサイトに埋め込んだとき、iPhoneのsafariのみ表示が大きくなり、はみ出ていることはありませんか?
AndroidやPCだとちゃんと表示できているのに…。

対処前の表示

例えばこのようなイメージです。(2018/9/20時点)

何故か埋め込んだInstagramの投稿が記事幅からはみ出ています…。

 
投稿が大きくなってしまう原因は、位置情報が長く、さらに「日本語 英語」となっている場合のようです。

iPhoneのsafariのレンダリングが原因なのか、InstagramのCSSの指定が弱いのか、具体的なところは不明です。

 

対処方法

少々強引な対処方法となるのですが、表示されるInstagramのiframe「.instagram-media」に、下記のCSSを指定すると現象を回避できます。

@media screen and (max-width: 899px){
  .instagram-media{
    width:414px !important;
    max-width: 100% !important;
    min-width: initial !important;
  }
}

 
こちらの内容は、「@media screen and (max-width: 899px)」で幅900px未満のデバイスのみCSSが効くようにしています。
「414px」はiPhone XS MAXの横幅です。その指定のみだと、その幅以下のiPhoneでは大きすぎますので「max-width: 100% !important;」を指定しています。
「min-width: initial !important;」は、自動で生成される「min-width」の値が大きい場合があるので初期化しています。

 

対処後の表示

上記のCSSを指定した後の表示がこちらになります。
iPhoneでも通常の大きさで表示されるようになりました。

 
いかがでしょうか?
なかなかこのような表示崩れに出くわすことはないかもしれませんが、Instagramの投稿をブログなどに埋め込む場合の参考になれば幸いです。


Evernoteから、レイアウトが自由なMilanoteへ。

長年使ってきたEvernote。
ブログ記事をスクラップしたり、いいなと思ったデザインやコードを集めたり、いろんなものをEvernoteに詰め込んできました。

しかし、無料版の制限ができてから「変わりのものは無いものか」とモヤモヤしていました。
有料版に切り替えて使っていましたが、せっかくお金を使うなら、もっといいサービスは無いものかと…。

 

そこで、今回、使ってみようと思っているのは「Milanote」です。

 

「クリエイティブなEvernote」と呼ばれたり、「クリエイティブな仕事のためのメモアプリ」と呼ばれたりしています。
「Google」「Apple」「Facebook」などの企業で利用されているらしいです。

 

一度使ってみようと思い、登録してみました。
100ノートまでなら、無料で使えます。

登録は簡単で「Sign up for free」から、「名前」と「メールアドレス」と「パスワード」を入力して登録するだけです。

 

画面はすごいシンプルです。
左側にあるアイテムをドラッグ&ドロップして、ノートを増やしていきます。

基本は「Board」を追加してその中に、ノートを増やしていきます。
「Board」はフォルダのようなもので、何階層も作れそうです。(10階層以上作れました。)
それと、「Board」の広さも、無限に広がっていく感じでした。

 

オフィシャルの動画を見るとイメージが付きやすいかもしれません。

動画を見ても驚いたのですが、実際に操作してみると、その自由度と速さに感動してしまい、無制限の有料版に登録したくなりました。
(月払いだと、$12.5なので、ちょっとお悩みどころ…)

 

さらに、デフォルトでテンプレートがたくさんあり、「templates」から選ぶことができます。
その豊富さと整然とされた感じに圧倒されました。

 

[templates > Design > Design brief]

 

[templates > Marketing > Social media calendar]

美しいですね…。
これらのテンプレートがデフォルトで用意されており、ドラッグ&ドロップで好きな「Board」に設置できます。
こうやって、アイディアを綺麗にまとめることに、強いあこがれを持っているので、しばらく利用してみようと思っています。

 

いきなり、「Milanote」のみするのではなく、とりあえずのメモや記録は「Evernote」や「Google Keep」を使って記録して、それを「Milanote」に移して使うといろんなことがまとまりやすいのではないかと思っています。

 


CSS変数(CSSカスタムプロパティ)を使ってみよう!

CSSで変数が使えると話題になってから久しいですが、いつの間にか対応ブラウザが増えてきました。

IE11が未対応なので使いづらいのですが、そろそろ、CSS変数(CSSカスタムプロパティ)に目を通しておいたほうがいいかもしれませんね!

CSS変数(CSSカスタムプロパティ)の基本的な使い方

:root {
    --base-color: #ffff00;
}

.content {
    color: var(--base-color);
}

上の例のように変数の先頭に「–」(ハイフン2つ)を付けます。
これで、変数の定義がされます。

「:root」内に変数を定義することで、cssを読み込んだ全ての要素で変数が使えるようになります。

 

変数を呼び出す時には、var()関数を使います。
「color: var(–base-color);」のように、指定した変数を()の中に入れるだけです。

See the Pen css 変数(1) by naoto saito (@code_ns) on CodePen.

テキストが青色になりました。
基本的な使い方はとてもシンプルですね!

CSS変数とメディアクエリ

変数のみなら、Sassでもいい気がするのですが、動的に値が変わるのもcss変数を書くメリットです。

下記の例は、幅400pxで2カラムと4カラムを切り換えています。
(別ウィンドウで確認してください。)

See the Pen CSS 変数(2) by naoto saito (@code_ns) on CodePen.

JSでの操作

Sassと違い、CSS変数であれば、JavaScriptで値を取得したり、変更したりできます。
下記の例では青色に指定したテキストをJavaScriptで変数を変更し赤色に変更しています。

See the Pen CSS 変数(3) by naoto saito (@code_ns) on CodePen.

 

この例だとテキストの色を1箇所変えるだけなので、メリットは感じられないかもしれませんが、次のように変更箇所が何箇所も出てくる場合に便利さを感じられるかもしれません。
(Choose a theme colorの右のボックスで色の変更)

See the Pen Theming a site with CSS Custom Properties by Chris Coyier (@chriscoyier) on CodePen.

 

このように、もしIE11で使えるようになったら、CSSの管理やJavaScriptとの連携が、さらに簡単になりそうです。

 


CSS Grid Layout を使ってみよう!(基本編)


 
webページでレイアウトをするとき、今まではfloat、最近では、Frexboxを使ったりしているかと思いますが、「CSS Grid Layout」も今後導入を考えてもいいかもしれません。
まずは、簡単に3×3のマスを作ってみましょう!
 
.grid-containerにグリッドの要素を内包する要素として
「display: grid;」を記述します。

item1
item2
item3
item4
item5
item6
item7
item8
item9
.grid-container{
  display: grid;
  height: 300px;
}
.grid-item{
  background-color: #efefef;
  border: 1px solid #ddd;
}

このままだと、divタグが並んでるだけなので、.grid-itemにそれぞれ位置を追記します。

.item1 {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}
.item2 {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
}
.item3 {
  grid-column: 3 / 4;
  grid-row: 1 / 2;
}
.item4 {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}
.item5 {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
}
.item6 {
  grid-column: 3 / 4;
  grid-row: 2 / 3;
}
.item7 {
  grid-column: 1 / 2;
  grid-row: 3 / 4;
}
.item8 {
  grid-column: 2 / 3;
  grid-row: 3 / 4;
}
.item9 {
  grid-column: 3 / 4;
  grid-row: 3 / 4;
}

これで、要素が3x3に並んだと思います。

CSSが長くなりましたが、内容はほとんど共通でシンプルです。
「.grid-item」に指定してある、
grid-columnは横の開始点と終了点、
grid-rowは縦の開始点と終了点を指定しています。


ちなみに分割する線のことを「グリッドライン(grid line)」と呼んでいます。

アイテム間に余白を入れるgrid-gap

アイテム間に余白を入れたい場合があると思います。
その場合、親要素「.grid-container」に「grid-gap」を追記しましょう。

.grid-container{
  display: grid;
  grid-gap: 5px;
}

アイテム間に5pxの余白が出来たと思います。

共通のアイテムの幅と高さの指定

ここまでで、「item1」〜「item9」まで個々にアイテムの幅と高さを指定していましたが、共通の幅と高さである場合「grid-template-columns」「grid-template-rows」で省略できます。
grid-template-columnsで横幅の指定、grid-template-rowsで縦幅の指定ができます。

次のように書くと、「横幅が150px 100px 50px」「縦幅は150px 100px 50px」の縦横共通のアイテムができます。

.grid-container{
  display: grid;
  height: 300px;
  grid-gap: 5px;
  grid-template-columns: 150px 100px 50px;
  grid-template-rows: 150px 100px 50px;
}

「fr」という値について

さらに「1fr」「2fr」などの様に指定すると残りの長さを分割出来ます。

.grid-container{
  display: grid;
  height: 300px;
  grid-gap: 5px;

/*幅150px 残りの1/3 残りの2/3 のグリッド*/
  grid-template-columns: 150px 1fr 2fr;

/*高さ150px 残りの1/3 残りの2/3 のグリッド*/
  grid-template-rows: 150px 1fr 2fr;
}

個別のアイテムの大きさの変更

これらを応用すれば下記のようなレイアウトが出来ます。
(item4,item5の大きさを変更しています。)

item1
item2
item3
item4
item5
item6
item7
.grid-container{
  display: grid;
  height: 300px;
  grid-gap: 5px;

/*幅150px 残りの1/3 残りの2/3 のグリッド*/
  grid-template-columns: 150px 1fr 2fr;

/*高さ150px 残りの1/3 残りの2/3 のグリッド*/
  grid-template-rows: 150px 1fr 2fr;
}
.grid-item{
  background-color: #efefef;
  border: 1px solid #ddd;
}

/*「grid-template-columns」「grid-template-rows」で指定した以外の大きさのレイアウト*/
.item4 {
  grid-column: 1 / 3;
  grid-row: 2 / 3;
}
.item5 {
  grid-column: 3 / 4;
  grid-row: 2 / 4;
}

グリッドラインに名前

ちなみにグリッドラインに名前をつけることができます。
最初や最後、キーポイントとなるグリッドに名前を付けることで管理がしやすくなるかと思います。

.grid-container{
  display: grid;
  grid-gap: 5px;
  grid-template-columns: [c1] 150px [c2] 1fr [c3] 2fr [c4];
  grid-template-rows: [r1] 150px [r2] 1fr [r3] 2fr [r4];
}
.item1 {
  grid-column: c1 / c2;
  grid-row: r1 / r2;
}

spanキーワードを使う

グリッドラインの代わりにいくつ先のラインに伸ばすか記述する方法もあります。
下記の「grid-row」だとグリッドライン2から2つ目までという意味です。

.item5 {
  grid-column: 3 / 4;
  grid-row: 2 / span 2;
}

ここまでのサンプルです。

簡単にですが、CSS Grid Layoutの基本的な使い方をお伝えすることができたでしょうか??

グリッドの指定が独特ですので、「GRID GARDEN」というゲームを触りつつ、慣れてみるものありかもしれません。

対応ブラウザについて

https://caniuse.com/#feat=css-grid
Edgeも対応され、これから徐々にグリッドレイアウトのサイトが増えてくるかもしれませんね。

次回は、具体的レイアウトを元に使い方をお伝えしようと思います。