Nakkan Base

投稿記事一覧

bxSlider

htmlサイトにスライダーを設置するのに、「何か簡単な方法はないか?」と検索し、以下のサイトさんを見つけました。

画像が自動的に切り替わる「スライドショー」を表示する方法

本当に、気が抜けるくらい簡単すぎました。

ところが、です!

ちゃんとスライドはするのですが、例によってサーバーにアップした途端、スマホでの表示に問題が。

最初の訪問で画像が表示されないのです!

きっと画像を読み込むのに手間取ってるんだろうけど、リロードしてやっと正常表示って…。

ダメダメ、やってられない。

そこから丸一日苦戦して、(また色々勉強できたけど) やっとスマホでも思い通りに表示してくれるようになりました。

無駄だったけど、一応試したことを覚書しておこうと思う。

font-familyのこと

font-familyって、何気なく見過ごしていませんか?

Google Fontsを使わずにちょっと違った書体を使いたい時、はたと「他にどんなフォントが指定できるんだろう?」と思って調べてみました。

以下のサイトさんにありました。

font-family

すごく詳しくわかりやすくまとめてくださっています。

こんなにあるんだなぁ。

ただ、実際にサイトを表示した場合、あんまり代わり映えしないというのが本音です。

やっぱり「ここぞ」と魅せたい時にはロゴを使うべきですね。

<wbr>が効かない問題

<wbr>は、デザイン上必要になることも多い。

なのに全然効いてくれない(泣)

そんな時どうすればいいか。

<span></span>を使うんだって。

=html=
<div><span>テキスト1</span><span>テキスト2</span></div>
=css=
div span{  display: inline-block;   white-space: nowrap; }

<wbr>を使わずに、改行するならここでして欲しい指定の仕方。

htmlコードをチェックする

一応ちゃんと表示はされるけれど、やっぱりチェックは必要。

そんな時は、The W3C Markup Validation (W3Cマークアップ検証サービス)が超便利です。

</div>や</li>などのタグの閉じ忘れという基本的なことから、要素の属性がどうのxmlnsがこうのと、私にはチンプンカンプンなことまで弾き出してくれます。それを一個一個解決していく。

面倒だけど、精神的に焦っていない時は、色々と勉強できて有意義です。

W3C検証結果
「チェックは完璧です。エラーも警告も見つかりませんでした」と出れば、超ハッピー♪