2016年11月24日 【CSS】検索を選択すると大きくなるinputボックス カーソルを合わせるとグっと大きくなり入力する箇所が大きくなる検索ボックス。 入力する場所をアピールをしたい場合や、小さい場所に置いて必要な時だけ大きくするなど 利用する事も多いかと思い、作成してみました。 【デモ】 【H… 記事全体を読む
2016年11月08日 【CSS】1つの要素にグラデーションと背景画像を両立させる方法 リンクボタンを作成する場合、グラデーションの背景をしいて、その上に「背景で矢印画像」を置くというようなグラデーションと背景を1つの要素で同時に表現したい場合があります。上記のような感じ。 やり方は意外と簡単。 「back… 記事全体を読む
2016年11月07日 【CSS】CSSのみでギザギザの円を表現する方法 何%OFFなど、広告のポップを画像で背景に敷くのが一般的ですが CSS3では、色々と画像の加工が可能です。 そこで、スタイルのみでギザギザを作成してみました。 200円OFF 【CSS】 【HTML】 若干、容量も軽くな… 記事全体を読む
2016年11月03日 【CSS】レスポンシブデザインでPCとスマホで改行の位置を変えたい場合の対処法 デザイン上、PC版とスマホ版で改行位置を変えたい事がありまして、どうしようと悩んでいた時にこちらのサイトをみつけました。 http://code-plus.jp/responsive-br/ なるほど!という感じですね。… 記事全体を読む
2016年11月02日 【CSS】javascript等で後から追加する要素のフォントサイズがiPhoneで見たとき変わってしまう対処法 こちらのサイトを参考にしました。 http://blog.yousoro.com/archives/159 以前、jQueryのプラグイン「bxslider」を使用した際にbxslider内にボックスを作りテキストを書い… 記事全体を読む
2016年10月21日 【CSS】input type=”text” に width 100% を指定するとはみ出る原因と対処方法 inputのtextを作成をし横幅を100%にした場合 親要素からはみ出す場合があります。 このような形になってしまいます。 これは、iputに枠線がある為にはみ出してしまう現象です。 そこで このように、「box-si… 記事全体を読む
2016年09月28日 【CSS】文字をはみ出させないword-wrap:break-wordとword-break:break-all 横幅固定のボックスに英語を入力した場合突き抜けて表示される場合があります。 そこで、CSSの「word-wrap:break-word」または「word-break:break-all」を使用することで折り返すことができ… 記事全体を読む
2016年09月24日 【CSS】スタイルのみで checkbox(チェックボックス)画像でデザインする方法。 スタイルのみでデザイン CSS3は、色々と特殊なデザインができるようになりました。 そこで、今回は、チェックボックスをオリジナルの画像にする方法です。 【デモ】 データ1 データ2 データ3 【HTML】 【CSS】 まず、「input」をCS… 記事全体を読む
2016年09月21日 【CSS】画像を簡単に中央に揃える方法。 文字を中央に揃えたい場合は、【text-align:center】でブロック要素であれば【margin:0px auto】などで中央に揃えることが可能です。 ただ、画像が「インライン要素」であるため、こういったcssで中… 記事全体を読む
2016年09月16日 【CSS】グラデーションツール「Ultimate CSS Gradient Generator」 現在、ほぼすべてのブラウザで、CSSでグラデーションが使えます。 画像を使わなくてすむので、SEOで有利、ページ容量を減らす等、色々な利点があります。 ただ、現在ブラウザごとに記述が変わったり、なかなか視覚的にわかりずら… 記事全体を読む