menu
menu

キーワード検索

 

前月(8月)の人気記事トップ10

  1. ( 1 - ) 【CSS】CSSだけでドロップダウンメニュー
  2. ( 2 - ) 【jQuery】jQueryでドロップダウンメニュー
  3. ( 5 ↑) 【Mac】Macのユーザー名とアカウント名を変更する
  4. ( 3 ↓) 【CSS】CSSだけでサイズ可変・スマホ対応のアコーディオン
  5. ( 4 ↓) 【CSS】レスポンシブデザインのブレークポイントは⁉
  6. ( 6 - ) 【CSS】スマホサイト向け横にスクロールするナビゲーション
  7. ( 8 ↑) 【PHP】PHPでシンプルなメールフォーム
  8. ( 9 ↑) 【CSS】CSSだけでブロック要素の表示非表示(トグルボタン)
  9. ( - ↑) 【CSS】スマホ対応CSSだけでドロップダウンメニュー
  10. ( - ↑) 【iPhone・iPad】投稿の準備中にエラーが起きました。後でやり直してください。
このエントリーをはてなブックマークに追加

ブログ

 

Webデザインラボ管理人のブログ

* Web制作やネットに関連しない内容の投稿は別ブログへ移動しました。

Camera入門

 

カメラ初心者向け

css

GIMP入門

 

GIMP関連

Web制作ガイド

 

Web制作関連

html

iphone & ipad

 

iPhone・iPad関連

JavaScript入門

 

JavaScript初心者向け

jQuery入門

 

jQuery初心者向け

Labs

 

*お探し物はページ内検索 command + F or ctrl + FGetして❗️
例:レイアウト系のサンプルを探したい場合は「レイアウト」、スクロール系のサンプルを探したい場合は「スクロール」などなど。

 

ローカル環境

 

Webデザイナー・コーダーのための簡単にできるWeb制作環境の構築

 

各OSごとに掲載してあります。また、それぞれバージョンがありますが制作するコンテンツのサーバー環境にあわせると開発もスムースに進みますね。特に無ければApacheなら2.4、PHPなら5.6あたりが安定して利用できそうです。

ここでの解説はWebデザイナーやコーダー向けのローカル環境構築なので、セキュリティ的な事は考慮(りょ)しておりません。

 

 

*お探し物はページ内検索 command + F or ctrl + FGetして❗️
例:Apache系のサンプルを探したい場合は「Apache」、PHP系のサンプルを探したい場合は「PHP」などなど。

 

Mac

 

Mac関連

webツール

 

Web制作に役立つツール類

【制作Tips】インスタグラムのオリジナルフォローボタンの作り方

  • Labs

【CSS】CSSのGridでスマホサイト対応のグリッドレイアウト

  • Labs

【CSS】CSSのGridでスマホサイト対応のグリッドレイアウト

こんにちは(・∀・)

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

基本的なCSS構成は前回ご紹介しました【CSS】CSSのGridでスマホサイト対応レイアウトとほぼ同じです。

前回と同じく、すべてのサンプルはレスポンシブデザイン対応、横幅600px以下になると1カラムになるよう設定してあります。

サンプルは全部で5パターンです。

【CSS】CSSのGridでスマホサイト対応レイアウト

  • Labs

【CSS】ナビゲーションボタンをcalc()関数で作ってみる

  • Labs

【CSS】CSSで関数が使えるって知ってました⁉️

  • Labs

【CSS】CSSでも変数が使えるって知ってました⁉️

  • Labs

【jQuery】親要素にCSSを適用させるこんな方法

  • Labs

【jQuery】親要素にCSSを適用させるこんな方法

こんにちは(・∀・)

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

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

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

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

【CSS】スマホ対応CSSだけでドロップダウンメニュー

  • Labs

【決定版】フォントの設定はこれで決まり❗️

  • Labs

【WordPress】リンクなしのタグとカテゴリーを出力する方法

  • Labs

【WordPress】リンクなしのタグとカテゴリーを出力する方法

こんにちは(・∀・)

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

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

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

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

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

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

【JavaScript】入力したら有効になるリンクボタン

  • Labs

【JavaScript】チェックしたら有効になるリンクボタン

  • Labs

【JavaScript】チェックしたら有効になるリンクボタン

こんにちは(・∀・)

ラジオボタンやチェックボックスにチェックを入れたら有効になるリンク、こちらの【jQuery】チェックしたら有効になるリンクボタンの方で最初jQuery版のサンプルを作りました。

jQueryプラグインを使わないという最近のマイブーム、新たにネイティブ版でも作ってみようと思い立ち、JavaScript版のサンプルを作りましたのでここでご紹介します。

素直にjQueryを使った方が全然簡単ですが...

【JavaScript】表示しているブラウザの高さを取得してCSSのheightに指定

  • Labs

【JavaScript】表示しているブラウザの高さを取得してCSSのheightに指定

こんにちは(・∀・)

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

【jQuery】表示しているブラウザの高さを取得してCSSのheightに指定

タイトルの通りブラウザの高さを取得してCSSのheightに指定するというjQueryのスクリプトをご紹介しているページ。

そんな人気❓ページのjQueryスクリプトをネイティブ化してみようかなと思い立ち、動き的には同じですが、あえてjQueryプラグインを使わない方法でスクリプトを描いてみたという内容の投稿です。

【ご対応ください】設定変更しないとGoogleアナリティクスのデータが26ヶ月で消えます

  • Labs

【jQuery】タブ移動もできるドロップダウンメニュー

  • Labs

【CSS3】CSS3のobject-fitで画像を簡単タイル表示

  • Labs

【Flexbox】justify-content:centerで最後の行を左寄せ

  • Labs

【HTML5.1】HTML5.1で追加されたpicture要素を使って画像を表示する

  • Labs

【制作Tips】サイトマップ自動作成ツール

  • Labs

【制作Tips】Chromeのクッキーを個別に削除する方法

  • Labs

【レイアウト決定版】レスポンシブデザインにも表示切り替えボタンを付ける⁉️

  • Labs

【レイアウト決定版】レスポンシブデザインにも表示切り替えボタンを付ける⁉️

こんにちは(・∀・)

前回投稿した【決定版】レスポンシブデザインのブレークポイントはこれで決まり❗️でご紹介しましたレスポンシブデザインレイアウトに、PCとモバイルサイトを行き来できるボタンを付けてみました。

レスポンシブデザインで表示できれば十分だとは思いますが...

「PCとモバイルの表示を切り替えられるボタンも付けたい...」なんてオーダーをいただいた場合、このJavaScriptで対応できます。

確かにスマホで見てるときに「このページPCサイトで見たいのになぁ」ってときってあるかも...

【決定版】レスポンシブデザインのブレークポイントはこれで決まり❗️

  • Labs

【WordPress】WordPressでカテゴリー別にデザインを変える方法

  • Labs

【WordPress】WordPressでOGP設定

  • Labs

【制作Tips】facebookシェアデバッガー

  • Labs

【制作Tips】facebook・TwitterのOGP設定

  • Labs

【制作Tips】Chromeでキャッシュを簡単に削除するショートカットキー

  • Labs

【制作Tips】Chromeでキャッシュを簡単に削除するショートカットキー

こんにちは(・∀・)

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

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

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

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

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

【PHP】キャッシュを無効化せずにCSSの変更を反映させる方法

  • Labs

【JavaScript】JavaScriptで振り分ける方法2パターン

  • Labs

【WordPress】ログイン中も管理ツールバーを非表示にする

  • Labs

【WordPress】さくらのレンタルサーバーにWordPressをインストールする方法

  • Labs

【PHP】JavaScriptで取得した値をPHPに渡す

  • Labs

【JavaScript】JavaScriptでラジオボタンとチェックボックスの入力判定

  • Labs

【PHP】シンプルメールフォームで簡易CAPTCHA認証

  • Labs

【PHP】JavaScriptで簡易CAPTCHA認証

  • Labs

【PHP】PHPでシンプルなメールフォーム

  • Labs

【JavaScript】チェックボックスをラジオボタンのような動きにする

  • Labs

【PHP】PHPでファイルの送信フォーム

  • Labs

【Google】Googleアカウントのメールアドレスを変更する方法

  • Labs

【CSS】FlexboxでFooterを画面下部に表示するレイアウト

  • Labs

【CSS Tips】FlexboxでFooterを画面下部に表示するレイアウト

こんにちは(・∀・)

前回Flexboxでレイアウトする方法HTML5でFlexレイアウトのテンプレートをご紹介しました。

普通にレイアウトする分にはそれで十分なのですが、スクロール量が少ない時でもFooterを画面の一番下に表示したい場合、上記の方法だとそれを実現することができません。

なので今回はFlexboxのレイアウトでFooterを画面下部に表示してレイアウトする方法をご紹介します。

【CSS】HTML5でFlexレイアウトのテンプレート

  • Labs

【CSS】HTML5でFloatレイアウトのテンプレート

  • Labs

【jQuery】いろいろ組み合わせてパララックスレイアウト

  • Labs

【jQuery】ヘッダーをトップに固定してスクロールでアニメーション

  • Labs

【JavaScript】noscriptでdisplay:block

  • Labs

【jQuery】スクロールで要素の拡大縮小と移動

  • Labs

【制作Tips】ダミーテキスト・ダミー画像ジェネレーター

  • Labs

【WordPress】SNS Count Cache

  • Labs

SNS Count Cache

こんにちは(・∀・)

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

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

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

【CSS】レスポンシブデザインのブレークポイントは⁉️

  • Labs

【CSS】レスポンシブデザインのブレークポイントは⁉️

こんにちは(・∀・)

昔見たザ・インターネットという映画で、主演のサンドラ・ブロックがPCでピザを頼んでいたのを見て、おースゴーいなんて思っていましたが、今ではiPadで普通にピザを注文していることに気づき、そのスゴいと思ったことが普通のことになっているなんて、なんとも時代の流れを感じるところです。

ところで、レスポンシブデザインでWebサイトを作る際のブレークポイントはみなさんどうなさっていらっしゃいますか??

【決定版】レスポンシブデザインのブレークポイントはこれで決まり❗

【PHP】PHPのエラー表示をなくす方法

  • Labs

【FileZilla】.htaccessの編集方法

  • Labs

【CSS】画像をレスポンシブデザインに対応させる

  • Labs

【制作Tips】Webサイトにはったpng画像がくっきり表示しない原因

  • Labs

【CSS】Flexboxでレスポンシブなグリッドレイアウト

  • Labs

HTML5 & CSS3

こんにちは(・∀・)

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

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

【CSS】CSSで要素の高さ100%を指定する方法

  • Labs

【CSS】Googleマップをレスポンシブデザインに対応させる方法

  • Labs

【CSS】YouTube動画をレスポンシブデザインに対応させる方法

  • Labs

【CSS】contentで挿入した画像の中心に元要素のテキストを配置する方法 #2

  • Labs

【CSS】contentで挿入した画像の中心に元要素のテキストを配置する方法

  • Labs

【Google】Google翻訳ツールをサイトにはってみる

  • Labs

【CSS】position:absoluteとwidth:100%を指定すると横幅の設定がうまくいかない場合の対処方法について

  • Labs

CSS

こんにちは(・∀・)

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

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

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

【CSS】横幅指定している親要素内でURLや長い英単語が改行しない場合の対処法について

  • Labs

【WordPress】WordPressのパーマリンク設定をしたら404エラー

  • Labs

【WordPress】Step by Step Social Count Cache

  • Labs

SBS Social Count Cache

こんにちは(・∀・)

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

【CSS】リセットCSSを作ってみました

  • Labs

【CSS Tips】リセットCSSを作ってみました

こんにちは(・∀・)

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

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

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

HTML5対応です。

【CSS】リセットCSS

  • Labs

【CSS Tips】リセットCSS

こんにちは(・∀・)

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

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

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

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

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

【JavaScript】JavaScriptで親階層に戻るボタン

  • Labs

【JavaScript】JavaScriptで前のページに戻るボタン

  • Labs

【jQuery】スマホ対応レスポンシブなカルーセルスライダー

  • Labs

【slick】スマホ対応レスポンシブなカルーセルスライダー

こんにちは(・∀・)

jQueryプラグインを使用したサンプルをご紹介します。今回使用するライブラリはカルーセルスライダーのslickです。

これまでも設置が簡単なカルーセルスライダーjCarouselLiteや、simplyScroll v2などをご紹介してきましたが、こちらのプラグインは設置が簡単なのに加えて、スタイルの変更も簡単にできるので、それらプラグイン以上に導入しやすいのではないかと思い今回ご紹介することとしました。

こちらのプラグインslickは、配布元にもサンプル例はあるのですが、サンプル例が色々とあり、設定方法もたくさんあって悩みそうなので、当サイトでよく使いそうなパターンのサンプルをいくつか作ってご紹介したいと思います。

【jQuery】入力したら有効になるリンクボタン

  • Labs

【jQuery】チェックしたら有効になるリンクボタン

  • Labs

【CSS】CSS3でグラデーションの背景色をジワジワと変更する

  • Labs

【JavaScript】マウスに追随する背景画像

  • Labs

【リンク】CSSだけでアニメーションするリンクボタン

  • Labs

CSS3

こんにちは(・∀・)

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

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

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

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

http://caniuse.com/

サンプルの動作確認はページの読み込みが終わってからお試しください。

【CSS】スマホサイト向け横にスクロールするナビゲーション

  • Labs

【リンク】CSSだけでツールチップ

  • Labs

【リンク】jQueryでツールチップ

  • Labs

【jQuery】maxlength属性とjQueryでtextareaの入力文字数を制限する

  • Labs

【CSS】CSSのborderプロパティで三角形

  • Labs

【フォーム】郵便番号でフォームの住所を自動入力

  • Labs

【フォーム】入力しやすい入力フォーム

  • Labs

【フォーム】クリックしやすいラジオボタンとチェックボックス

  • Labs

【フォーム】iOSのボタンが角丸グラデーションになるのをリセット

  • Labs

【CSS】手書き風でいい感じなフォントでWebフォント

  • Labs

CSS3

こんにちは(・∀・)

CSS3で使えるようになりましたWebフォント(使い方や詳細に関してはこちら@font-faceで)ですが、当サイトでも試験的に導入しようと、手書き風の良さそうなフォントはないかなーとネットで探していたところ、いくつかいい感じのフォントがありましたので、今回はそれらフォントを使ったWebフォント導入とあわせてフォントのご紹介をしていきたいと思います。

ちなみにここでいう「いい感じ」というのは、字体ももちろんそうですが、フリーで個人・商用利用も可のことを言います。

【ブログ】Pocketボタンの設置

  • Labs

【jQuery】表示しているブラウザの高さを取得してCSSのheightに指定

  • Labs

【jQuery】表示しているブラウザの高さを取得してCSSのheightに指定

こんにちは(・∀・)

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

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

JavaScriptネイティブ版はこちら【JavaScript】表示しているブラウザの高さを取得してCSSのheightに指定です。

CSSで高さ100%を指定する方法はこちらの【CSS】CSSで要素の高さ100%を指定する方法をご覧ください。

【WordPress】ユーザーエージェントで振り分けるWordPressテーマ

  • Labs

【JavaScript】return falseの代わり

  • Labs

JavaScript

こんにちは(・∀・)

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

【JavaScript】Googleマップをカスタマイズ

  • Labs

【JavaScript】Googleマップをカスタマイズ

こんにちは(・∀・)

Styled Maps WizardというサイトでGoogleマップをカスタマイズすることができるのはご存知でしょうか。

ただしこちらのサイト、英語なのでちょっとわかりづらいかもしれません。

でも安心してください、とても簡単にGoogleマップをカスタマイズできる日本語のサイトがあります。こちらのコードが分からなくてもgoogle mapのデザインがカスタマイズできるコード生成ツールというサイトのコード生成ツールを使えば簡単にGoogleマップのカスタマイズができてオリジナルデザインのGoogleマップを作成することができます。

【jQuery】レスポンシブなスマホ用ナビ

  • Labs

jQuery

こんにちは(・∀・)

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

【jQuery】コンテンツとサイドバーがスライドするレスポンシブなドロワーナビ

  • Labs

【jQuery】サイドバーがスライドするレスポンシブなドロワーナビ

  • Labs

【jQuery】サイドバーがスライドするレスポンシブなドロワーナビ

こんにちは(・∀・)

今回ご紹介しますドロワーナビは以前ご紹介しましたコンテンツがスライドするレスポンシブなドロワーナビとはサイドバー表示の仕方が少し違うドロワーナビになります。サイドバーがコンテンツの上に表示されます。こちらも同じくPCサイトは通常のページでスマホサイトはドロワーナビにしてレスポンシブルで切り替えます。

【メール】HTMLメールのレイアウト・デザインについて

  • Labs

【メール】HTMLメールの作り方

  • Labs

【メール】HTMLメールの作り方

こんにちは(・∀・)

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

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

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

display:flexについて【CSS3リファレンス】

  • Labs

CSS3

こんにちは(・∀・)

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

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

【simplyScroll v2】スマホ対応レスポンシブなカルーセルスライダー

  • Labs

【jCarouselLite】スマホ対応レスポンシブなカルーセルスライダー

  • Labs

【スクロール】スクロールしても要素が固定するスティッキーサイドバー

  • Labs

【リンク】タップして電話が掛けられるリンクの設定

  • Labs

【リンク】CSSでリンクやClickイベントを無効にする

  • Labs

【制作Tips】アクセス解析 w3Analyzer

  • Labs

w3analyzer*

こんにちは(・∀・)

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

元々はOASAKA PHPさんが配布していたのですが、現在は更新も配布もしていないようで、もう新たに導入する事はできないのかなと思っていたら、アクセス解析が気になるんです。さんや、w3Analyzer UTF-8版さんが修正版を配布していらっしゃるようです。

【CSS】CSSだけでブロック要素の表示非表示

  • Labs

【CSS】CSSだけでドロップダウンメニュー

  • Labs

【CSS】CSSだけでドロップダウンメニュー

こんにちは(・∀・)

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

【jQuery】jQueryでブロック要素の表示非表示

  • Labs

【CSS】マウスオーバーでボタンの画像が変わるロールオーバー

  • Labs

CSS3

こんにちは(・∀・)

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

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

ボタンがテキストリンクのロールオーバーはこちらをご覧ください。
マウスオーバーでボタンの色が変わるロールオーバー

アニメーション系の動きのロールオーバーボタンはこちらをご覧ください。
CSSだけでアニメーションするリンクボタン

【CSS】CSSだけで画像をフルスクリーン表示

  • Labs

【CSS】マウスオーバーでボタンの色が変わるロールオーバー

  • Labs

CSS3

こんにちは(・∀・)

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

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

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

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

ボタンが画像のロールオーバーはこちらをご覧ください。
マウスオーバーでボタンの画像が変わるロールオーバー

アニメーション系の動きのロールオーバーボタンはこちらをご覧ください。
CSSだけでアニメーションするリンクボタン

【ツリーメニュー】CSSだけでサイズ可変・スマホ対応のツリーメニュー

  • Labs

【タブレイアウト】CSSだけでサイズ可変・スマホ対応のタブレイアウト

  • Labs

【CSS】CSSだけで横方向に展開するサイズ可変・スマホ対応のアコーディオン

  • Labs

【CSS】CSSだけでサイズ可変・スマホ対応のアコーディオン

  • Labs

【制作Tips】Facebook Comments Plugin

  • Labs

【制作Tips】Facebook Like BoxはPage Pluginに変更になりました

  • Labs

【制作Tips】ソーシャルブックマークボタン

  • Labs

【制作Tips】Twitterボタンの設置

  • Labs

【制作Tips】はてなブックマークボタンの設置

  • Labs

【制作Tips】Google +1ボタンの設置

  • Labs

【制作Tips】Facebookいいねボタンの設置

  • Labs

【制作Tips】TwitterとFacebookの連携

  • Labs

TwitterとFacebookの連携

こんにちは(・∀・)

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

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

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

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

【CSS】iOSのサファリで縦画面から横画面にすると文字が大きくなるのを防ぐ設定

  • Labs

【CSS Tips】iOSのサファリで縦画面から横画面にすると文字が大きくなるのを防ぐ設定

こんにちは(・∀・)

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

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

【スクロール】座標・ブラウザの移動量を取得する

  • Labs

【制作Tips】Google Adsenseがレスポンシブデザインに対応(CSS3版)

  • Labs

【HTML】クリッカブルマップ

  • Labs

【jQuery】jQueryでツリーメニュー

  • Labs

【JavaScript】JavaScriptでタイマー系いろいろ

  • Labs

【スクロール】スクロールでCSS効果の適用

  • Labs

【jQuery】ホイールの回転で要素間を移動するパララックスレイアウト

  • Labs

jQuery

こんにちは(・∀・)

今回はマウスホイールを回転させると要素間を移動するパララックスレイアウトのサンプルをご紹介したいと思います。表示される画面ごとにスクロールしますので長いコンテンツは入れられないため使い道は限られますが、スタートページ的な使い方をしたり、個人や企業のポートフォリオサイト的に使って見ると面白そうです。

前回ご紹介しましたCSSだけでパララックスレイアウトと同様、スマホサイトにも対応したレスポンシブデザインですが、スマホサイトでは背景画像は固定しないためパララックスレイアウトではなくなります。また、一部Android端末の横画面だとうまく動作しない可能性があります。

【CSS】CSSだけでパララックスレイアウト

  • Labs

【WordPress】レスポンシブなWordPressテーマ

  • Labs

【JavaScript】クッキーでスマホ・タブレット・PCを振り分ける

  • Labs

【JavaScript】スマホ・タブレット・PCを振り分ける

  • Labs

【jQuery】jquery.cookie.jsで背景色変更ボタン

  • Labs

【jQuery】jquery.cookie.jsでテキストサイズ変更ボタン

  • Labs

【タブレイアウト】jquery.cookie.jsでサイズ可変・スマホ対応のタブレイアウト

  • Labs

【タブレイアウト】サイズ可変・スマホ対応のタブレイアウト

  • Labs

【jQuery】jQueryでスマホ画面は縦方向PC画面は横方向に展開するアコーディオン

  • Labs

【jQuery】jQueryでサイズ可変・スマホ対応のアコーディオン

  • Labs

【CSS】CSS3のbox-sizing:border-boxでレイアウトの計算が簡単に

  • Labs

【CSS】CSS3のdisplay:tableとdisplay:table-cellでレイアウト

  • Labs

【jQuery】jQueryで画像をドラッグ&ドロップ

  • Labs

【jQuery】CSSで画像をフルスクリーン表示&jQueryで画像切り替え

  • Labs

【CSS】@importについて

  • Labs

【jQuery】jQueryでフラッシュみたいな動きのリンクボタン

  • Labs

【jQuery】jQueryでスムーススクロール

  • Labs

【スクロール】グローバルナビをトップに固定するスティッキーナビ+ドロップダウンメニュー

  • Labs

【スクロール】グローバルナビをトップに固定するスティッキーナビ

  • Labs

【CSS】CSS3で角丸・シャドー・グラデーション

  • Labs

【WordPress】ワードプレスのウィジェット表示スペースの追加

  • Labs

【WordPress】MW WP Form ワードプレス メールフォーム プラグイン

  • Labs

WordPress

こんにちは(・∀・)

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

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

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

【CSS】CSS3で長い文章を省略して「...」に置き換える

  • Labs

【制作Tips】Google Adsenseがレスポンシブデザインに対応

  • Labs

【jQuery】コンテンツがスライドするレスポンシブなドロワーナビ

  • Labs

【jQuery】コンテンツがスライドするドロワーナビ

  • Labs

【JavaScript】ローカルストレージとクッキー

  • Labs

【jQuery】lightbox系プラグインのご紹介

  • Labs

【CSS】CSS3で要素の透過

  • Labs

【フォーム】フォームの装飾いろいろ

  • Labs

【制作Tips】Movable TypeとWordPress

  • Labs

【制作Tips】Google Libraries API

  • Labs

【CSS】スマホ対応ノート風けい線

  • Labs

【ブログ】PHP5.2からPHP5.3へ移行

  • Labs

【ブログ】Apache + PHP5.3関連

  • Labs

【ブログ】イラストレーター関連

  • Labs

【制作Tips】prototypeとjQuery

  • Labs

【ブログ】会社名の英文表記

  • Labs

【ブログ】taskkillコマンド

  • Labs

【JavaScript】背景色変更ボタン

  • Labs

【jQuery】ページトップボタン

  • Labs

【CSS】CSSでテキストリンクや画像リンクを装飾

  • Labs

【JavaScript】テキストサイズ変更ボタン

  • Labs

【JavaScript】JavaScriptでブロック要素の表示非表示

  • Labs

【jQuery】jQueryでドロップダウンメニュー

  • Labs

【JavaScript】JavaScriptでスムーススクロール

  • Labs

【JavaScript】クッキーを使ったタブレイアウト

  • Labs

【JavaScript】JavaScriptで印刷ボタン

  • Labs

【JavaScript】ランダム画像表示

  • Labs

【JavaScript】JavaScriptでタブレイアウト

  • Labs

【制作Tips】要素のいろいろな画面中央配置の仕方

  • Labs
 
 
 
 
 
 
 
 
 
 
 

 

削除したコンテンツ
  • WindowsXPにApache2.2をインストールしよう!
  • WindowsXPにApache2.2のバーチャルホストを設定をしよう!
  • WindowsXPにPHP5.2をインストールしよう!
  • WindowsXPにActivePerlをインストールしよう!
  • WindowsXPにMySQLをインストールしよう!
  • WindowsXPにFileZilla(FTP)をインストールしよう!
 
 
このエントリーをはてなブックマークに追加