見やすいサイトづくりのための文章レイアウト ー 行間編 ー

Webサイトで行の高さといえば、CSSのline-heightで指定するアレのことですが、今回はその行の高さのおはなしです。
行の高さ1つで文章の可読性はもちろんのこと、サイトの雰囲気も変わってきます。
お客さんから「文字が見づらい」と言われた場合、まず考えてしまうのはフォントサイズかもしれませんが、行の高さの調整で解決することもあります。

タイトルで「行間」と書きましたが本当は「行の高さ(line-height)」です。行間の方がピンとくるかなと思って。すみません…。諸事情により「行間」と書いているところもありますが、お目こぼしください…。

続きを読む

サイトに埋め込んだGoogleマップの縮尺を変更&CSSでレスポンシブ対応する方法

Googleマップからコードを取得してサイトに埋め込もうとしたのですが、以前とコードの内容が変わっていてどこを変更すれば縮尺が変わるのか皆目見当がつかず…。
と困っていましたが、現在は簡単に縮尺変更ができるようになりました。やっとページの更新ができて一安心です。(2018年3月22日 更新)
以前は&z=17など、「&z」を頼りに縮尺を変更していたのですが、Googleマップ上で縮尺変更してからコードを取得しても反映されず困っていました。しかし!偉大な先人がいらっしゃって無事解決できました。
縮尺変更だけではなんなので、レスポンシブ対応の方法も一緒にメモします。

続きを読む

iOS9のSafariでスマホサイトが縮小表示されてしまって困った!

少し前にリリースしたレスポンシブ対応のサイトで、iOS9にアップデートしたSafariで閲覧すると表示が崩れてしまう事案が発生しました。
iOS8のSafariと、iOS9のChromeでも問題なく表示されていました。

調べたところ、同じような症状を解決したとの記事をすぐに見つけられて無事解決できたので取り急ぎメモ。

続きを読む

スマホサイト制作時の困った!iPhoneでフォントサイズが勝手に拡大されてしまうのを防ぐ方法。

メディアクエリを使ってコーディングをしていたのですが、iPhoneで見ると一部のフォントサイズが拡大されてしまう現象に遭遇。(SafariもChromeも)
しかも、画面が縦位置の時は何ともないのに、横位置で見たときだけ。
CSSをどういじってもダメで半べそになりながらも無事に解決したので、よろこびのエントリー。

続きを読む

  • Advertising
  •