HTML / CSS / jQuery コーディング

スマートフォンサイトで電話番号のタップで電話アプリを起動させる仕組みをご紹介します。 端末によっては、数字の部分をタップすると電話アプリが起動してしまう場合があるため、数字の部分を無視し、電話番号のタ ...

フッターのデザインで見かける、フッターエリアに「PAGETOP」ボタンを重ねるCSSを作りました。 ◆HTML <div id="footerWrap"> <div id="foot ...

CSSを使い、ラインの両端にグラデーションをかけます。 単純な線ではなく、端にいくにつれ徐々にフェードアウトしていく感じがちょっとおしゃれ。   ◆HTML <hr class=”li ...

全ての要素に対してスタイルを適用させるユニバーサルセレクタ(*)がありますが、これは使用を避けた方がよいと言われています。 理由としては元々のスタイルに対しても影響を与えてしまうようで、特にフォームに ...

「box-shadow」はCSS3のプロパティで、ボックスに影を付けられます。 指定方法は、水平方向・垂直方向・ぼかし・色の順になっています。 サンプルでは、paddingやborderなどもろもろ調 ...

HTMLの記述においてH1タグは1ページ1つが基本となっていますが、HTML5では複数の使用が可能です。 そのため、1ページ内の各見出しにH1タグが使用できます。 SEOの効果としてはあまり期待は出来 ...

通常、スクロールバーの表示は、ページの長さによって自動的に表示・非表示になります。 そのため、ページによってはスクロールバーの有無により、その分だけ画面の横幅がズレてしまいます。 これは、常にスクロー ...

「text-shadow」はCSS3のプロパティで、テキストに影を付けられます。 「text-shadow」の後のスペース区切りで横方向、縦方向、影のぼかし半径、影の色を指定できます。 また、カンマ（ ...

「:nth-child()」はCSS3のセレクタで、ある要素内で最初からn番目にスタイルを適用させることができます。 CSS3のためIE8まで対応していないようです。   例として、下記はリ ...

first-childとlast-childはCSS3のセレクタで、ある要素内の最初と最後にスタイルを適用させることができます。 特にリストを使用する場合に使えそうなのですが、CSS3のためIE8まで ...

ul liを使った、縦並びのメニューリストサンプルです。特徴としては下記になります。 ・メニューボタンはテキスト形式 ・ボタン領域全体にリンク設定（マウスオーバーで色を変える） ・テキストリンクの横に ...

dt ddの定義リストを横並びにするHTMLとCSSのサンプルです。   ◆HTML <dl class="sample"> <dt>テキスト</dt> ...

画像の横にテキストを表示した場合、テキストの量が多いと画像の下に文字が回り込んでしまいます。 それを回避するコーディングです。 このようなイメージです。   ◆HTML <div cl ...