キーワード検索
Webデザインラボ管理人のブログ
* Web制作やネットに関連しない内容の投稿は別ブログへ移動しました。
カメラ入門
GIMP関連
Inkscape関連
Web制作関連
iPhone・iPad関連
JavaScript初心者向け
jQuery初心者向け
*お探し物はページ内検索 command + F or ctrl + FでGetして❗️
例：レイアウト系のサンプルを探したい場合は「レイアウト」、スクロール系のサンプルを探したい場合は「スクロール」などなど。
各OSごとに掲載してあります。また、それぞれバージョンがありますが制作するコンテンツのサーバー環境にあわせると開発もスムースに進みますね。特に無ければApacheなら2.4、PHPなら5.6あたりが安定して利用できそうです。
ここでの解説はWebデザイナーやコーダー向けのローカル環境構築なので、セキュリティ的な事は考慮(りょ)しておりません。
*お探し物はページ内検索 command + F or ctrl + FでGetして❗️
例：Apache系のサンプルを探したい場合は「Apache」、PHP系のサンプルを探したい場合は「PHP」などなど。
Mac関連
Web制作に役立つツール類
こんにちは（・∀・）
PHPで簡易CMSのテンプレートを作りましたのでご紹介します。
その前に、そもそもCMSって何⁉️
コンテンツ管理システム（英: content management system, CMS）は、ウェブコンテンツを構成するテキストや画像などのデジタルコンテンツを統合・体系的に管理し、配信など必要な処理を行うシステムの総称。2005年頃より一般的に普及したといわれる。コンテンツマネージメントシステムとも呼ばれる。
引用：Wikipedia
CMSといえばWordPressやMovable typeが有名どころです。
大きな会社ではオリジナルな高性能CMSを使用しているところも多いと思います。
管理を考えると大規模なWebシステムを組む場合はCMSの導入は不可欠です。
こんにちは（・∀・）
昨年【2018年度決定版】レスポンシブデザインのブレークポイントはこれで決まり❗️という内容の記事を投稿しました。
基本的な考えは変わってません。細かな指定で表示したい場合は前回ご紹介した通りの設定が良いと思っています。
しかし、管理することを考えると前回ご紹介したブレークポイントの数では手間が掛かってしまうのも事実。
なので今回、ちょっと多かったブレークポイントを少し減らしてみることにしました。
こんにちは（・∀・）
前回の【CSS3】いい感じな日本語フォントでWebフォントで良い感じの日本語フォントをご紹介しました。今回は英語版となります。
いつも言ってますが、ここでいう「いい感じ」というのは、字体ももちろんそうですが、フリーで個人・商用利用も可のことを言います。
こんにちは（・∀・）
以前【CSS3】手書き風でいい感じなフォントでWebフォントでフォントをご紹介しました。今回はその第２段となります。
前回も言いましたが、ここでいう「いい感じ」というのは、字体ももちろんそうですが、フリーで個人・商用利用も可のことを言います。
こんにちは（・∀・）
要素の背景に動画を表示する2種類の方法をご紹介します。
前回のvideo要素に続いて今回は、YouTubeの埋め込みコードのiframe要素を使用した、YouTube動画を背景に表示する方法です。
こんにちは（・∀・）
前回投稿した【MAMP】PHPのdate関数の時間が規則的にズレるでPHPのdata関数に触れたついでにPHPで日時の取得方法をご紹介します。
こんにちは（・∀・）
先程の投稿【WordPress5】新しくなったエディターのビジュアルエディターをコードエディターに設定変更するで、ビジュアルエディターからコードエディターへ変更する方法をご紹介しました。
しかし、使い辛いのは変わりません。
しょうがないので慣れるまでは元のクラシックエディターに戻します。
こんにちは（・∀・）
今日WordPressを更新したらエディターが新しくなりました。
そういえば新しいエディター「Gutenberg（グーテンベルク）」をお試しください的なオススメがダッシュボードに以前から表示されていました。
こんにちは（・∀・）
サーバの移行などに伴うデータ入れ替え等で、WordPressのsqlデータはインポートできたのに、Webサイトが正しく表示されない、なんてことがある場合があります。
そんな時、先ずは接頭辞が合っているかどうか確認してみてください。
こんにちは（・∀・）
前回投稿の【WordPress】ターミナルで簡単にssh接続する方法でターミナルでssh接続をする方法をご紹介しました。
今回はいよいよsqlファイルをssh接続したターミナルからインポートする方法をご紹介したいと思います。
こんにちは（・∀・）
前回投稿の【WordPress】phpMyAdminのインポートできる容量を大きくするでphpMyAdminのインポートできるファイルの容量を上げる方法をご紹介しました。
が、
レンタルサーバーなどではデータのインポート容量の上限変更が許可されていなかったりすることがあります。
なので設定を変更することなくデータをインポートすることができるssh接続の方法を今回ご紹介します。
もちろんssh接続が許可されていることが前提ですが、どこのレンタルサーバーもスタンダード以上の契約であればssh接続ができるところが多いです。
こんにちは（・∀・）
WordPressのデータはMySQLのデータベースに格納されていることは皆さんご存知かと思いますが、WordPressを使っていても直接データベースを操作しているという実感はないのではないでしょうか。
こんにちは（・∀・）
当サイトのコメントはFacebookのコメントプラグインを使用しております。
そのコメントプラグインが先週位から表示がおかしくなっていることに気がつきました。
こんにちは（・∀・）
Web制作関連の方ならPHPを扱う機会は多いと思いますが、大概はHTML内にPHPを入力して直接表示しているパターンが多いのではないかと思います。
なのでWeb制作関連の方は書き方によってPHPの閉じタグは必要ないということを知らない方もいるのでは⁉️と今更ながらに思ったのでシェアしようと思います。
こんにちは（・∀・）
PHPで作ったメールフォームでは、画面遷移なしでメールの送信はできません。
Ajaxを使えば画面遷移なしでメールの送信はできますが、できるだけ簡単に画面遷移しないでメールの送信ができるメールフォームを作りたいのです。
なのでiframeを使ってチョチョイと作ってみたいと思います。
こんにちは（・∀・）
前回はインスタグラムにPCから写真を投稿する方法をご紹介しましたが、いかがでしたでしょうか⁉️
今回も前回に引き続きインスタグラムに関する内容で、インスタグラムのフォローボタンの作り方についてご紹介したいと思います。
こんにちは（・∀・）
前回はdisplayプロパティの値「grid」を使ってスマホサイトにも対応した通常レイアウトのサンプルをご紹介しましたが、今回は通常レイアウトではなく、グリッドデザインのレイアウトをご紹介します。もちろんスマホ対応です。
基本的なCSS構成は前回ご紹介しました【CSS】CSSのGridでスマホサイト対応レイアウトとほぼ同じです。
前回と同じく、すべてのサンプルはレスポンシブデザイン対応、横幅600px以下になると1カラムになるよう設定してあります。
サンプルは全部で5パターンです。
こんにちは（・∀・）
今日はdisplayプロパティの値「grid」を使ってスマホサイトにも対応したレイアウトのサンプルをご紹介します。
こんにちは（・∀・）
今日はナビゲーションボタンをcalc()関数を使って作ってみます。
前回【ブログ】CSS3のcalc()関数なら割り切れない数値でも本当にピッタリになるの⁉️で実験した通りChromeでの表示を気にする必要がありますが、1px程の誤差なのでうまく調整して作っていきましょう。
こんにちは（・∀・）
前回の【CSS】CSSでも変数が使えるって知ってました⁉に続いて、知ってました⁉️シリーズ第２弾。
「CSSでcalc()関数が使えるって知ってました⁉️」です。
こんにちは（・∀・）
SassやLESS、または他のプログラムのようにCSSでも変数を使用することができます。
今日はSassやLESSではなく、CSS変数の使用方法をご紹介します。
こんにちは（・∀・）
親要素から特定する子要素にCSSを適用させる場合、「p > img」みたいな感じでセレクターを利用してCSSを適用させることができます。
その逆で子要素から親要素にCSSを適用させる場合、上記のようにセレクターを使ってCSSを適用させることはできません。
CSS4のセレクターで「:has()」というのがあり、上記のことが実現できますが、まだどのブラウザも対応しておりません。
CSSで完結したいところですが、こんな時はjQueryで解決できます。
こんにちは（・∀・）
こちらの【CSS】スマホ対応CSSだけでドロップダウンメニューの横並びドロップダウンメニューをスマホに対応させました。3パターンのサンプルをご用意しましたのでよろしければご活用ください。
こんにちは（・∀・）
CSSでフォントの種類を指定する場合、「font-family」で指定しますが、
フォントは何を指定してますか⁉️
こんにちは（・∀・）
WordPressにはタグやカテゴリーを出力させる関数があります。
しかしタグやカテゴリーを出力させるとリンクも自動的に付いてくるようになっています。
カテゴリーに関してはカテゴリー分けしているのでリンクが付いても全然問題ありません。しかしタグに関しては別です。
タグの出力はしたいけどリンクは付けたくありません。
ということで、今回はタグは表示するけどリンクは付与しないという出力方法をご紹介します。
ついでなのでカテゴリーのリンクなしも合わせてご紹介します。
こんにちは（・∀・）
今回もinput要素やtextarea要素に文字が入力されたら有効になるリンクボタンのjQueryのサンプルをネイティブ化しましたのでご紹介します。
こちらも以前ご紹介しました、【jQuery】入力したら有効になるリンクボタンのサンプルと内容はほぼ一緒です。
こんにちは（・∀・）
ラジオボタンやチェックボックスにチェックを入れたら有効になるリンク、こちらの【jQuery】チェックしたら有効になるリンクボタンの方で最初jQuery版のサンプルを作りました。
jQueryプラグインを使わないという最近のマイブーム、新たにネイティブ版でも作ってみようと思い立ち、JavaScript版のサンプルを作りましたのでここでご紹介します。
素直にjQueryを使った方が全然簡単ですが...
こんにちは（・∀・）
当サイトの月間アクセスTop10で、ちょくちょくTop10に入って来るページがあります。
【jQuery】表示しているブラウザの高さを取得してCSSのheightに指定
タイトルの通りブラウザの高さを取得してCSSのheightに指定するというjQueryのスクリプトをご紹介しているページ。
そんな人気❓ページのjQueryスクリプトをネイティブ化してみようかなと思い立ち、動き的には同じですが、あえてjQueryプラグインを使わない方法でスクリプトを描いてみたという内容の投稿です。
こんにちは（・∀・）
ユーザビリティを考慮したタブ移動もできるドロップダウンメニューのサンプルをご紹介します。
こんにちは（・∀・）
今日はCSS3のobject-fitで画像を簡単にタイル表示にする方法をご紹介します。
こんにちは（・∀・）
Flexboxでjustify-content:centerを指定した要素の中央寄せで、最後に表示される行の要素は左寄せにしたい場合、どうしたらいい⁉️
こんにちは（・∀・）
今日はHTML5.1で追加されたpicture要素を使って画像を表示する方法をご紹介します。
こんにちは（・∀・）
今日はサイトマップを自動で作ってくれる便利エディターサイトマップを作成-自動生成ツール「sitemap.xml Editor」をご紹介します。
こんにちは（・∀・）
前回投稿した【決定版】レスポンシブデザインのブレークポイントはこれで決まり❗️でご紹介しましたレスポンシブデザインレイアウトに、PCとモバイルサイトを行き来できるボタンを付けてみました。
レスポンシブデザインで表示できれば十分だとは思いますが...
「PCとモバイルの表示を切り替えられるボタンも付けたい...」なんてオーダーをいただいた場合、このJavaScriptで対応できます。
確かにスマホで見てるときに「このページPCサイトで見たいのになぁ」ってときってあるかも...
こんにちは（・∀・）
以前【CSS】レスポンシブデザインのブレークポイントは⁉️でブレークポイントをいくつも作ると管理が大変だからメジャーブレークポイントを一つ作って...
という投稿をしましたが、
全部じゃなくてもいいので、現在市販されているデバイスサイズをなるべくカバーしたい...というお願いを受けることもあると思います。
こんにちは（・∀・）
前回の【制作Tips】facebook・TwitterのOGP設定でOGPの設定方法をご紹介しましたが、今回はそのOGP設定の際に使用するデバッガーをご紹介します。
こんにちは（・∀・）
今日はWebサイトのOGP設定方法について解説します。
こんにちは（・∀・）
明けましておめでとうございます。
だいぶ明けてしまいましたが、皆さん新年はいかがお過ごしでしたか、今年は共に良き年にしましょう。
さて、新年最初の投稿はGoogle Chromeでキャッシュを簡単に削除するショートカットキーをご紹介します。
Web制作に関わる方ならGoogle Chromeを使用している方は多いと思いますし、わりと知られている内容なので「知ってますよ」という方はスルーしていただければと思います。
Web制作初心者の方はどうぞ覚えていってください。
こんにちは（・∀・）
年の瀬も押し迫りました今日この頃、みなさんいかがお過ごしでしょうか。本日の投稿が年内最後の投稿となります。
今日は表題の通り、キャッシュを無効化せずにCSSの変更を反映させる方法についてご紹介します。
こんにちは（・∀・）
今日はJavaScriptで振り分ける方法２パターンをご紹介します。
こんにちは（・∀・）
今日はレンタルサーバーにWordPressをインストールする方法をご紹介します。
今回の投稿はさくらのレンタルサーバーを利用している方限定の記事となります。
こんにちは（・∀・）
今日はJavaScriptで取得した値をPHPに渡すサンプルをご紹介します。
前回ご紹介しましたが、【フォーム】JavaScriptでラジオボタンとチェックボックスの入力判定のラジオボタンとチェックボックスで取得した値を、今度はPHPに渡すサンプルになります。
こんにちは（・∀・）
今日はJavaScriptでラジオボタンとチェックボックスの入力判定を作ってみましたのでご紹介します。
こんにちは（・∀・）
前回Flexboxでレイアウトする方法HTML5でFlexレイアウトのテンプレートをご紹介しました。
普通にレイアウトする分にはそれで十分なのですが、スクロール量が少ない時でもFooterを画面の一番下に表示したい場合、上記の方法だとそれを実現することができません。
なので今回はFlexboxのレイアウトでFooterを画面下部に表示してレイアウトする方法をご紹介します。
こんにちは（・∀・）
今日はHTML5でFlexレイアウトのテンプレートサンプルをご紹介します。
以前Flexboxでレイアウトする方法についてご紹介したことがありますが、テンプレートとしてご紹介はしてきませんでした。それはやはりIEで使用することができないというのが一番の理由です。しかし、今年の4月でWindows Vista(IE9)のサポートも終わりWindows 7以降のブラウザはIE11となりますのでいよいよFlexboxでレイアウトすることができるようになりました。
ということで改めて、この度Flexboxでのレイアウトテンプレートの公開という運びとなりました。
frameレイアウト・tableレイアウトからfloatレイアウトときていよいよFlexboxでのレイアウトとなります。CSSとブラウザの進化によりこれまでのfloatレイアウトが負のレガシーとなりIE6でのカラム落ちの対応に追われた日々を懐かしむようになることは間違いありません。
こんにちは（・∀・）
今日はHTML5でFloatレイアウトのテンプレートサンプルをご紹介します。
こんにちは（・∀・）
今回は当サイトの他のサンプルを組み合わせてパララックスレイアウトを作ってみましたのでご紹介します。
使用するサンプルはヘッダーをトップに固定してスクロールでアニメーションとスクロールで要素の拡大縮小と移動とベースにCSSだけでパララックスレイアウトです。
こんにちは（・∀・）
今回はjQueryでヘッダーをトップに固定するスティッキーヘッダーと、スクロールするとそのヘッダーがCSSのアニメーションで拡大縮小するサンプルをご紹介します。
レスポンシブデザインに対応してます。
こんにちは（・∀・）
ある要素にCSSのdisplay:noneをJavaScript内で指定して、それを同じくJavaScriptでdisplay:blockにする、というようなスクリプトを組むことはよくあると思います。
こんにちは（・∀・）
WordPressで使用しておりますSNSのカウント数を早く表示をしてくれる「SBS Social Count Cache」というプラグインですが、最近Pocketのカウント数が取れなくなっておりました。
そんなおり、以前使用していた「SNS Count Cache」が更新されたという情報を耳にして、それならばいっそ元に戻してみようという事になりました。
ということでそのインストール方法についてご紹介したいと思います。
こんにちは（・∀・）
昔見たザ・インターネットという映画で、主演のサンドラ・ブロックがPCでピザを頼んでいたのを見て、おースゴーいなんて思っていましたが、今ではiPadで普通にピザを注文していることに気づき、そのスゴいと思ったことが普通のことになっているなんて、なんとも時代の流れを感じるところです。
ところで、レスポンシブデザインでWebサイトを作る際のブレークポイントはみなさんどうなさっていらっしゃいますか？？
こんにちは（・∀・）
PHPを使って開発しているとかWordPressを使っていてテーマをカスタマイズしているなどなど、PHPを使う場面はWeb開発者の方であれば少なくないと思います。しかしそのコードに何かしらのエラーがあるとPHPはブラウザにエラー内容を吐き出しページ内容を表示することができないようになっています。
こんにちは（・∀・）
先日DマガジンでMac Fanを読んでいたらマカーではなくマッカーだということを初めて知りました。皆さんいかがお過ごしでしょうか。
Windowsを使っていたときは.htaccessファイルを編集するのは普通に秀丸エディタでできたのですが。Macの場合はCotEditorで編集することはできないようで少し不便です。
こんにちは（・∀・）
今回はFlexboxでグリッドレイアウトを作ってみます。レスポンシブデザインでブレークポイントはスマホ・タブレット・PCの3つです。
以前CSSだけでグリッドレイアウトを作ってみましたが子要素の高さを固定にしないとグリッドレイアウトとしてうまく機能しなかったためなかなか使いづらかったのですが、高さの指定をする必要のないFlexboxは、まさにグリッドレイアウトのためにあるようなものですね
こんにちは（・∀・）
以前表示しているブラウザの高さを取得してCSSのheightに指定で要素の高さをjQueryで取得する方法をご紹介しましたが、実はCSSだけでも要素の高さを100%にする事ができるのです。
その時の投稿でも触れましたが、高さの単位「vh」を使えば簡単に要素の高さ100%を指定することができます。
こんにちは（・∀・）
前回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()で簡単に実現することができます。
今までどういう訳かご紹介していなかったので(こういうの結構多いです(;'∀'))、今さらですがご紹介したいと思います。
こんにちは（・∀・）
jQueryプラグインを使用したサンプルをご紹介します。今回使用するライブラリはカルーセルスライダーのslickです。
これまでも設置が簡単なカルーセルスライダーjCarouselLiteや、simplyScroll v2などをご紹介してきましたが、こちらのプラグインは設置が簡単なのに加えて、スタイルの変更も簡単にできるので、それらプラグイン以上に導入しやすいのではないかと思い今回ご紹介することとしました。
こちらのプラグインslickは、配布元にもサンプル例はあるのですが、サンプル例が色々とあり、設定方法もたくさんあって悩みそうなので、当サイトでよく使いそうなパターンのサンプルをいくつか作ってご紹介したいと思います。
こんにちは（・∀・）
今回は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の場合、ボタンの形が勝手に角丸でグラデーションになってしまいます。それを防ぐ方法をご紹介します。
こんにちは（・∀・）
CSS3で使えるようになりましたWebフォント(使い方や詳細に関してはこちら@font-faceで)ですが、当サイトでも試験的に導入しようと、手書き風の良さそうなフォントはないかなーとネットで探していたところ、いくつかいい感じのフォントがありましたので、今回はそれらフォントを使ったWebフォント導入とあわせてフォントのご紹介をしていきたいと思います。
ちなみにここでいう「いい感じ」というのは、字体ももちろんそうですが、フリーで個人・商用利用も可のことを言います。
こんにちは（・∀・）
FirefoxやChrome(拡張機能)ではブラウザ自体に備わっているので必要ないかなと思っていたのですが、やはり試しに導入してみようといまさらですが、当サイトでもPocketボタンを設置しました。Pocketボタンの設置方法についてご紹介します。
こんにちは（・∀・）
今日は4年に一度の2月29日ですが、いかがお過ごしでしょうか。もうすぐオリンピックです、楽しみですね。
さて、本題に戻りますが、画面の表示サイズにあわせて横幅や高さを指定したい時があると思います。横幅はwidth:100%でいいのですが、高さはデバイスの画面解像度やブラウザの表示サイズによって変わってくることがあります。通常は特に問題ないのですが、異なる画面サイズでもパララックスなど一つのセクションを画面にピッタリ表示したい場合はどうしたらよいのか...
JavaScriptネイティブ版はこちら【JavaScript】表示しているブラウザの高さを取得してCSSのheightに指定です。
CSSで高さ100%を指定する方法はこちらの【CSS】CSSで要素の高さ100%を指定する方法をご覧ください。
こんにちは（・∀・）
前回ご紹介致しましたレスポンシブなWordPressテーマに続きまして、ユーザーエージェントで振り分ける2カラムレイアウトと3カラムレイアウトのWordPressテーマをご紹介します。こちらもシンプルに作りましたので簡単にデザイン変更もできるかと思います、よろしければご活用ください。
こんにちは（・∀・）
JavaScriptでaタグなどに使用してタグを無効にするreturn false、通常であれば特に問題はないのですが、最近aタグを無効にしつつもクリック(タッチ)イベントは伝えたいということがありました。例えばよくあるページ内スクロールでページ内を移動しつつ他のこともしたい場合、return falseでaタグの挙動が無効化されているとページ内スクロールの他にもう一つ何かしたくてもそのクリック(タッチ)イベントは、return falseによって伝えてくれません。ではどうすれば良いか...
*現在こちらのサンプルはGoogleマップ仕様変更のため表示されません。
こんにちは（・∀・）
Styled Maps WizardというサイトでGoogleマップをカスタマイズすることができるのはご存知でしょうか。
ただしこちらのサイト、英語なのでちょっとわかりづらいかもしれません。
でも安心してください、とても簡単にGoogleマップをカスタマイズできる日本語のサイトがあります。こちらのコードが分からなくてもgoogle mapのデザインがカスタマイズできるコード生成ツールというサイトのコード生成ツールを使えば簡単にGoogleマップのカスタマイズができてオリジナルデザインのGoogleマップを作成することができます。
こんにちは（・∀・）
今回はスマホ用のナビゲーションをご紹介します。以前からご紹介してありますスマホサイトのメニューボタン(ハンバーガーボタン)をタップしてドロワーナビが展開するタイプとは異なり、ボタンをタップするとコンテンツの上にnav要素が展開してメニューを表示させるタイプのナビゲーションになります。サンプル１はボタンが右側、サンプル２はボタンが左側になります。PCサイトとスマホサイトのレスポンシブでレイアウトしてありますのでそのままレスポンシブレイアウトでご利用いただけます。
こんにちは（・∀・）
今回ご紹介しますドロワーナビはコンテンツとサイドバーが一緒にスライドするタイプです。こちらも同じくPCサイトは通常のページでスマホサイトはドロワーナビにしてレスポンシブルで切り替えます。
こんにちは（・∀・）
今回ご紹介しますドロワーナビは以前ご紹介しましたコンテンツがスライドするレスポンシブなドロワーナビとはサイドバー表示の仕方が少し違うドロワーナビになります。サイドバーがコンテンツの上に表示されます。こちらも同じくPCサイトは通常のページでスマホサイトはドロワーナビにしてレスポンシブルで切り替えます。
こんにちは（・∀・）
前回はHTMLメールをどうやって作るのかをやりましたが、今回はHTMLメールの基本的なレイアウトやデザインについてご紹介します。順番が逆になり、また、かぶる所もあるのですが...
こんにちは（・∀・）
通常のメールソフトやgmailなどのフリーメールでもちょっとした文字の装飾などはできますが、本格的なHTMLメールを作るにはどうしたらいいのでしょう？何か特別なソフトが必要なのでしょうか...？
いいえ、特にソフトは必要ありません。通常のテキストエディタとメールソフト(Windows Live メールなど)、それにWebブラウザがあれば簡単にHTMLメールを作ることができます。
そこで今回はHTMLメールの簡単な作り方をご紹介したいと思います。
こんにちは（・∀・）
displayプロパティにCSS3で追加された値boxですが、その後何度かの仕様変更を経てflexという値に変更されました。
boxの頃はIEがまったく対応しておりませんでしたので使うに使えない値でしたが、box → flexbox → flexへと変更になりIEでも使用することが出来るようになりました(IE11以上)。自動で高さを他のカラムに揃えるなどとても使い勝手が良い値なので今後floatに代わってレイアウトで使用することになるのは確実ですね。
こんにちは（・∀・）
jQueryライブラリを使用したサンプルをご紹介します。今回も前回に引き続きレスポンシブでスマホにも対応したカルーセルスライダーのご紹介です。今回使用するライブラリはsimplyScroll v2です。
こんにちは（・∀・）
jQueryライブラリを使用したサンプルをご紹介します。今回使用するライブラリはjCarouselLiteです。レスポンシブでスマホ・PCどちらにも対応したカルーセルスライダーです。
こんにちは（・∀・）
jQueryを使用したサンプルをご紹介します。今回はスクロールしても画面内で要素を固定させるスティッキーサイドバーです。
こんにちは（・∀・）
レスポンシブデザインでWebページをスマホサイトとPCサイトに振り分けたとき、ある要素のスマホサイトにはリンクがあり、PCサイトではなしにするという仕様のとき、PCサイトのリンククリックを無効にする方法はないのか…と調べてみたらありました。CSSだけで簡単にできるようです。
こんにちは（・∀・）
アクセス解析というとやはりGoogleアナリティクスが高機能でしかもフリーという事で皆さんもご利用になっていることだろうと思います。もちろんアクセス解析はGoogleアナリティクスでも良いのですが、ここではGoogleアナリティクスは置いておいて、今回は使い勝手が良くて設置も簡単、動作も軽快なw3Analyzerというアクセス解析があるのでご紹介したいと思います。
元々はOASAKA PHPさんが配布していたのですが、現在は更新も配布もしていないようで、もう新たに導入する事はできないのかなと思っていたら、アクセス解析が気になるんです。さんや、w3Analyzer UTF-8版さんが修正版を配布していらっしゃるようです。
こんにちは（・∀・）
CSSだけで作ってみましたシリーズです。今回はドロップダウンメニューをご紹介します。通常のドロップダウンメニューとtransitionプロパティで動きのあるドロップダウンメニューの横バージョンと縦バージョンの4タイプです。transitionプロパティはdisplayでの制御をサポートしていないため、子孫メニューの制御はoverflowで行っております。displayでの制御も可能ですが、その場合動きはなくなり、表示している矢印も表示されなくなります。
こんにちは（・∀・）
jQueryを使用したサンプルをご紹介します。今回はjQueryでブロック要素の表示非表示です。要素の非表示はJavaScriptで制御しているのでJavaScriptを切っている場合はすべて展開した状態で表示されます。
こんにちは（・∀・）
前回は画像や背景画像を使わずに、マウスオーバーするとCSSだけで要素の色が変化するロールオーバーを、サンプルを使用してご紹介しました。
今回は画像や背景画像を使ってマウスオーバーするとCSSだけで画像が変化するロールオーバーを、サンプルを使用してご紹介します。
ボタンがテキストリンクのロールオーバーはこちらをご覧ください。
【CSS3】マウスオーバーでボタンの色が変わるロールオーバー
アニメーション系の動きのロールオーバーボタンはこちらをご覧ください。
【CSS3】CSSだけでアニメーションするリンクボタン
こんにちは（・∀・）
CSSだけで作ってみましたシリーズです。
今回は画像または背景画像をフラッシュの様にフルスクリーン表示させるサンプルをご紹介します。
こんにちは（・∀・）
今回は画像や背景画像を使わずに、マウスオーバーするとCSSだけで要素の色が変化するロールオーバーを、サンプルを使用してご紹介します。
マウスオーバーしてマウスホバーでロールオーバー...
一体なんのこっちゃという感じですね。
要素にマウスポインターが乗った(マウスオーバーした)時に:hover擬似クラスでロールオーバー(結果)させます。
ボタンが画像のロールオーバーはこちらをご覧ください。
【CSS】マウスオーバーでボタンの画像が変わるロールオーバー
アニメーション系の動きのロールオーバーボタンはこちらをご覧ください。
【CSS】CSSだけでアニメーションするリンクボタン
こんにちは（・∀・）
CSSだけで作ってみましたシリーズです。今回ご紹介するサンプルは、サイズも可変してスマホにも対応したタブレイアウトです。
こんにちは（・∀・）
CSS3のAnimationやtransitionといったプロパティのおかげでJavaScriptを使わなくても動きのあるWebサイトが作れるようになってきました。そこで今回はCSSだけで作る、サイズが可変してスマホにも対応したアコーディオンをご紹介します。
こんにちは（・∀・）
CSS3のAnimationやtransitionといったプロパティのおかげでJavaScriptを使わなくても動きのあるWebサイトが作れるようになってきました。そこで今回はCSSだけで作る、サイズが可変してスマホにも対応したアコーディオンをご紹介します。
こんにちは（・∀・）
最近様々なサイトで記事の下の方にFacebookのコメント入力欄を目にする事が多くなりました。そこで今回はFacebookのコメントプラグインの設定方法について解説したいと思います。
こんにちは（・∀・）
今回はFacebook Like BoxがPage Pluginに変更になり設定方法が変更になったので新しい設定方法についての更新記事です。
こんにちは（・∀・）
今回Twitterボタン、Facebookいいねボタン、はてなブックマークボタン、Google+1ボタンの設定についてのページを更新しましたので、それにあわせてこちらのソーシャルブックマークボタンの横バルーンと縦バルーンについてのページも更新します。
こんにちは（・∀・）
今回も前回、前々回に続きソーシャルブックマークボタンの設置についての更新記事です。今回はTwitterボタンです。
こんにちは（・∀・）
今回も前回に続きソーシャルブックマークボタンの設置についての更新記事です。今回ははてなブックマークボタンです。
こんにちは（・∀・）
前回のFacebookいいねボタンに続き今回はGoogle +1ボタンの設置についての更新記事です。
こんにちは（・∀・）
今回はFacebookいいねボタンの書き方が少し変更になったので新しい書き方についてご紹介します。
こんにちは（・∀・）
今回はTwitterとFacebookの連携についてです。
色々なSNSが普及している中、TwitterとFacebookはWebサイトの更新情報代わりに利用されているかたも多いと思います。
Twitterだけ、Facebookだけという場合は問題ないのですが、TwitterとFacebookの両方を運用している場合、同じ内容を2回投稿することになり面倒です。
そこで今回はTwitterのアプリ連携を使用してTwitterの投稿をFacebookにも反映させる設定をご紹介します。
こんにちは（・∀・）
iPhoneでホームページを見ているとき縦向き(ポートレート)から横向き(ランドスケープ)に画面の向きを変えた時にホームページの文字サイズだけが自動で勝手に大きくなります。
iPhoneサファリの初期設定では縦画面から横画面に変更すると文字の大きさが自動で調整されるように設定されています。1行の文字サイズが多くなると読みづらくなるだろうというユーザビリティから来ているのだと思うのですが逆に読みづらい気がします。そこで今回は文字サイズが変わらなくなるようにする設定をご紹介したいと思います。
こんにちは（・∀・）
今回はスクロールしたブラウザのの移動量を表示するjQueryのサンプルをご紹介します。
ブラウザ画面をスクロールして移動した際の座標を取得します。ブラウザの移動量にあわせてアニメーション効果等を設定する際に使用すると便利です。
こんにちは（・∀・）
以前【Google】Google Adsenseがレスポンシブデザインに対応しました...を投稿をしましたが、その時はJavascriptで広告サイズを変更する仕様でした。最近Google Adsenseのサイトを確認しましたらCSS3のメディアクエリで広告サイズを変更するコード(ベータ版)が出ておりましたので今日はそのご紹介です。
こんにちは（・∀・）
今回はクリッカブルマップのご紹介です。
3種類のサンプルをご用意しました。一つ目は通常のクリッカブルマップ。二つ目は通常のクリッカブルマップをJavaScriptでロールオーバーするクリッカブルマップ。三つ目はCSSでクリッカブルマップ風。です。
こんにちは（・∀・）
今回はJavaScriptで作るタイマー系のスクリプトをまとめましたのでそれらサンプルのご紹介です。JavaScriptでCSSを切り替えるようになっているので背景色や画像以外の効果を設定することもできますので色々とお試しください。
こんにちは（・∀・）
今日はjQueryを使ったスクロールするとCSS効果が適用されるサンプルをご紹介します。サンプルは背景色を変更させてますが、色々なCSSの効果を試してみてください。
こんにちは（・∀・）
今回はマウスホイールを回転させると要素間を移動するパララックスレイアウトのサンプルをご紹介したいと思います。表示される画面ごとにスクロールしますので長いコンテンツは入れられないため使い道は限られますが、スタートページ的な使い方をしたり、個人や企業のポートフォリオサイト的に使って見ると面白そうです。
前回ご紹介しました【CSS3】CSSだけでパララックスレイアウトと同様、スマホサイトにも対応したレスポンシブデザインですが、スマホサイトでは背景画像は固定しないためパララックスレイアウトではなくなります。また、一部Android端末の横画面だとうまく動作しない可能性があります。
こんにちは（・∀・）
今回はCSSだけで実現できるパララックスレイアウトのサンプルをご紹介したいと思います。コンテンツの長さが要素ごとに違っても可変しますのでレイアウトに柔軟です。
スマホサイトにも対応したレスポンシブデザインですが、スマホサイトでは背景画像は固定しないためパララックスではなくなります。
こんにちは（・∀・）
2カラムレイアウトと3カラムレイアウトのレスポンシブなWordPressのテーマです。シンプルに作りましたので簡単にデザイン変更もできるかと思います、よろしければご活用ください。
こんにちは（・∀・）
今回はクッキーを使ってスマホとタブレット、PCを振り分けるJavaScriptをご紹介します。
こんにちは（・∀・）
JavaScriptでスマホやタブレットそれとPCを振り分ける方法をご紹介します。
こんにちは（・∀・）
今回も前回の投稿に引き続きjquery.cookie.jsを使ったサンプルをご紹介します。jquery.cookie.jsで背景色変更ボタンです。
こんにちは（・∀・）
今日も前回の投稿に引き続きjquery.cookie.jsを使ったサンプルのご紹介です。jquery.cookie.jsでテキストサイズ変更ボタンです。
こんにちは（・∀・）
今回は前回の投稿に引き続きサイズが可変してスマホにも対応して、さらにクッキーで制御したjQueryタブレイアウトのご紹介です。
こんにちは（・∀・）
今回も前回に引き続きアコーディオンのご紹介です。前回ご紹介したアコーディオンは縦バージョンでしたが今回はスマホ画面では縦バージョンでPC画面では横バージョンのアコーディオンです。
こんにちは（・∀・）
今日はレイアウトする際に使うと便利なCSS3のbox-sizingプロパティの使い方についてご紹介して行きます。
box-sizingプロパティに関しての解説ページはこちらをご覧ください。
box-sizing【CSS3リファレンス】
またflexboxでレイアウトする方法に関しての解説ページはこちらをご覧ください。
【CSS3】display:flexについて
こんにちは（・∀・）
今日はdisplayプロパティの値tableとtable-cellについてのご紹介になります。
displayプロパティについてはこちらをご確認ください。
display【CSS3リファレンス】
こんにちは（・∀・）
今日は背景画像をCSSでフラッシュの様にフルスクリーン表示させてjQueryで画像を切り替えるサンプルをご紹介します。
CSSで画像をフラッシュのようにフルスクリーン表示させてさらにjQueryで画像を切り替えます。画像枚数分リピートして切り替わります。
こんにちは（・∀・）
今日は@importについてです。
@importで外部CSSを読み込むのはパフォーマンスの低下に繋がるという検証結果を最近世間で見かける様になっておりましたので、当サイトでも切り替えようと考えてはいたのですが中々移行する事が出来ずにおりました。
こんにちは（・∀・）
今回はjQueryでグローバルナビゲーションをトップに固定するスティッキーナビ+ドロップダウンメニューをご紹介します。
こんにちは（・∀・）
今回はjQueryでグローバルナビゲーションをトップに固定するスティッキーナビをご紹介します。
レスポンシブデザインに対応しました。
こんにちは（・∀・）
ワードプレスのウィジェットの追加方法についてです。
デフォルトのテーマでは通常2個か3個のウィジェットの表示スペースがあります。しかしそれでは足りないという方はウィジェットの表示スペースを追加することができます。
こんにちは（・∀・）
当サイトも実は密かにワードプレス化を進めている今日この頃です。
先日、コンタクトページをワードプレスの固定ページに置き換えようと現在使っているPHPのメールフォームの移植を試みたのですが上手くいかず...
一から作り直す時間も無かったため何か良さそうな物は無いものかと探していたらMW WP Formというプラグインを発見。設置も簡単そうなので早速導入しようとしたのですが、すごくどうでもいい所で軽くはまってしまったのでそのシェアも兼ねてのご紹介です。
こんにちは（・∀・）
Google Adsenseがレスポンシブデザインに対応しました。
設定方法は簡単です。
次のリンク先、Googleポリシー通りAdsenseを設定すればレスポンシブデザイン対応なAdsense付きWebサイトが出来上がります。
こんにちは（・∀・）
今回は以前ご紹介しましたコンテンツがスライドするドロワーナビを改良して、PCサイトは通常のページ、スマホサイトはドロワーナビで表示するサンプルをご紹介します。
こんにちは（・∀・）
今回はJavaScriptのローカルストレージとクッキーのサンプルをご紹介します。
こんにちは（・∀・）
今回はlightbox系プラグインのご紹介です。
lightbox系のプラグインは色々とありますね、選ぶのも迷ってしまいます。なので良さそうなのを2つご紹介させていただきます。
こんにちは（￢ｖ￢）
今日はMovable TypeとWordPressについてです。Movable TypeとWordPressはどちらも人気があるCMSですが...
こんにちは（￢ｖ￢）
jQueryやFlash等をWebサイトで使用する場合、jQueryやswfobjectのライブラリをそれぞれダウンロードしてHTMLに組み込まなければいけません。
こんにちは（￢ｖ￢）
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.
等々としますが、
一体うちの会社はどれにしたらいいのかというようなご質問を受けたことがあります。
こんにちは（・∀・）
JavaScriptを使用したサンプルをご紹介します。今回は背景色を変更するスクリプトのサンプルです。
こんにちは（・∀・）
JavaScriptを使用したサンプルをご紹介します。今回はテキストサイズを変更するボタンです。
こんにちは（・∀・）
JavaScriptを使用したサンプルをご紹介します。今回は要素の表示非表示です。ブロック要素の非表示はJavaScriptで制御しているのでJavaScriptを切っている場合はすべて展開した状態で表示されます。
こんにちは（・∀・）
jQueryを使用したサンプルをご紹介します。今回はドロップダウンメニューです。
こんにちは（・∀・）
今回はJavaScriptを使用したスムーススクロールのサンプルをご紹介します。
今回はスムーススクロールです。
こんにちは（・∀・）
JavaScriptを使用したサンプルをご紹介します。今回はクッキーを使ったタブレイアウトです。
こんにちは（・∀・）
JavaScriptを使用したサンプルをご紹介します。今回は印刷ボタンです。サンプルは画像版とテキスト版の2種類です。画像を使いたい場合はボタンの上で右クリックして画像を保存してご使用ください。
こんにちは（・∀・）
JavaScriptを使用したサンプルをご紹介します。今回は画像をランダム表示させるサンプルです。
こんにちは（・∀・）
JavaScriptを使用したサンプルをご紹介します。今回はタブレイアウトです。
こんにちは（・∀・）
CSSを使用して要素を画面の「左右」中央、または画面の「上下左右」中央に配置するいくつかのサンプルをご紹介したいと思います。
CSS3を使用してコーディングすることができるようになってきた昨今、その設定方法も増えましたので改めてご紹介していきます。
