こんにちは！エコムクリエーションの山岡よしみです。今回は、Web制作で困ったときに役立つ記事を厳選してご紹介します。
CONTENTS
CSSを使ってcheckboxやradioの見た目を変える方法
お問い合せフォームなどをCSSで装飾する時、inputやtextareaはサクッと見た目を変えられますが、checkboxやradioは一筋縄ではいきません。
キュートでスタイリッシュなチェックボックスやラジオボタンにしたい！
そんな時は、labelとinput[type=checkbox]（またはinput[type=radio]）を組み合わせて実装する方法がオススメです。
この記事では、３つのサンプルを例に実装方法を解説しています。
高画質ディスプレイに対応。srcset属性の使い方
最近のパソコンやスマホの画像表示はすごく綺麗ですよね。srcset属性を設定すれば、デバイスの解像度によって最適な画像を表示してくれます。
この記事では、Retinaディスプレイに代表されるような高画質ディスプレイに対して、高画質な画像表示をどのように実装するのかを解説しています。
NOW LOADINGを出してみよう
Webサイトでページの読み込み中に出てくる「NOW LOADING」の表示。くるくる回るアニメーションだったり、パーセント表示のバーが伸びていったりと様々な仕様があります。できれば、コンテンツの雰囲気にぴったり合うローディング画面を表示させたいですよね。
この記事では、ローディング画面を表示するメリットをご紹介しています。
また、連載記事としてChapter.2 - jQueryを使ってやってみようやChapter.3 - 脱jQuery！ JavaScriptを使ってやってみようで実装方法を解説しています。
マウスオーバーで画像がズームイン！
リンクにマウスオーバーをしたときのホバーエフェクト（hover）。マウスオーバーすると半透明になったり、アンダーバーが表示されたりと、いろんな種類があります。
この記事では、ホバーエフェクトの中でも、活用の幅が広い「ズームイン」の実装方法を解説しています。
いかにホバーエフェクトの引き出しを増やすかが、フロントエンドエンジニアの腕の見せどころです！
マウスオーバーでふんわりとシャドウをつける
ホバーエフェクトの活用方法のひとつ、シャドウ。
ずらし具合や表示速度を調整することで、いろんな印象の影を作ることができます。この記事では、ふんわり度低め、中くらい、高めの３パターンのシャドウの実装方法を解説しています。様々なバリエーションを試しながら、ホバーアクションの幅を広げていきましょう！
簡単に文字を読みやすくするCSS
ノンデザイナーであれば誰しも、文字サイズや文字間の設定に設定に悩んだことがあると思います。文字を大きくすると読みやすいけれど野暮ったくなるし、小さくするとスタイリッシュになるけれど読みにくくなってしまい、なかなか難しいですよね。
この記事では、デザイナーでなくても文字を読みやすくスタイリングするCSSをご紹介しています。
CSSで作る魅惑のグラデーションボタン（クリック率を上げる、CTA）
思わずポチッと押したくなる、グラデーションボタン。お問い合わせに誘導するボタンや、フリートライアルの申し込みボタンなど、ここぞという要所で活用するのがおすすめです。
この記事では、グラデーションボタンの３つのサンプルと、CSSで実装する時に役立つツールをご紹介しています。
