サイトでヘッダーを画面上部に固定表示している時に、アンカーポイントで表示位置を指定したり、ページ内リンクで移動したり…
というのは、当然ながらよく使われる手法ですが…。
ある時、リンクした先が微妙にズレて困った事はありませんか？
私はあります（笑）
iPadやタブレットでPCサイトを見るとwidth:100%指定が崩れている！？
iPadやタブレットでサイトを表示させた時に、なぜか表示が崩れている…。
具体的にはサイトの右側に変に余白がある部分と、無い部分があったりして、キレイに表示されていない。
こんな状況に遭遇してしまった時の調整方法をご紹介します。
CSSでテキストを蛍光マーカーみたいに強調表示してみる
WEB上でテキストを強調する時には、文字色を変えたり、文字を太くしたり、下線を引いたり、といった装飾がよく見かけられます。
でもそれだけじゃなくて、よく教科書とかにするような、蛍光ペンで線を引いたりする…。
そう！↑こんな感じで文字を強調したくて、CSSでカンタンに表示できないか調べてみました。
「CSSだけで特定要素内でのみ画面にFIXさせたい」…を応用して、FIXするボタンをつけてみる
よく見かける、色々な条件を指定して検索する条件検索のフォーム。
指定できる項目が多く、検索ボタンがページの下の方になってしまって、いちいち下までスクロールしないといけない事に…
ページの下までスクロールしなくても、検索ボタンがわかるように出来ないかとと考えていたところ、
前回「CSSだけで特定要素内でのみ画面にFIXさせたい」の記事でご紹介した、特定要素内だけでFIXさせるCSSを応用して、検索用フォームの個所にだけ、うまい事ボタンを表示できるのでは！
と思い至った次第です。
無論、JavaScriptは使わず、CSSだけで実現しちゃいます。
CSSだけで特定要素内でのみ画面にFIXさせたい
繁忙期につき、ご無沙汰しておりましたが、またブログを更新していきたいと思います！m(_ _)m
そんな繁忙期中に、サイドナビをFIXさせたい要望がありました…が、フッターの領域にはFIXナビを被らせたくない。
↓こんなイメージ（Sideの領域内のみ、画面FIXさせたい）
JavaScriptを使えば、まあ出来る事ではあるのですが、どうせならCSSだけでお手軽に出来ないかと調べてみました。
結構簡単に実装出来ちゃいますので、なかなかおススメですよ！ “CSSだけで特定要素内でのみ画面にFIXさせたい” の続きを読む
CSSで画像をトリミングして表示したい
管理画面で画像を登録して、システムで吐き出す。
こういう形を取っていると、どうしても画像のサイズにばらつきが出やすいです。
SNSなどで、投稿時に編集してトリミング…できればいいのですが、予算的にもそういった機能の追加が厳しかったり。
CSSで何とか出来ないものかと調べていたら、どうやら方法があるようでしたので、ご紹介します！
iPhoneで見たら、このフォントだけ大きくない…？となった時は
レスポンシブデザインでサイトを構築する事もすっかり多くなっている今日この頃です。
構築したサイトをiPhoneで見てみると…
「あれ、ここだけフォントサイズ大きくない？」
といった事がちょくちょくあります。
クリッカブルマップの枠線を消すには
最近では、使う機会も少なくなってきている（気がする）クリッカブルマップですが、地味に使うこともあるので、これも備忘録としてご紹介します。
CSSでクラスを付与されていない要素にだけCSSを当てたい
CSSでちょっとした小技をご紹介します。
出来ないかなと思って探してみたら、あるんですね！
cssだけでタブ切り替えを設定したい
サイトでもよく見かけるタブ切り替え。
JavaScriptを使えばそれほど苦もなく実装できる仕様ですが…。
大丈夫です、CSSだけでタブ切り替えを実装する事ができますよ。