質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.04%

WEBフォントの空白対策

解決済

回答 2

投稿

  • 評価
  • クリップ 1
  • VIEW 1,332
退会済みユーザー

退会済みユーザー

Mono Social Icons Fontを使って、グローバルナビを作ったのですが、下記のように上部にこのWEBフォント特融の空白が空きます。
上下の青い線が、ボックスの境目です。

イメージ説明
レスポンシブで作っているのですが、空白が何PXかもわかりませんし、そもそも固定された空白なので%に出来ません。


レスポンシブはすべて%にしなくてはならないという方もいますが、現場ではどう考えていますか?

PX固定でもブラウザのサイズを一通りPCで変えて、別にこの部分は問題ないという場合も有ると思いますが、やはり、すべて%にこだわるのがプロでしょうか?


  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

checkベストアンサー

0

レスポンシブで強く意識するのは横幅であることが多いと思いますが、グロナビということなので、ざっくりとはPC用は画面上部に細めで、スマホは画面下部にやや太めで設置するようなケースでしょうか。

定義にもよりますが、ある程度の妥協込みでも納期に間に合わせることを重視するのもプロだと思いますので、たしかにWebフォントアイコンは、その文字(アイコン)ごとに高さや縦位置が違う場合には個々にline-heightやfont-sizeで調整しちゃいますね。

もし、クオリティ重視のプロという観点が見た目は当然として、シンプルなソースで柔軟に対応可能なレスポンシブということなら、ここからは案ですが「%」ではなく「vw」「vh」「rem」などの絶対値になる単位ですべてを統一して、絶対値ではあるんだけどbody等を基準として、それ以外はその基準からの相対値で数字を決めていけば、Webフォントの今回のようなケースにも対応できる可能性はあります。

若干解釈が曖昧ですが、たしかline-heightの%とheightの%とでは100%基準の基準が違ったかと思います。
*heightは親要素のheightに対しての%で、line-heightはfont-sizeの%だったような。。。

ただし、ieの古いバージョンやAndroidでは「vw」「vh」が効かないか解釈がおかしかったり色々トラブルの元なのでオススメはできません(^^;

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/08/20 15:55

    > 下記の認識でよろしいでしょうか?
    > *%は親要素の何%かに対して上記はビューポートに対して、(表示画面に対して)何%と計算する。
    > 1VWは、画面サイズの1%となる。

    おそらく正しく理解されているように思われます。
    ただ、ちょっと乱暴すぎたので、もう少し補足しておきますと「vw」「vh」はline-heightには使えません。たしか。
    なので「rem」も併用するか、すべてを「rem」としておいた上で、JavaScriptの初期処理でビューポートからhtml要素のfont-sizeを決めるといったことも必要です。

    2年以上前、かつiOSとモダンブラウザのみのパイロット版実装で、(そのときはremではなく)emと、JavaScript併用で、かなり複雑なレイアウトを縦横可変にしたことがあります。

    キャンセル

  • 2015/08/20 20:13

    ハイレベルですね。参考先を後ほどはいけんさせていただきます。
    ありがとうございます。

    キャンセル

  • 2015/08/24 17:27

    リンク先を見ました。

    ine-height: 0.8;/* メインイメージとの行間 */を下記のようにした所、行間がなくなり、アイコンの上下の隙間がなくなりました。
    ine-height: 0.5;/* メインイメージとの行間 */

    .top-gnav__top-ul li {
    display: inline-block;
    width: 18.7%;
    line-height: 0.5;/* メインイメージとの行間 */
    text-align: center;
    }

    ありがとうございます。

    ただ、新たな問題が発生しました。
    上部の隙間は、マージンなどで調整すればよいと思いますが、
    アイコンとotherという文字の間も、行間がなくなってしまいました。
    原理としては当たり前なのはわかりましたが、下部だけ隙間を作るには、ラインハイトは無しにして、アイコンにマージンをつけて、隙間を空ければよいのですね。

    キャンセル

0

1. フォントをダウンロードして置く。

2. CSSでフォントファミリを登録する。

@font-face {
    font-family: -regular;
    src: url('Mono Social Icons-regular.ttf') format("Mono Social Icons");
}
3. 各要素でフォントファミリを指定する。

<h1 style="font-family: Mono Social Icons-regular;">SAMPLE TEXT</h1>
だけ。


IE対応

IEはいつもの様に特殊でフォントの形式を MS 独自の EOT にしなければいけない。 そのかわり IE6 でも使える。
TTF->EOT 変換は以下のサービスでできる。

http://ttf2eot.sebastiankippe.com/
その他

日本語のTTFファイルは小さくても 1MByte 程度あるので回線が細いと重い。 2回目以降はキャッシュが効く。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.04%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る