カテゴリー: CSS

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

Webインスペクタをオンに

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

1, iPhoneをMacにコネクタで接続、MacでSafari起動

まずiPhoneとMacをコネクタで接続します。
iPhone上でデベロッパーツールを使うと書きましたが、厳密には「iPhoneで確認しながらMacでデベロッパーツールを操作する」といった感じです。Safariではデベロッパーツールのことを「Webインスペクタ」と言います。Webインスペクタを使うのにMacのSafariを起動しておきます。

2, iPhoneのWebインスペクタを設定

デフォルトの設定ではiPhoneのWebインスペクタの設定はオフになっていますので、それをオンにします。
iPhoneの「設定」から「Safari」を選択。

Safariを選択

「Safari」の中の「詳細」を選択。

「Safari」の中の「詳細」を選択

「詳細」の中にある「Webインスペクタ」をオンにしてください。

Webインスペクタをオンに

「詳細」の中にある「Webインスペクタ」をオンにしてください。
これで設定は完了です。

3, MacのSafariからデバイスを選択

iPhoneの設定が完了したら、iPhoneのSafariでチェックしたいページを開きます。
開いた状態でMacのSafariのメニューから「開発」をクリックします(あらかじめ環境設定で「メニューバーに”開発”メニューを表示」にチェックを入れておいてください)

MacのSafariの設定

すると現在接続されているiPhone名が表示され、その中にiPhoneのSafariで開いているページのURLが表示されているはずです(iPhoneのSafariで別ウィンドウがある場合、それも一覧で表示されます)

4, デベロッパーツール(Webインスペクタ)起動

URLの中からチェックしたいページのURLをクリックするとWebインスペクタが起動します。

Webインスペクタ

ソースにカーソルを合わせるとiPhoneでも対象の要素が選択されます。

Webインスペクタ

Webインスペクタ

一個残念なのが要素のMacと違って要素から選択が出来ないということ、一つ一つ折りたたまれたソースを開けていくのはちょっと面倒。

でもこれでiPhoneでのCSSの調整や修正がかなり効率的になるのではないでしょうか。

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「calc関数」でぴったりに

上の3分割を例にcalc関数を使って書くと以下のようになります。

100%の部分は、pxなど固定の値でも計算してくれます。

また演算子は複数書けるので、例えば「7カラムで、それぞれボーダー8px分だけ小さい幅にする」といったとちょっと複雑なことも以下のように書くことが出来ます。

注意点

calc関数を書く上で気をつけないといけないのが、演算子の前後には必ず半角スペースを入れてください。

また使うことの出来る演算子は以下になります。

+ 加算
 – 減算
 * 乗算
 / 除算

ベンダープレフィックス

IE8以下とAndroid 4.3以下の標準ブラウザではcalc関数は使えないので、以下のような書き方をしておくと安心かもしれません。

今回、widthだけ紹介しましたが、marginやpadding、background-positionなどでも使うことが出来ます。それぞれ状況に合わせて試しに使ってみてください。

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

CSSで正方形を作る

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

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

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

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

CSSで正方形を作って並べる

それでは実際に書いていきます。

デモ

HTML

ポイントとしてはリストの中にspanを書いていることです。具体的な説明は後ほどします。

CSS

【3〜8行目 ul】
等間隔に並べるためなので正方形にするのに必要はありません。

【20、21行目 li】
heightはデフォルトでもautoである必要があります。
positionは後にspanのabsoluteに関係します。

【24〜28行目 li:before】
27行目のpadding-top: 100%が正方形になります。paddingは%で指定した場合、width の値を基準にします。今回の場合、liで指定したwidthが基準になります。

【32〜37行目 li span】
padding-top: 100%にすると擬似要素がすべてpaddingで埋まってしまいます。そこでabsoluteでそれを回避します。

【49行目以降】
49行目以降は画像を縦中央に配置するための処置です。table-cell+vertical-align:middleでも縦中央配置になりますのが、その方法だとdiv(もしくはspan)がもう一階層増え、個人的に好きじゃないのでこの方法で書きました。ここは完全に好みです(笑)

以上、正方形にして並べる方法でした。

スクロールしている時の背景画像にパララックス効果を加える方法

jquery

最近よく見かけるスクロールしていくと固定された背景画像が変わっていくページを作ってみました。最近よく見かける割に、すごい新しい手法を使って作ったわけではないので、工夫次第で、今ある技術でもっといろんな表現が出来るかもなぁと再確認しました。

作り方は完全に我流なので、こういう作り方の方がスマートっていうやり方があれば是非とも教えてください。

デモ

HTMLとCSSを準備

HTMLとCSSを準備します。
流れとしては最初の段階ではbodyにbackground-imageで「01.jpg」を表示させておき、スクロールしていって、クラス[bg02][bg03][bg04]を追加していき、backgroundを上書きするやり方になります。[background-attachment]プロパティでスクロールした時に背景画像を固定するかどうかを指定出来ます。

HTML

CSS

jQueryを準備

jQueryではそれぞれ必要な高さを取得して、背景画像を切り替えたい高さにきた時に、設定したクラスが追加されるようにしています。

少しでも参考になれば幸いです。