HTML

最近で気になった記事を幾つかご紹介します。 Microsoftは2025年までにWindows 10のサポートを終了する予定 最後のOSではなかったのか？   SEO効果がいちばん高くなるH ...

年内最後の投稿になる今回は、今までで一番アクセスの多い「レスポンシブな「dl dt dd」を作る」の最新版をご紹介します。 以前の内容では「float: left;」を使って横並びにしていましたが、最 ...

「img」タグに「loading="lazy"」を追記するだけで、画像の遅延読み込み（lazy-load）が実現でき、ページの表示を早くすることが可能になりました。 遅延読み込みは、ブラウザのスクロー ...

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

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

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

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

webデザイナー、フリーランス、社内web担当者の方などに役立つ記事をご紹介しております。 ◆1ページで完結、Web制作者が助かるチートシート・資料・PDFまとめ　（コムテブログ 様） ◆どれを選んで ...

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

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

webデザイナー、フリーランス、社内web担当者の方などに役立つ記事をご紹介。 ◆これからのCSSレイアウトはFlexboxで決まり！　（Webクリエイターボックス 様） ◆かつてはJavaScrip ...

webデザイナー、フリーランス、社内web担当者の方などに役立つ記事をご紹介。 ◆商用利用ＯＫの無料イラスト配布サイトまとめ１０選　（無料イラストIMT公式Blog 様）   ◆canvas ...

webデザイナー、フリーランス、社内web担当者の方などに役立つ記事をご紹介。 ◆サブドメインとサブディレクトリのSEO対決、2014年の勝者はどちら？　（Web担当者Forum 様） サブディレクト ...

webデザイナー、フリーランス、社内web担当者の方などに役立つ記事をご紹介。 ◆jQueryでスクロールすると表示する系いろいろ　（webOpixel 様） 「スライドアニメーションして表示」は、「 ...

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

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

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

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

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

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