こんにちは（・∀・）

年の瀬も押し迫りました今日この頃、みなさんいかがお過ごしでしょうか。本日の投稿が年内最後の投稿となります。

今日は表題の通り、キャッシュを無効化せずにCSSの変更を反映させる方法についてご紹介します。

こんにちは（・∀・）

今日はWordPressにログインしていると表示されるツールバーを非表示にする方法をご紹介します。

こんにちは（・∀・）

今日はレンタルサーバーにWordPressをインストールする方法をご紹介します。

今回の投稿はさくらのレンタルサーバーを利用している方限定の記事となります。

こんにちは（・∀・）

今日はJavaScriptでラジオボタンとチェックボックスの入力判定を作ってみましたのでご紹介します。

こんにちは（・∀・）

今日はJavaScriptで簡易CAPTCHA認証を作ってみましたのでご紹介します。

こんにちは（・∀・）

チェックボックスをラジオボタン風にしてみました。

こんにちは（・∀・）

今日はファイルを送信することができるフォームのサンプルをご紹介します❗️

こんにちは（・∀・）

今日はGoogleアカウントのメールアドレスを変更する方法をご紹介します。

こんにちは（・∀・）

今日はHTML5でFlexレイアウトのテンプレートサンプルをご紹介します。

こんにちは（・∀・）

今日はHTML5でFloatレイアウトのテンプレートサンプルをご紹介します。

こんにちは（・∀・）

今回はjQueryでヘッダーをトップに固定するスティッキーヘッダーと、スクロールするとそのヘッダーがCSSのアニメーションで拡大縮小するサンプルをご紹介します。

レスポンシブデザインに対応してます。

こんにちは（・∀・）

ある要素にCSSのdisplay:noneをJavaScript内で指定して、それを同じくJavaScriptでdisplay:blockにする、というようなスクリプトを組むことはよくあると思います。

こんにちは（・∀・）

スクロール量に連動して要素が拡大したり縮小したり移動したりします。

こんにちは（・∀・）

Web制作であると便利なダミーテキストとダミー画像のジェネレーターをご紹介します。

こんにちは（・∀・）

WordPressで使用しておりますSNSのカウント数を早く表示をしてくれる「SBS Social Count Cache」というプラグインですが、最近Pocketのカウント数が取れなくなっておりました。

そんなおり、以前使用していた「SNS Count Cache」が更新されたという情報を耳にして、それならばいっそ元に戻してみようという事になりました。

ということでそのインストール方法についてご紹介したいと思います。

こんにちは（・∀・）

PHPを使って開発しているとかWordPressを使っていてテーマをカスタマイズしているなどなど、PHPを使う場面はWeb開発者の方であれば少なくないと思います。しかしそのコードに何かしらのエラーがあるとPHPはブラウザにエラー内容を吐き出しページ内容を表示することができないようになっています。

こんにちは（・∀・）

先日DマガジンでMac Fanを読んでいたらマカーではなくマッカーだということを初めて知りました。皆さんいかがお過ごしでしょうか。

Windowsを使っていたときは.htaccessファイルを編集するのは普通に秀丸エディタでできたのですが。Macの場合はCotEditorで編集することはできないようで少し不便です。

こんにちは（・∀・）

Webサイトに貼り付けたpng画像がなんとなくぼんやりしてるなーってことありませんか。

こんにちは（・∀・）

今回はFlexboxでグリッドレイアウトを作ってみます。レスポンシブデザインでブレークポイントはスマホ・タブレット・PCの3つです。

以前CSSだけでグリッドレイアウトを作ってみましたが子要素の高さを固定にしないとグリッドレイアウトとしてうまく機能しなかったためなかなか使いづらかったのですが、高さの指定をする必要のないFlexboxは、まさにグリッドレイアウトのためにあるようなものですね

こんにちは（・∀・）

前回YouTube動画をレスポンシブデザインに対応させる方法をご紹介しました。

今日はWebサイトに貼り付けるGoogleマップをレスポンシブデザインに対応させる方法についてご紹介します。

こんにちは（・∀・）

先日当サイトでYouTube動画を公開しましたがそのままだとレスポンシブデザインには対応しておりません。

なので今日はWebサイトに貼り付けるYouTube動画をレスポンシブデザインに対応させる方法についてご紹介します。

こんにちは（・∀・）

contentプロパティと疑似要素:afterで挿入した画像の中心に、元要素のテキストを配置する方法についてご紹介します。前回の疑似要素:beforeの時と配置する画像の位置が反対になっただけでやり方はほぼ同じです。

こんにちは（・∀・）

contentプロパティと疑似要素:beforeで挿入した画像の中心に、元要素のテキストを配置する方法についてご紹介します。

こんにちは（・∀・）

CSSでposition:absoluteとwidth:100%を指定すると横幅の設定がうまくいかない場合があります。そんな場面に出くわしてしまった場合どうすれば良いのか...

などと、そんな場面での対処方法についてご紹介します。

また、この問題はbox-sizingで簡単に対処できるということを教えていただきました。デモのリンクも掲載させていただきましたのでご覧ください。

こんにちは（・∀・）

長いURLや単語など親要素で横幅を指定しているにもかかわらず改行してくれない場合に使えるword-wrapプロパティ・word-breakプロパティの使い分けについてご紹介します。

こんにちは（・∀・）

ローカル開発環境のワードプレスをインストールし直す機会に恵まれ❓最後にパーマリンクを設定したら404エラーでページが表示されなくなったため、その対処方法についてです。

こんにちは（・∀・）

WordPressでSNSの表示を早くしてくれる「SNS Count Cache」というプラグインを使用させていただいておりました。こちらのプラグイン、SNSカウントの表示も早くなりとても良かったのですが、Facebookのカウントだけ表示されなくなり、どうしたものかとググっておりましたら仕様変更によるものらしい。。。それならばしょうがない、と、しばらくプラグイン制作者様の更新を待っておりましたが、今のところ更新はないようで。。。いつまでもこのままでは困るので再度グーグル先生にお伺いをたてましたところ、「SBS Social Count Cache」という新たなプラグインを教えていただいたので、早速導入してみました。というお話です。

こんにちは（・∀・）

前回のリセットCSSについての記事の終わりに「今後Webデザインラボでも改めてリセットCSSをまとめてみたいと思います」的なことを言って締めくくりました。

ということで、早速WebデザインラボのオリジナルリセットCSSを作ってみました。

と言っても今まで使っていたオリジナルのリセットCSSをちょこっと変えただけなのですが...

HTML5対応です。

こんにちは（・∀・）

「今さらだけど、リセットCSSって色々とあるけど実際どれがいいのかな❓」

なんて本当今さらな話が先日とあるオフィスの片隅で聞こえてきました。

「別にどれも同じじゃん⁉️」的な回答でその話はそれで終わりました。

こちらとしても、リセットCSSなんて最近は全然気にしていなかったので「何々...」と少し興味がわき、聞き耳を立てていたのですが期待外れの回答で終わり少々がっかり。

そういえば最近のリセットCSSはどんな感じなのかな...、と気になったので少し調べてみましたのでシェアしたいと思います。

こんにちは（・∀・）

前回ご紹介しましたJavaScriptのhistory.back()ですが、このhistory.back()、もどるのは履歴に沿って行うので、当然その前に見ていたページに戻ることになります。

こんにちは（・∀・）

Webブラウザには必ず付いているもどるボタンですが、コンテンツ上にもボタンを付けたい場合があります。そういう時はJavaScriptのhistory.back()で簡単に実現することができます。

今までどういう訳かご紹介していなかったので(こういうの結構多いです(;'∀'))、今さらですがご紹介したいと思います。

こんにちは（・∀・）

今回ご紹介するサンプルはグラデーションの背景色をアニメーションで変更するサンプルです。CSS3のlinear-gradientとanimationを使っただけの簡単な構造です。

こんにちは（・∀・）

今回ご紹介するサンプルは、マウスの動きに追随して背景画像や要素を動かすプラグインです。

スマホの場合はマウスの動きの代わりに端末を傾けることによって反応するセンサーによって背景画像や要素を動かすことができます。

こんにちは（・∀・）

今回ご紹介するのはCSSだけで作ったツールチップです。前回ご紹介しましたjQueryでツールチップと動きはほぼ同じです。

主に、visibility、opacity、transitionの各プロパティで動きのある表現を行っております。jQueryを使わないこちらのツールチップでも動きの表現は十分ではないかと思います。

こんにちは（・∀・）

今回ご紹介するのはjQueryを使ったツールチップです。

ツールチップとはマウスオーバーした際に表示される説明やヒントなどを表示させる仕組みのことです。

同じようなことをtitle属性で実現することもできますが、よりグラフィカルな表現で表示させるためにCSSやjQueryを使って作成してみます。

こんにちは（・∀・）

今回はHTML5のmaxlength属性とjQueryを使ってtextareaの入力文字数を制限をしてみたいと思います。

入力制限はmaxlengthだけで済むのですが、それプラスjQueryで入力文字数をカウントして今何文字入力しているのかわかるように表示します。

入力制限文字数の近くで数字の色も変更してみます。

残り数のカウント部分はSafari未対応です。

こんにちは（・∀・）

今回はCSSのborderプロパティを使って三角形を作ります。

作り方はサンプルを交えてご紹介いたしますがとても簡単です。

今までは画像や記号を使って実現していた三角形もCSSのborderプロパティで実現することができます。

こんにちは（・∀・）

郵便番号の入力フィールドに郵便番号を入力するとフォームに自動で住所を入力してくれる便利なjQueryライブラリがありますのでご紹介します。

こんにちは（・∀・）

前回のラジオボタンやチェックボックスの解説に続いて今回もフォーム系についての解説になります。今回はinput要素のautocomplete属性についてです。

こんにちは（・∀・）

アンケートサイトの選択肢などでラジオボタンやチェックボックスが使われていて、時々クリックしづらかったりすることがあります。ラジオボタンやチェックボックスはHTMLのinput要素で作りますが、そのままだとボタンを押す範囲が狭すぎてクリックしづらいことがあります。

こんにちは（・∀・）

input要素でボタンを作るとiOSの場合、ボタンの形が勝手に角丸でグラデーションになってしまいます。それを防ぐ方法をご紹介します。

こんにちは（・∀・）

前回ご紹介致しましたレスポンシブなWordPressテーマに続きまして、ユーザーエージェントで振り分ける2カラムレイアウトと3カラムレイアウトのWordPressテーマをご紹介します。こちらもシンプルに作りましたので簡単にデザイン変更もできるかと思います、よろしければご活用ください。

こんにちは（・∀・）

JavaScriptでaタグなどに使用してタグを無効にするreturn false、通常であれば特に問題はないのですが、最近aタグを無効にしつつもクリック(タッチ)イベントは伝えたいということがありました。例えばよくあるページ内スクロールでページ内を移動しつつ他のこともしたい場合、return falseでaタグの挙動が無効化されているとページ内スクロールの他にもう一つ何かしたくてもそのクリック(タッチ)イベントは、return falseによって伝えてくれません。ではどうすれば良いか...

こんにちは（・∀・）

今回はスマホ用のナビゲーションをご紹介します。以前からご紹介してありますスマホサイトのメニューボタン(ハンバーガーボタン)をタップしてドロワーナビが展開するタイプとは異なり、ボタンをタップするとコンテンツの上にnav要素が展開してメニューを表示させるタイプのナビゲーションになります。サンプル１はボタンが右側、サンプル２はボタンが左側になります。PCサイトとスマホサイトのレスポンシブでレイアウトしてありますのでそのままレスポンシブレイアウトでご利用いただけます。

こんにちは（・∀・）

今回ご紹介しますドロワーナビはコンテンツとサイドバーが一緒にスライドするタイプです。こちらも同じくPCサイトは通常のページでスマホサイトはドロワーナビにしてレスポンシブルで切り替えます。

こんにちは（・∀・）

前回はHTMLメールをどうやって作るのかをやりましたが、今回はHTMLメールの基本的なレイアウトやデザインについてご紹介します。順番が逆になり、また、かぶる所もあるのですが...

こんにちは（・∀・）

通常のメールソフトやgmailなどのフリーメールでもちょっとした文字の装飾などはできますが、本格的なHTMLメールを作るにはどうしたらいいのでしょう？何か特別なソフトが必要なのでしょうか...？

いいえ、特にソフトは必要ありません。通常のテキストエディタとメールソフト(Windows Live メールなど)、それにWebブラウザがあれば簡単にHTMLメールを作ることができます。

そこで今回はHTMLメールの簡単な作り方をご紹介したいと思います。

こんにちは（・∀・）

displayプロパティにCSS3で追加された値boxですが、その後何度かの仕様変更を経てflexという値に変更されました。

boxの頃はIEがまったく対応しておりませんでしたので使うに使えない値でしたが、box → flexbox → flexへと変更になりIEでも使用することが出来るようになりました(IE11以上)。自動で高さを他のカラムに揃えるなどとても使い勝手が良い値なので今後floatに代わってレイアウトで使用することになるのは確実ですね。

こんにちは（・∀・）

jQueryを使用したサンプルをご紹介します。今回はスクロールしても画面内で要素を固定させるスティッキーサイドバーです。

こんにちは（・∀・）

スマホサイトでサイト内にある電話番号をタップしてすぐに電話を掛けることができるようにする設定です。

こんにちは（・∀・）

レスポンシブデザインでWebページをスマホサイトとPCサイトに振り分けたとき、ある要素のスマホサイトにはリンクがあり、PCサイトではなしにするという仕様のとき、PCサイトのリンククリックを無効にする方法はないのか…と調べてみたらありました。CSSだけで簡単にできるようです。

こんにちは（・∀・）

CSSだけで作ってみましたシリーズです。今回はCSSだけでブロック要素の表示非表示です。

こんにちは（・∀・）

jQueryを使用したサンプルをご紹介します。今回はjQueryでブロック要素の表示非表示です。要素の非表示はJavaScriptで制御しているのでJavaScriptを切っている場合はすべて展開した状態で表示されます。

こんにちは（・∀・）

CSSだけで作ってみましたシリーズです。

今回は画像または背景画像をフラッシュの様にフルスクリーン表示させるサンプルをご紹介します。

こんにちは（・∀・）

CSSだけで作ってみましたシリーズです。今回はツリーメニューをご紹介します。

こんにちは（・∀・）

CSSだけで作ってみましたシリーズです。今回ご紹介するサンプルは、サイズも可変してスマホにも対応したタブレイアウトです。

こんにちは（・∀・）

CSS3のAnimationやtransitionといったプロパティのおかげでJavaScriptを使わなくても動きのあるWebサイトが作れるようになってきました。そこで今回はCSSだけで作る、サイズが可変してスマホにも対応したアコーディオンをご紹介します。

こんにちは（・∀・）

CSS3のAnimationやtransitionといったプロパティのおかげでJavaScriptを使わなくても動きのあるWebサイトが作れるようになってきました。そこで今回はCSSだけで作る、サイズが可変してスマホにも対応したアコーディオンをご紹介します。

こんにちは（・∀・）

今回はTwitterとFacebookの連携についてです。

色々なSNSが普及している中、TwitterとFacebookはWebサイトの更新情報代わりに利用されているかたも多いと思います。

Twitterだけ、Facebookだけという場合は問題ないのですが、TwitterとFacebookの両方を運用している場合、同じ内容を2回投稿することになり面倒です。

そこで今回はTwitterのアプリ連携を使用してTwitterの投稿をFacebookにも反映させる設定をご紹介します。

こんにちは（・∀・）

iPhoneでホームページを見ているとき縦向き(ポートレート)から横向き(ランドスケープ)に画面の向きを変えた時にホームページの文字サイズだけが自動で勝手に大きくなります。

iPhoneサファリの初期設定では縦画面から横画面に変更すると文字の大きさが自動で調整されるように設定されています。1行の文字サイズが多くなると読みづらくなるだろうというユーザビリティから来ているのだと思うのですが逆に読みづらい気がします。そこで今回は文字サイズが変わらなくなるようにする設定をご紹介したいと思います。

こんにちは（・∀・）

今回はスクロールしたブラウザのの移動量を表示するjQueryのサンプルをご紹介します。

ブラウザ画面をスクロールして移動した際の座標を取得します。ブラウザの移動量にあわせてアニメーション効果等を設定する際に使用すると便利です。

こんにちは（・∀・）

今回はクリッカブルマップのご紹介です。

3種類のサンプルをご用意しました。一つ目は通常のクリッカブルマップ。二つ目は通常のクリッカブルマップをJavaScriptでロールオーバーするクリッカブルマップ。三つ目はCSSでクリッカブルマップ風。です。

こんにちは（・∀・）

今回はjQueryでツリーメニューのご紹介です。以前ご紹介しましたアコーディオンメニューとjQueryはほぼ同じです。

こんにちは（・∀・）

今回はJavaScriptで作るタイマー系のスクリプトをまとめましたのでそれらサンプルのご紹介です。JavaScriptでCSSを切り替えるようになっているので背景色や画像以外の効果を設定することもできますので色々とお試しください。

こんにちは（・∀・）

今日はjQueryを使ったスクロールするとCSS効果が適用されるサンプルをご紹介します。サンプルは背景色を変更させてますが、色々なCSSの効果を試してみてください。

こんにちは（・∀・）

今回はCSSだけで実現できるパララックスレイアウトのサンプルをご紹介したいと思います。コンテンツの長さが要素ごとに違っても可変しますのでレイアウトに柔軟です。

スマホサイトにも対応したレスポンシブデザインですが、スマホサイトでは背景画像は固定しないためパララックスではなくなります。

こんにちは（・∀・）

2カラムレイアウトと3カラムレイアウトのレスポンシブなWordPressのテーマです。シンプルに作りましたので簡単にデザイン変更もできるかと思います、よろしければご活用ください。

こんにちは（・∀・）

今回はクッキーを使ってスマホとタブレット、PCを振り分けるJavaScriptをご紹介します。

こんにちは（・∀・）

JavaScriptでスマホやタブレットそれとPCを振り分ける方法をご紹介します。

こんにちは（・∀・）

今回も前回の投稿に引き続きjquery.cookie.jsを使ったサンプルをご紹介します。jquery.cookie.jsで背景色変更ボタンです。

こんにちは（・∀・）

今日も前回の投稿に引き続きjquery.cookie.jsを使ったサンプルのご紹介です。jquery.cookie.jsでテキストサイズ変更ボタンです。

こんにちは（・∀・）

今日はサイズが可変してスマホにも対応したjQueryタブレイアウトのご紹介です。

こんにちは（・∀・）

今回も前回に引き続きアコーディオンのご紹介です。前回ご紹介したアコーディオンは縦バージョンでしたが今回はスマホ画面では縦バージョンでPC画面では横バージョンのアコーディオンです。

こんにちは（・∀・）

今回はサイズが可変してスマホにも対応したjQueryアコーディオンのサンプルをご紹介します。

こんにちは（・∀・）

今日はjQueryで画像をドラッグ＆ドロップさせるサンプルをご紹介します。

こんにちは（・∀・）

今日は背景画像をCSSでフラッシュの様にフルスクリーン表示させてjQueryで画像を切り替えるサンプルをご紹介します。

CSSで画像をフラッシュのようにフルスクリーン表示させてさらにjQueryで画像を切り替えます。画像枚数分リピートして切り替わります。

こんにちは（・∀・）

今日は@importについてです。

@importで外部CSSを読み込むのはパフォーマンスの低下に繋がるという検証結果を最近世間で見かける様になっておりましたので、当サイトでも切り替えようと考えてはいたのですが中々移行する事が出来ずにおりました。

こんにちは（・∀・）

今回はjQueryでフラッシュみたいにアニメーションするリンクボタンのサンプルをご紹介です。

こんにちは（・∀・）

今回はjQueryを使用したスムーススクロールのサンプルをご紹介します。

こんにちは（・∀・）

今回はjQueryでグローバルナビゲーションをトップに固定するスティッキーナビ+ドロップダウンメニューをご紹介します。

こんにちは（・∀・）

今回はjQueryでグローバルナビゲーションをトップに固定するスティッキーナビをご紹介します。

レスポンシブデザインに対応しました。

こんにちは（・∀・）

今日は角丸やシャドー、グラデーションを画像を使わずにCSS3だけで実現する方法をご紹介します。

こんにちは（・∀・）

ワードプレスのウィジェットの追加方法についてです。

デフォルトのテーマでは通常2個か3個のウィジェットの表示スペースがあります。しかしそれでは足りないという方はウィジェットの表示スペースを追加することができます。

こんにちは（・∀・）

今回は長くなった文章を「...」に置き換えて省略する方法についてご紹介します。

こんにちは（・∀・）

今回は以前ご紹介しましたコンテンツがスライドするドロワーナビを改良して、PCサイトは通常のページ、スマホサイトはドロワーナビで表示するサンプルをご紹介します。

こんにちは（・∀・）

今日はコンテンツが横にスライドするドロワーナビのサンプルをご紹介します。

こんにちは（・∀・）

今回はJavaScriptのローカルストレージとクッキーのサンプルをご紹介します。

こんにちは（・∀・）

今回はlightbox系プラグインのご紹介です。

lightbox系のプラグインは色々とありますね、選ぶのも迷ってしまいます。なので良さそうなのを2つご紹介させていただきます。

こんにちは（・∀・）

今回はCSS3を使用して要素を透過させる方法をサンプルを使用してご紹介します。

こんにちは（・∀・）

今回は入力フォーム系に便利なCSSやJavaScriptを使った効果をまとめましたのでそれらサンプルをご紹介いたします。

こんにちは（￢ｖ￢）

今日はMovable TypeとWordPressについてです。Movable TypeとWordPressはどちらも人気があるCMSですが...

こんにちは（￢ｖ￢）

jQueryやFlash等をWebサイトで使用する場合、jQueryやswfobjectのライブラリをそれぞれダウンロードしてHTMLに組み込まなければいけません。

こんにちは（・∀・）

ノート風罫線をスマホやタブレットに対応致しましたので再度ご紹介します。

こんにちは（￢ｖ￢）

今回はPrototypeとjQueryについてです。

最近のWeb制作においてJavaScriptは欠かせない存在となりました。そのJavaScript/Ajaxの中でも特にprototypeとjQueryといったフレームワークやライブラリはWeb制作の現場において必須項目となりつつあります。

今回そのprototypeやjQueryを使うために必要な準備について解説します。

こんにちは（￢ｖ￢）

会社名の英文表記についてです。

会社名を英語表記する場合に株式会社とか有限会社の部分を、
○○○○ Inc.
○○○○ Corp.
○○○○ Co. Ltd.
等々としますが、
一体うちの会社はどれにしたらいいのかというようなご質問を受けたことがあります。

こんにちは（￢ｖ￢）

今回はWeb制作とはあまり関係ありませんが知っていると便利な情報なので共有します。

こんにちは（・∀・）

JavaScriptを使用したサンプルをご紹介します。今回は背景色を変更するスクリプトのサンプルです。

こんにちは（・∀・）

今回はスムースにスクロールしてページのトップへ移動するボタンのサンプルをご紹介します。

こんにちは（・∀・）

CSSを使用したサンプルをご紹介します。今回はテキストリンクや画像リンクを装飾するサンプルです。

こんにちは（・∀・）

JavaScriptを使用したサンプルをご紹介します。今回はテキストサイズを変更するボタンです。

こんにちは（・∀・）

JavaScriptを使用したサンプルをご紹介します。今回は要素の表示非表示です。ブロック要素の非表示はJavaScriptで制御しているのでJavaScriptを切っている場合はすべて展開した状態で表示されます。

こんにちは（・∀・）

今回はJavaScriptを使用したスムーススクロールのサンプルをご紹介します。

今回はスムーススクロールです。

こんにちは（・∀・）

JavaScriptを使用したサンプルをご紹介します。今回はクッキーを使ったタブレイアウトです。

こんにちは（・∀・）

JavaScriptを使用したサンプルをご紹介します。今回は印刷ボタンです。サンプルは画像版とテキスト版の2種類です。画像を使いたい場合はボタンの上で右クリックして画像を保存してご使用ください。

こんにちは（・∀・）

JavaScriptを使用したサンプルをご紹介します。今回は画像をランダム表示させるサンプルです。

こんにちは（・∀・）

JavaScriptを使用したサンプルをご紹介します。今回はタブレイアウトです。

こんにちは（・∀・）

CSSを使用して要素を画面の「左右」中央、または画面の「上下左右」中央に配置するいくつかのサンプルをご紹介したいと思います。

CSS3を使用してコーディングすることができるようになってきた昨今、その設定方法も増えましたので改めてご紹介していきます。