iPadやタブレットでPCサイトを見るとwidth:100%指定が崩れている!?

iPadやタブレットでサイトを表示させた時に、なぜか表示が崩れている…。

具体的にはサイトの右側に変に余白がある部分と、無い部分があったりして、キレイに表示されていない。

こんな状況に遭遇してしまった時の調整方法をご紹介します。

“iPadやタブレットでPCサイトを見るとwidth:100%指定が崩れている!?” の続きを読む

CSSでテキストを蛍光マーカーみたいに強調表示してみる

WEB上でテキストを強調する時には、文字色を変えたり文字を太くしたり下線を引いたり、といった装飾がよく見かけられます。

でもそれだけじゃなくて、よく教科書とかにするような、蛍光ペンで線を引いたりする…。
そう!↑こんな感じで文字を強調したくて、CSSでカンタンに表示できないか調べてみました。

“CSSでテキストを蛍光マーカーみたいに強調表示してみる” の続きを読む

「CSSだけで特定要素内でのみ画面にFIXさせたい」…を応用して、FIXするボタンをつけてみる

よく見かける、色々な条件を指定して検索する条件検索のフォーム。
指定できる項目が多く、検索ボタンがページの下の方になってしまって、いちいち下までスクロールしないといけない事に…

ページの下までスクロールしなくても、検索ボタンがわかるように出来ないかとと考えていたところ、
前回「CSSだけで特定要素内でのみ画面にFIXさせたい」の記事でご紹介した、特定要素内だけでFIXさせるCSSを応用して、検索用フォームの個所にだけ、うまい事ボタンを表示できるのでは!
と思い至った次第です。

無論、JavaScriptは使わず、CSSだけで実現しちゃいます。

“「CSSだけで特定要素内でのみ画面にFIXさせたい」…を応用して、FIXするボタンをつけてみる” の続きを読む

CSSだけで特定要素内でのみ画面にFIXさせたい

繁忙期につき、ご無沙汰しておりましたが、またブログを更新していきたいと思います!m(_ _)m

そんな繁忙期中に、サイドナビをFIXさせたい要望がありました…が、フッターの領域にはFIXナビを被らせたくない。

↓こんなイメージ(Sideの領域内のみ、画面FIXさせたい)

JavaScriptを使えば、まあ出来る事ではあるのですが、どうせならCSSだけでお手軽に出来ないかと調べてみました。

結構簡単に実装出来ちゃいますので、なかなかおススメですよ! “CSSだけで特定要素内でのみ画面にFIXさせたい” の続きを読む

CSSで画像をトリミングして表示したい

管理画面で画像を登録して、システムで吐き出す。
こういう形を取っていると、どうしても画像のサイズにばらつきが出やすいです。

SNSなどで、投稿時に編集してトリミング…できればいいのですが、予算的にもそういった機能の追加が厳しかったり。

CSSで何とか出来ないものかと調べていたら、どうやら方法があるようでしたので、ご紹介します!

“CSSで画像をトリミングして表示したい” の続きを読む

iPhoneで見たら、このフォントだけ大きくない…?となった時は

レスポンシブデザインでサイトを構築する事もすっかり多くなっている今日この頃です。
構築したサイトをiPhoneで見てみると…

「あれ、ここだけフォントサイズ大きくない?」

といった事がちょくちょくあります。

“iPhoneで見たら、このフォントだけ大きくない…?となった時は” の続きを読む