HTML / CSS / jQuery コーディング

画像が画面内に入った時にフェードインで表示される仕組みです。 画像数が多い時などに良いかと想います。 デモページを見る   ソースもろもろは全てここに書くと長くなってしまうので、ご利用を希望 ...

CSSで境界線を下三角の矢印にしたり、斜めにするスタイルです。 デモページを見る   ソースもろもろは全てここに書くと長くなってしまうので、ご利用を希望の方はファイルをダウンロードしてくださ ...

前回のボタンまとめに続き、アニメーションテキストをまとめてみました。 今回は、「css」と「jQuery」で作っています。 どれも面白い動きやオシャレなデザインになっています。 まずはデモページをご覧 ...

今まで見かけた中で、使ってみたいと思ったCSSで作るボタンをまとめてみました。 どれもオンマウスで面白い動きをします。 まずはデモページをご覧ください。 デモページを見る   ソースを全てこ ...

cssのみで、吹き出しタイプの見出し・タイトル表示にする方法です。 ◆html <div class="textBox">吹き出しのタイトル</div> <p>下に ...

css3で作る、タイトル付きの枠線で囲むボックス表示です。 タイトルは上の線に重なるような表現です。 ◆html <div class="textBox">タイトル付きの枠で囲まれたテキス ...

リストタグを使わず、hタグで自動で番号を付与していく方法です。 途中でカウンタを0にセットすると、新たに1番から付与する事ができます。 ◆html <div class="autoNumber" ...

ブレイクポイントのサイズをどうするか、悩ましいところですが、個人的にはBootstrapのブレイクポイントを採用しています。 Bootstrapのブレイクポイントは下記の通り。 ・768pxまで（76 ...

メイン画像の下にサムネイル画像があり、サムネイルをクリックするとメイン画像も切り替わるスライダーです。 サムネイルは左右に動かす事ができ、自動ループにもなっていて、一番左の画像がメイン画像に表示される ...

PCはもちろん、スマホやタブレットのタッチデバイス操作にも対応したスライダーです。 まずはデモページをご覧ください。 ⇒デモページ ファイルは公式サイトよりダウンロードします。 ⇒公式サイト ※以下、 ...

オンマウスで色がスライドする、アニメーションボタンをCSSで作ります。 ◆HTML <a href="#" class="btn btn-medium btn-l-r">アニメーション ボ ...

オンマウスでキラッと動きをつけるボタンをCSSで作ります。 ◆HTML <button class="myButt one"> <div class="insider">&lt ...

今まで、フォーム入力の郵便番号・住所検索はajaxzip3を利用していましたが、googleコードが2016年1月に廃止されるというアナウンスを聞き、新しいAPIに変更する必要が出てきました。 下記が ...

段落のタイトルによく使われる、グラデーション背景に文字を乗せるCSSです。 ◆HTML <div class="ttl">グラデーション背景にテキストを乗せる</div> ◆C ...

画像の上にマウスの乗せると、画像がスルスルとスクロールするjQueryを紹介します。 サムネイル形式で画像を表示する制作事例やポートフォリオサイトなどで使えそうです。 ◆ポイント ・元の画像ファイルと ...

全角スペースを使ってインデントを付ける方法がありますが、CSSを使った方が後々文字数が増減しても修正の必要がないためおすすめです。 ◆HTML <ul class="textIndent"&gt ...

蛍光ペン・マーカーで引いたようなテキスト装飾をCSSで表現してみます。 ◆HTML マーカーで引いたようなテキスト装飾です。<br /> <span class="marker"&g ...

郵便番号検索なら「ajaxzip3」が簡単でおすすめです。 使い方を参考に、実際にサンプルページを作ってみました。 ⇒ サンプルページはこちら また、下記よりサンプルファイル一式もダウンロード出来ます ...

スマートフォンサイトで使えるアコーディオンを作ってみました。 ⇒ デモサンプルはこちら 「ul」と「li」タグで作っています。 cssのソースなど記載すると長くなるので、よろしければファイル一式を確認 ...

サイトの規模やページ数によっては、編集を楽にするため、ヘッダーやフッターを外部ファイルとして読み込む方法（インクルード）があります。 ですが、階層が変わると画像の読み込みがうまくいかず表示されません。 ...