カテゴリー: CSS

Google Maps APIを使って住所を出さないで地図を表示させる方法

Google map api

Google Map をホームページに埋め込む方法は大きく2つの方法があります。
まず最初は地名、建物名、住所を検索して「共有」ボタンから共有する方法です。

地図を共有する

こちらのやり方がもっとも簡単な方法です。
ただこちらのやり方では細かい設定を変更することが出来ません。

例えば、

  • マーカーを表示させない
  • 住所を見える位置に表示させない

などなど、細かく設定を変えてGoogle Mapを埋め込みたい時に使うのがGoogle Maps APIです。Google Maps APIは緯度、経度の値をもとにGoogle Map上にマーカーを配置することが出来るので、例えば住所のわからない地点にもマーカーを置くことが出来ます。

そこでGoogle Maps APIを使って地図の表示、マーカーを配置する方法をご紹介します。
完成はこんな感じです。

続きを読む

iPhoneでデベロッパーツール(Webインスペクタ)を使う方法

Webインスペクタをオンに

ホームページのコーディングをする時、表示が崩れている箇所をすぐにチェック出来るデベロッパーツール。どこがおかしいのか簡単にチェック出来る上、CSSをブラウザ上で修正、コンソールなども確認出来る便利なツールですが、iPhone上でもこのデベロッパーツールを使うことが出来るのでその方法を紹介します。

続きを読む

CSSで下線じゃなくマーカー風にテキストをハイライトする方法

テキストを目立たせたい時、よく文字サイズや文字色を変えたり、下線を付けたりします。
リアルの紙の場合、よく蛍光マーカーで色を付けたりしますが、あれをborderでは再現できません。

以前はbackground-imageを使って専用の画像を作っていましたが、CSS3の「linear-gradient属性」を使うことで、画像を使わずCSSだけで見せることが出来るので紹介します。

蛍光ペンでマーキングしたように見せることが出来る「linear-gradient属性」

transparentのパーセントを変えることで下半分だけマークすることも出来ます。

CSSで3カラムや7カラムなどの横幅をぴったりにできる「calc関数」

レスポンシブデザインはもはや当たり前になっている今日このごろ。
皆がスマホを使っている今の時代。どんなサイトでもスマホから見られる可能性はあります。
どんなにあなたのサイトのターゲットとしているトラフィックがデスクトップからであったとしても、スマホからのアクセスを無視していいわけありません。

これからホームページを作る場合、余程の理由がない限り、レスポンシブ、スマホ対応にするべきでしょう。

さて、そのレスポンシブで作る時、たまに遭遇する「3」や「7」といった割り切れない値のコンテンツを横に並べる時。今までだと例えばカラムが「3」の場合、

と書いていました。
ただこれだと1%余り、場合によっては1pxぐらい空白が出来たりします。
table-cellという方法もありますが、flexboxを使いたい場合はtable-cellは使えません。

そこでCSS上で計算式を書けるcalc関数が便利なのでご紹介します。
続きを読む

CSSで高さを固定せずli(div)を正方形にして並べる方法

CSSで正方形を作る

写真をきれいに並べたい時は、僕はスクエア型(正方形)の枠を作って並べる時があります。

理由は縦長の画像と横長の画像が混在している時、段違いになってずれたりするからです。

普通、CSSで正方形にしようと思ったら横幅と高さを固定にしないといけません。レスポンシブみたいに横幅が変わったする時、高さを固定にしていると正方形じゃなくなってしまいます。

「高さ=横幅」みたいな感じで一行でかけるCSSが存在してたら楽なんですが、今のとこそのような書き方は無いので、ちょっと複雑ですがレスポンシブタイプで正方形を並べる方法をご紹介します。

続きを読む