はてなブックマーク

Flexboxはスマートフォン用のCSSに適用させる レスポンシブサイトを作る時に便利なFlexbox・・・非常に使い勝手がいいものの、IEなどの一部のブラウザでは対応していないものもいくつかあるので、なかなか使う事ができません。 早く対応するブラウザばかりになってもらいたいものですが、古いOSを使い続ける方がいたり、どうしても前のバージョンのブラウザを使わなければいけない理由があったりと、古いものや対応しきれていないものを切り替えるタイミングが難しいものです。 そうした状況の中で、Flexboxはなかなか使う事ができないなぁと思っていました。以前までは。 CSS3に完全対応していない環境になっているものはさすがに移行できませんが、スマートフォンであれば多くの端末でCSS3に対応したブラウザがインストールされています。 スマートフォン向けのWebサイトなら「Flexboxが使える」という事

br要素を使った改行には問題がたくさん PCページの時はbr要素を使った改行をCSSのdisplay:none;で消したりはしませんが、レスポンシブWEBデザインで作成したページの場合、PCで見た時とスマートフォンで見た時の改行位置を変えたい！なんて思う事もあるはずです。 そんな時にはbr要素をCSSを使って、非表示にすることで改行を無くして対応します。 CSSを一行書いただけでカンタンに対応できる！！と思っている方・・・ 残念ながらそれは間違いです。 意外な動作をするので、もう少し対策が必要になります。 主に出てくる不具合は「br要素の次に来る言葉の前に半角スペースが生まれてしまう」という点です。 この原因と対策についてお話していきます。 半角スペースが生まれてしまうHTML構造 こんな構造になっている場合、br要素を消す事で半角スペースが生まれてしまいます・・・ <p>アテンドがお手伝

IE8以前をサポートする1.X系、IE9以降をサポートする2.X系 jQueryを使った画像スライダーを入れたり、クリックで画像を拡大させたり・・・ホームページに動きを付けたい時に必須となる「jQuery.js」 1.6.8とか2.1.4とか・・・色々なバージョンを目にしませんか？ 1.9.9の次が2.0.0とか、そんな風に連番でバージョンアップしているわけではありません・・・1.12とかもありますし。 それではこれらの違いは何なの？と思いますよね。 jQuery1.X系でも2.Xでもスライダーやその他もちゃんと動くので余計わかりにくいですね。 細かく出すと訳がわからなくなりそうなので、最大の違いを一つ挙げましょう。 それはIE8以前をサポートするかどうかという点です。 WindowsXPはIE8までしかインストールできないので、WindowsXPを切り捨てるような格好になりますね。 OS

GoogleMapのマイマップとは GoogleMapって便利ですよね。 建物名や住所を入れるだけでその位置にピンが立ち、場所を知らせてくれます。 またホームページにも埋め込むことができたり、リンクを知らせて共有できたりと本当に便利です。 そんな便利なGoogleMapにも困った事があります。 それは造成間もない住所を調べた時です・・・ 新しく住所が割り振られた場所や、詳細な番地などをGoogleMapで調べても、住所がまだ登録されていないのか、詳しい位置まで調べる事ができない事があります。 おおまかな地域までしか絞り込めず、困ってしまいますね・・・ そんな時に活躍するのがマイマップ！ 自分のGoogleアカウントでログインし、自分だけのマップを作成する事ができるので、調べても出てこない地図を作るのに効果的です。 マイマップで設置した地図の縮尺を調整してみる マイマップを設置するにあたって

表組みはレスポンシブWEBデザインでは難しい ホームページの制作でよく使われる表組み。価格表やお問い合わせフォームなど、表を使って配置したほうが見やすく、わかりやすいレイアウトにできる場面はよくありますよね？私もホームページを作っているときに表組みは便利なのでよく使います。 でも表の横幅をある程度取れないと、一つのブロックが狭くなってしまうので一行が短くなってしまいます。その影響で逆に見づらくなる、なんてことはありませんか？ 特に横幅の決まらないスマートフォン専用ページやレスポンシブWEBデザインで作られたページの場合、対応がなかなか難しく、悩まされるポイントです。 でも大丈夫です！CSSを使ってレイアウトを可変させることで、きちんと対応できる場合がほとんどです！！ これから表組みの作り方についてご紹介します。 表組みのHTMLはこんな具合に作られますよね。 th・td要素の中身が増えるほ