カーソルを合わせるとグっと大きくなり入力する箇所が大きくなる検索ボックス。 入力する場所をアピールをしたい場合や、小さい場所に置いて必要な時だけ大きくするなど 利用する事も多いかと思い、作成してみました。 【デモ】 【H…

リンクボタンを作成する場合、グラデーションの背景をしいて、その上に「背景で矢印画像」を置くというようなグラデーションと背景を1つの要素で同時に表現したい場合があります。上記のような感じ。 やり方は意外と簡単。 「back…

何％OFFなど、広告のポップを画像で背景に敷くのが一般的ですが CSS3では、色々と画像の加工が可能です。 そこで、スタイルのみでギザギザを作成してみました。 200円OFF 【CSS】 【HTML】 若干、容量も軽くな…

デザイン上、PC版とスマホ版で改行位置を変えたい事がありまして、どうしようと悩んでいた時にこちらのサイトをみつけました。 http://code-plus.jp/responsive-br/ なるほど！という感じですね。…

こちらのサイトを参考にしました。 http://blog.yousoro.com/archives/159 以前、jQueryのプラグイン「bxslider」を使用した際にbxslider内にボックスを作りテキストを書い…

inputのtextを作成をし横幅を100％にした場合 親要素からはみ出す場合があります。 このような形になってしまいます。 これは、iputに枠線がある為にはみ出してしまう現象です。 そこで このように、「box-si…

横幅固定のボックスに英語を入力した場合突き抜けて表示される場合があります。 そこで、CSSの「word-wrap:break-word」または「word-break:break-all」を使用することで折り返すことができ…

CSS3は、色々と特殊なデザインができるようになりました。 そこで、今回は、チェックボックスをオリジナルの画像にする方法です。 【デモ】 データ1 データ2 データ3 【HTML】 【CSS】 まず、「input」をCS…

文字を中央に揃えたい場合は、【text-align:center】でブロック要素であれば【margin:0px auto】などで中央に揃えることが可能です。 ただ、画像が「インライン要素」であるため、こういったcssで中…

現在、ほぼすべてのブラウザで、CSSでグラデーションが使えます。 画像を使わなくてすむので、SEOで有利、ページ容量を減らす等、色々な利点があります。 ただ、現在ブラウザごとに記述が変わったり、なかなか視覚的にわかりずら…