こんにちは（・∀・）

サイトマップはxml形式ではなくtxt形式でも作る事が出来るのはご存知ですか。

こんにちは（・∀・）

特定のページやディレクトリにパスワードを設定する方法をご紹介します。

Webサイトにパスワードを設定してアクセス制限を掛ける方法は色々とありますが、今回はBasic認証でパスワードを設定する方法になります。

パスワードの設定方法は.htaccessと.htpasswdの2つのファイルを使用して設定します。既存のHTMLファイルに何か書き込むというようなことはありません。

今回の解説はある程度の知識がある方向けとなっています。Basic認証の設定は過去にやったことあるけど、久しぶりに設定するからどんなんだっけ、というようなときにご利用ください。

こんにちは（・∀・）

CotEditorで行の最後の行末に文字を挿入する方法をご紹介します。

こんにちは（・∀・）

CotEditorで行の先頭の行頭に文字を挿入する方法をご紹介します。

こんにちは（・∀・）

こんにちは（・∀・）

こんにちは（・∀・）

こんにちは（・∀・）

テキストが親要素の横幅よりも大きくなる場合に改行なしで省略表示し、更にマウスオーバーで内容を全て表示させる方法をご紹介します。

こんにちは（・∀・）

今回も「CSSだけで...」シリーズです。スクロールしても要素が固定して表示され続けます。

こんにちは（・∀・）

前回のアコーディオンと同じく、今まではスムーズスクロールをするのにJavaScriptやjQueryを使って実装してきましたが、それらを使わなくともスムーズスクロールは実現することができます。

こんにちは（・∀・）

アコーディオンといえば、今まではjQueryやCSSを使って実装してきましたが、それらを使わなくともアコーディオンは実現することができます。

こんにちは（・∀・）

httpsでwwwなしにリダイレクトする方法をご紹介します。

こんにちは（・∀・）

httpsでwwwありにリダイレクトする方法をご紹介します。

こんにちは（・∀・）

PHPで簡易CMSのテンプレートを作りましたのでご紹介します。

その前に、そもそもCMSって何⁉️

コンテンツ管理システム（英: content management system, CMS）は、ウェブコンテンツを構成するテキストや画像などのデジタルコンテンツを統合・体系的に管理し、配信など必要な処理を行うシステムの総称。2005年頃より一般的に普及したといわれる。コンテンツマネージメントシステムとも呼ばれる。
引用：Wikipedia

CMSといえばWordPressやMovable typeが有名どころです。

大きな会社ではオリジナルな高性能CMSを使用しているところも多いと思います。

管理を考えると大規模なWebシステムを組む場合はCMSの導入は不可欠です。

こんにちは（・∀・）

こんにちは（・∀・）

こんにちは（・∀・）

こんにちは（・∀・）

要素の背景に動画を表示する2種類の方法をご紹介します。

前回のvideo要素に続いて今回は、YouTubeの埋め込みコードのiframe要素を使用した、YouTube動画を背景に表示する方法です。

こんにちは（・∀・）

要素の背景に動画を表示する2種類の方法をご紹介します。

今回はvideo要素を使用して背景に動画を表示する方法です。

こんにちは（・∀・）

こんにちは（・∀・）

こんにちは（・∀・）

今日WordPressを更新したらエディターが新しくなりました。

そういえば新しいエディター「Gutenberg（グーテンベルク）」をお試しください的なオススメがダッシュボードに以前から表示されていました。

こんにちは（・∀・）

サーバの移行などに伴うデータ入れ替え等で、WordPressのsqlデータはインポートできたのに、Webサイトが正しく表示されない、なんてことがある場合があります。

そんな時、先ずは接頭辞が合っているかどうか確認してみてください。

こんにちは（・∀・）

こんにちは（・∀・）

こんにちは（・∀・）

WordPressのデータはMySQLのデータベースに格納されていることは皆さんご存知かと思いますが、WordPressを使っていても直接データベースを操作しているという実感はないのではないでしょうか。

こんにちは（・∀・）

当サイトのコメントはFacebookのコメントプラグインを使用しております。

そのコメントプラグインが先週位から表示がおかしくなっていることに気がつきました。

こんにちは（・∀・）

Web制作関連の方ならPHPを扱う機会は多いと思いますが、大概はHTML内にPHPを入力して直接表示しているパターンが多いのではないかと思います。

なのでWeb制作関連の方は書き方によってPHPの閉じタグは必要ないということを知らない方もいるのでは⁉️と今更ながらに思ったのでシェアしようと思います。

こんにちは（・∀・）

PHPで作ったメールフォームでは、画面遷移なしでメールの送信はできません。

Ajaxを使えば画面遷移なしでメールの送信はできますが、できるだけ簡単に画面遷移しないでメールの送信ができるメールフォームを作りたいのです。

なのでiframeを使ってチョチョイと作ってみたいと思います。

こんにちは（・∀・）

前回はインスタグラムにPCから写真を投稿する方法をご紹介しましたが、いかがでしたでしょうか⁉️

今回も前回に引き続きインスタグラムに関する内容で、インスタグラムのフォローボタンの作り方についてご紹介したいと思います。

こんにちは（・∀・）

前回はdisplayプロパティの値「grid」を使ってスマホサイトにも対応した通常レイアウトのサンプルをご紹介しましたが、今回は通常レイアウトではなく、グリッドデザインのレイアウトをご紹介します。もちろんスマホ対応です。

こんにちは（・∀・）

今日はdisplayプロパティの値「grid」を使ってスマホサイトにも対応したレイアウトのサンプルをご紹介します。

こんにちは（・∀・）

今日はナビゲーションボタンをcalc()関数を使って作ってみます。

こんにちは（・∀・）

こんにちは（・∀・）

SassやLESS、または他のプログラムのようにCSSでも変数を使用することができます。

今日はSassやLESSではなく、CSS変数の使用方法をご紹介します。

こんにちは（・∀・）

親要素から特定する子要素にCSSを適用させる場合、「p > img」みたいな感じでセレクターを利用してCSSを適用させることができます。

その逆で子要素から親要素にCSSを適用させる場合、上記のようにセレクターを使ってCSSを適用させることはできません。

CSS4のセレクターで「:has()」というのがあり、上記のことが実現できますが、まだどのブラウザも対応しておりません。

CSSで完結したいところですが、こんな時はjQueryで解決できます。

こんにちは（・∀・）

こんにちは（・∀・）

CSSでフォントの種類を指定する場合、「font-family」で指定しますが、

フォントは何を指定してますか⁉️

こんにちは（・∀・）

WordPressにはタグやカテゴリーを出力させる関数があります。

しかしタグやカテゴリーを出力させるとリンクも自動的に付いてくるようになっています。

カテゴリーに関してはカテゴリー分けしているのでリンクが付いても全然問題ありません。しかしタグに関しては別です。

タグの出力はしたいけどリンクは付けたくありません。

ということで、今回はタグは表示するけどリンクは付与しないという出力方法をご紹介します。

ついでなのでカテゴリーのリンクなしも合わせてご紹介します。

こんにちは（・∀・）

今回もinput要素やtextarea要素に文字が入力されたら有効になるリンクボタンのjQueryのサンプルをネイティブ化しましたのでご紹介します。

こんにちは（・∀・）

こんにちは（・∀・）

当サイトの月間アクセスTop10で、ちょくちょくTop10に入って来るページがあります。

こんにちは（・∀・）

今朝メールチェックしたらGoogleから次のようなメールが届いてました。

こんにちは（・∀・）

ユーザビリティを考慮したタブ移動もできるドロップダウンメニューのサンプルをご紹介します。

こんにちは（・∀・）

今日はCSS3のobject-fitで画像を簡単にタイル表示にする方法をご紹介します。

こんにちは（・∀・）

Flexboxでjustify-content:centerを指定した要素の中央寄せで、最後に表示される行の要素は左寄せにしたい場合、どうしたらいい⁉️

こんにちは（・∀・）

今日はHTML5.1で追加されたpicture要素を使って画像を表示する方法をご紹介します。

こんにちは（・∀・）

こんにちは（・∀・）

今日はChromeのクッキーを個別に削除する方法をご紹介します。

こんにちは（・∀・）

こんにちは（・∀・）

こんにちは（・∀・）

今日はWordPressでカテゴリー毎にデザインを変える方法をご紹介します。

こんにちは（・∀・）

今日はWordPressでのOGPの設定方法についてご紹介します。

こんにちは（・∀・）

こんにちは（・∀・）

今日はWebサイトのOGP設定方法について解説します。

こんにちは（・∀・）

明けましておめでとうございます。

だいぶ明けてしまいましたが、皆さん新年はいかがお過ごしでしたか、今年は共に良き年にしましょう。

さて、新年最初の投稿はGoogle Chromeでキャッシュを簡単に削除するショートカットキーをご紹介します。

Web制作に関わる方ならGoogle Chromeを使用している方は多いと思いますし、わりと知られている内容なので「知ってますよ」という方はスルーしていただければと思います。

Web制作初心者の方はどうぞ覚えていってください。

こんにちは（・∀・）

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

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

こんにちは（・∀・）

今日はJavaScriptで振り分ける方法２パターンをご紹介します。

こんにちは（・∀・）

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

こんにちは（・∀・）

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

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

こんにちは（・∀・）

今日はJavaScriptで取得した値をPHPに渡すサンプルをご紹介します。

こんにちは（・∀・）

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

こんにちは（・∀・）

今日はメールフォーム(コンタクトフォーム)にCAPTCHA認証を付けたサンプルを作りましたのでご紹介します。

こんにちは（・∀・）

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

こんにちは（・∀・）

PHPで作ったメールフォーム(コンタクトフォーム)をご紹介します。

こんにちは（・∀・）

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

こんにちは（・∀・）

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

こんにちは（・∀・）

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

こんにちは（・∀・）

こんにちは（・∀・）

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

以前Flexboxでレイアウトする方法についてご紹介したことがありますが、テンプレートとしてご紹介はしてきませんでした。それはやはりIEで使用することができないというのが一番の理由です。しかし、今年の4月でWindows Vista(IE9)のサポートも終わりWindows 7以降のブラウザはIE11となりますのでいよいよFlexboxでレイアウトすることができるようになりました。

ということで改めて、この度Flexboxでのレイアウトテンプレートの公開という運びとなりました。

frameレイアウト・tableレイアウトからfloatレイアウトときていよいよFlexboxでのレイアウトとなります。CSSとブラウザの進化によりこれまでのfloatレイアウトが負のレガシーとなりIE6でのカラム落ちの対応に追われた日々を懐かしむようになることは間違いありません。

こんにちは（・∀・）

今日は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で挿入した画像の中心に、元要素のテキストを配置する方法について。

こんにちは（・∀・）

Google翻訳ツールをサイトに貼る方法についてご紹介します。当サイトでも何日か前から翻訳ツールをサイドバーに貼ったのを気づかれた方いらっしゃいますか？！

こんにちは（・∀・）

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()で簡単に実現することができます。

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

こんにちは（・∀・）

こんにちは（・∀・）

今回はinput要素やtextarea要素に文字が入力されたら有効になるボタンのサンプルをご紹介します。

前回ご紹介しました、ラジオボタンやチェックボックスがチェックされたら表示されるリンクボタンのサンプルと内容はほぼ一緒です。

こんにちは（・∀・）

今回はラジオボタンやチェックボックスがチェックされたら有効になるリンクボタンのサンプルをご紹介します。

こんにちは（・∀・）

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

こんにちは（・∀・）

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

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

こんにちは（・∀・）

以前投稿しました「CSS3のtransitionプロパティで簡単エフェクト」と前回投稿しました「CSSだけでアニメーションするリンクボタン」はCSSで制御するという内容が一緒なのでページを「CSSだけでアニメーションするリンクボタン」に統合します。

今回新たにサンプルも一つ追加しましたので、さらにご活用いただければと思います。

ところで、transitionプロパティはCSS3なのでベンダープレフィックスは必要？！

と考えそうなところですが、現在主要なブラウザではtransitionプロパティでベンダープレフィックスを使う必要はないようです。次のリンク先をご確認ください。

こんにちは（・∀・）

今回はスマホサイト向け、横にスクロールするナビゲーションのサンプルをご紹介します。

こんにちは（・∀・）

今回ご紹介するのは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の場合、ボタンの形が勝手に角丸でグラデーションになってしまいます。それを防ぐ方法をご紹介します。

こんにちは（・∀・）

こんにちは（・∀・）

こんにちは（・∀・）

今日は4年に一度の2月29日ですが、いかがお過ごしでしょうか。もうすぐオリンピックです、楽しみですね。

さて、本題に戻りますが、画面の表示サイズにあわせて横幅や高さを指定したい時があると思います。横幅はwidth:100%でいいのですが、高さはデバイスの画面解像度やブラウザの表示サイズによって変わってくることがあります。通常は特に問題ないのですが、異なる画面サイズでもパララックスなど一つのセクションを画面にピッタリ表示したい場合はどうしたらよいのか...

こんにちは（・∀・）

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

こんにちは（・∀・）

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

*現在こちらのサンプルはGoogleマップ仕様変更のため表示されません。

こんにちは（・∀・）

こんにちは（・∀・）

今回はスマホ用のナビゲーションをご紹介します。以前からご紹介してありますスマホサイトのメニューボタン(ハンバーガーボタン)をタップしてドロワーナビが展開するタイプとは異なり、ボタンをタップするとコンテンツの上に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だけで簡単にできるようです。

こんにちは（・∀・）

アクセス解析というとやはりGoogleアナリティクスが高機能でしかもフリーという事で皆さんもご利用になっていることだろうと思います。もちろんアクセス解析はGoogleアナリティクスでも良いのですが、ここではGoogleアナリティクスは置いておいて、今回は使い勝手が良くて設置も簡単、動作も軽快なw3Analyzerというアクセス解析があるのでご紹介したいと思います。

こんにちは（・∀・）

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

こんにちは（・∀・）

CSSだけで作ってみましたシリーズです。今回はドロップダウンメニューをご紹介します。通常のドロップダウンメニューとtransitionプロパティで動きのあるドロップダウンメニューの横バージョンと縦バージョンの4タイプです。transitionプロパティはdisplayでの制御をサポートしていないため、子孫メニューの制御はoverflowで行っております。displayでの制御も可能ですが、その場合動きはなくなり、表示している矢印も表示されなくなります。

こんにちは（・∀・）

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

こんにちは（・∀・）

前回は画像や背景画像を使わずに、マウスオーバーするとCSSだけで要素の色が変化するロールオーバーを、サンプルを使用してご紹介しました。

今回は画像や背景画像を使ってマウスオーバーするとCSSだけで画像が変化するロールオーバーを、サンプルを使用してご紹介します。

こんにちは（・∀・）

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

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

こんにちは（・∀・）

今回は画像や背景画像を使わずに、マウスオーバーするとCSSだけで要素の色が変化するロールオーバーを、サンプルを使用してご紹介します。

マウスオーバーしてマウスホバーでロールオーバー...

一体なんのこっちゃという感じですね。

要素にマウスポインターが乗った(マウスオーバーした)時に:hover擬似クラスでロールオーバー(結果)させます。

こんにちは（・∀・）

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アコーディオンのサンプルをご紹介します。

こんにちは（・∀・）

今日はレイアウトする際に使うと便利なCSS3のbox-sizingプロパティの使い方についてご紹介して行きます。

こんにちは（・∀・）

今日はdisplayプロパティの値tableとtable-cellについてのご紹介になります。

こんにちは（・∀・）

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

こんにちは（・∀・）

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

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

こんにちは（・∀・）

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

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

こんにちは（・∀・）

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

こんにちは（・∀・）

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

こんにちは（・∀・）

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

こんにちは（・∀・）

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

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

こんにちは（・∀・）

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

こんにちは（・∀・）

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

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

こんにちは（・∀・）

当サイトも実は密かにワードプレス化を進めている今日この頃です。

先日、コンタクトページをワードプレスの固定ページに置き換えようと現在使っているPHPのメールフォームの移植を試みたのですが上手くいかず...

一から作り直す時間も無かったため何か良さそうな物は無いものかと探していたらMW WP Formというプラグインを発見。設置も簡単そうなので早速導入しようとしたのですが、すごくどうでもいい所で軽くはまってしまったのでそのシェアも兼ねてのご紹介です。

こんにちは（・∀・）

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

こんにちは（・∀・）

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

設定方法は簡単です。

次のリンク先、Googleポリシー通りAdsenseを設定すればレスポンシブデザイン対応なAdsense付きWebサイトが出来上がります。

こんにちは（・∀・）

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

こんにちは（・∀・）

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

こんにちは（・∀・）

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

こんにちは（・∀・）

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

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

こんにちは（・∀・）

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

こんにちは（・∀・）

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

こんにちは（￢ｖ￢）

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

こんにちは（￢ｖ￢）

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

こんにちは（・∀・）

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

こんにちは（￢ｖ￢）

PHP5.2からPHP5.3への移行は中々大変ですね。そこで今回は早速遭遇した不具合についての情報共有です。

こんにちは（￢ｖ￢）

Windows7にApache2.2 VC9のインストール(Apache Lounge版)についてです。

PHP5.3以降のPHPをそろそろ使いたいのですが(PHP5.3とかPHP5.4とか)apache.orgからは未だApache VC6版しか出ておらず...

こんにちは（￢ｖ￢）

今回はイラストレーターに関しての情報共有です。

こんにちは（￢ｖ￢）

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

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

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

こんにちは（￢ｖ￢）

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

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

こんにちは（￢ｖ￢）

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

こんにちは（・∀・）

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

こんにちは（・∀・）

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

こんにちは（・∀・）

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

こんにちは（・∀・）

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

こんにちは（・∀・）

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

こんにちは（・∀・）

jQueryを使用したサンプルをご紹介します。今回はドロップダウンメニューです。

こんにちは（・∀・）

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

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

こんにちは（・∀・）

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

こんにちは（・∀・）

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

こんにちは（・∀・）

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

こんにちは（・∀・）

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

こんにちは（・∀・）

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

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