サイズの大きなモーダルをスクロール可能にする方法


最近良く見かけるモーダルウィンドウですが、
モーダルのサイズが大きいと画面外にはみ出してしまい、全てを表示することが出来ません。
スクロールしたとしても、モーダルの背景であるメインコンテンツがスクロールされてしまいます。

そこで、モーダルが表示されている間のスクロール対象を、背景のメインコンテンツではなく、
モーダル自身に与えてあげることで、画面外に広がったモーダルコンテンツを全て表示することが可能です。

今回は、そんなスクロール可能なモーダルを手軽に構築する方法を解説します。

また、そんなモーダルをスクロール可能にする一連の処理を
jQueryのプラグインとして作成しましたので、宜しければお使い下さい。

  1. 一般的なモーダルの実装
  2. 一般的なモーダルの問題点
  3. 大きいモーダルを扱うサイト
  4. スクロール可能なモーダルの考え方
  5. jQueryモーダルプラグインの使い方
  6. jQueryモーダルプラグインのソース

『サイズの大きなモーダルをスクロール可能にする方法』を続きを読む »

とっても応用の効くラジオボタンを手軽に画像で表現する方法



HTMLのラジオボタンは、複数の選択肢の中から
特定のものを選ばせる時などに使用します。
利用シーンでは、男性・女性を選択するものであったり、
利用規約の同意・非同意、旅館の予約コースの選択であったりと様々です。

HTMLのラジオボタンの作成はとても簡単で、下記の様に作成する事が出来ます。




上記では、『radio-group』というラジオボタンのグループ内で
特定の選択をさせるというものです。
選択出来るのは必ず一つで、選択状態を変更すると他の選択状態は破棄されます。
formで送信する際は、選択されたラジオボタンの「value」の値のみ送信されます。

ラジオボタンはとても便利で、よく使うHTML要素かと思いますが、
そのまま使用するとブラウザ毎に表示が異なり、
デザインにこだわったサイトでは、他のデザインと協調せず、ういてしまいます。

そこで、今回はラジオボタンを手軽に画像にする方法を解説します。
ラジオボタンに使用する画像と、制御する為のjQueryさえ用意できれば、
簡単に素敵なラジオボタンを作成する事が出来ます。

  1. ラジオボタンとして使用する画像を用意しよう。
  2. HTMLにラジオボタン画像を配置しよう
  3. 選択された値を保持する為の要素を作成しよう
  4. ラジオボタンの動きをエミュレートしよう
『とっても応用の効くラジオボタンを手軽に画像で表現する方法』を続きを読む »

出版社から学んだ読みやすい文章を書く11の方法!



私が本を執筆する際に出版社の方から教えて頂いた
読みやすい文章を書く方法をまとめます。

基本的には書籍を執筆する上でのコツですが、
ブログにも共通して言えることが多々ありましたので
ブログにおける記事の書き方を中心に解説します。

正しい構成で文章を構築することにより、適切なタグを使い分けることができ、
SEO的にも優位に働きます。


  1. 目次を取り入れよう
  2. リード文とエンド文を作成しよう
  3. 見出しを整備しよう
  4. 太字を正しく活用しよう
  5. 段落を意識しよう
  6. 文意を明確にしよう
  7. 口調を統一しよう
  8. 表記の揺れをなくそう
  9. 画像やソースにはキャプションを入れよう
  10. リストを効果的に使用しよう
  11. 難しい漢字の使用は控えよう
『出版社から学んだ読みやすい文章を書く11の方法!』を続きを読む »

【Ajax|非同期】ファイルアップロード対応!フォーム自動解析送信



今までは、Ajax(非同期)でのファイルアップロードは
iframeを使うなど、少しトリッキーな方法を用いる必要があり、
とても面倒でしたが、『XMLHttpRequest Level2』からは『FormData』というものへ
オブジェクト化すればファイルもサーバーへアップロード出来る様になりました。

しかし『Firefox 3.6』辺りでは上手く動作しない等の報告もあり、
使用に躊躇していましたが、最近の『Firefox』の強制アップデートにより、
古い『Firefox』は駆逐されたかと思いますので、
今回の記事にて、フォームを利用したAjax(非同期)でのファイルアップロード方法について
サンプルコード付きで解説します。

更に、サンプルコードは私が普段使用しているものを分かりやすく纏めたものです。
機能としては、単純なAjax(非同期)処理と、送信先や送信方式等は
送信対象のフォームを解析し、自動的にセット。

送信に対する結果通知は、コールバックを指定するという方式を取り、
汎用的に使いまわせる様にユーザ定義関数として再編しています。

主に、フォームの『submit』の代わりにお使い頂けます。

それでは早速解説に入りましょう。

  1. コピペでOK!ファイルアップロード対応付Ajax通信
  2. Ajax通信に必要な要素の初期化
  3. ファイルアップロード対応のAjax通信用データをフォームから自動取得して成型
  4. Ajax通信を実行し、返却値を受け取ろう!結果と共にコールバック起動
  5. フォームデータをAjax通信にて送信する方法
『【Ajax|非同期】ファイルアップロード対応!フォーム自動解析送信』を続きを読む »

フォームの枠や要素自体を滑らかに点滅!指定数繰り返し行う方法



要素自体の点滅を指定回数分繰り返しアニメーションを行う方法や、
フォーム等の要素において、枠の部分の影を滑らかに表示・非表示させるアニメーションの
実装方法をサンプルコードを交えて解説します。

JavaScript部分の実装では、ネイティブなJavaScriptに加え、jQueryを使用した
記述もあります。

サンプルはユーザ定義関数として実装されていますので、
そのままコピペで使うか、ご自身のライブラリに組み込む等してお使い下さい。

  1. 要素自体を指定回数点滅させよう
  2. テキストフォーム等の枠(輪郭部分)を点滅させよう
『フォームの枠や要素自体を滑らかに点滅!指定数繰り返し行う方法』を続きを読む »

【jQuery】グレーアウトさせてポップアップを出す方法!



インジケータを回して何かを作業中に画面操作を防止する時や、
ポップアップを表示させる時などに使用するグレーアウト方法と、
グレーアウト上に表示するポップアップやインジケーター。
その他、作業領域等を表示させる方法をサンプルコードと共に解説します。

主に、JavaScript部分ではjQueryを使用し、HTMLCSSを操作して実現させます。
それでは早速、次章より具体的な実装方法について解説します。


  1. グレーアウト用の半透明パネルを予め用意しておこう
  2. グレーアウトを表示させよう
  3. グレーアウトを終了させよう
『【jQuery】グレーアウトさせてポップアップを出す方法!』を続きを読む »

【jQuery】タブ風のボタンでコンテンツの内容を切り替える方法



表題の通り、タブ風のボタンを作成し、ボタンをクリックでコンテンツの内容を
表示・非表示と切り替える方法をサンプルコード付きで解説します。

今回のタブ風のボタンでは、選択状態となっているタブに色をつけ、
他のタブを未選択状態の状態とし、選択されたタブと対になっている
コンテンツを表示させます。

タブの種類は何個でも可能ですので、用途によってカスタマイズしてください。
基本的なレイアウトはCSSHTMLにて行い、コンテンツやタブの選択状態を切り替えるのに
簡単なjQueryを使用しています。

勿論、jQueryの部分はネイティブのJavaScriptを使用しても問題ありません。
ちょっとしたフェード効果をつけるのに、jQueryでは楽でしたので、
今回のデモにて使用させて頂きましたが、
基本的な処理ロジック、考え方は簡単ですので、使い慣れたクライアントプログラミングにて
実装して下さい。


  1. タブ風のボタンを作成しよう
  2. 未選択状態のタブのスタイルを定義しよう。
  3. 選択状態のタブを作成しよう。
  4. タブ選択で表示されるコンテンツを用意しよう。
  5. タブ選択イベントとコンテンツ切り替え処理を実装しよう。
『【jQuery】タブ風のボタンでコンテンツの内容を切り替える方法』を続きを読む »

【jQuery】ファイル選択フォームデザインのカスタマイズ方法



基本的に、ファイルのアップロード等で使用するフォーム要素として
『input』要素の『type="file"』がありますが、
ファイル選択ボタンや、ファイル名表示エリアの位置やデザインは
基本的にブラウザ依存で、中々デザインを当て込むのは困難です。
デフォルトで適用されるデザインは、
IEFirefoxはファイル選択ボタンがファイル名表示エリアに対して右側ですし、
ChromeSafariはファイル選択ボタンがファイル名表示エリアに対して左側です。
ファイル未選択字のデフォルトメッセージ(『ファイルが選択されていません』等)も
言葉が異なっていたり、そもそも表示が無い等まちまちです。
これだけブラウザによって異なれば、
そのままデフォルトで使用すると
他のデザインとのバランスが悪くなったりして、
どうしてもデザインを入れたいパターンが出てくる場合があります。

また、ブラウザ依存のデザインなので、ブラウザによってデザインが異なるため、
UI的に迷いが生じる等を危惧して、全端末同じ様な見た目にする為に
デザインを適用する場合もあります。

今回は、そんなブラウザ依存のデザインが入ってしまっている
『input』要素の『type="file"』をカスタマイズして、好きなデザインに変えてしまう方法を
サンプルコード付きで解説します。

イベント起動などでは、分かりやすいのでjQueryを使用していますが、
勿論ネイティブのJavaScriptでも同じ事が出来ますので、
適当に置き換えて読み進めて下さい。
実際、jQueryを使用しているイベント駆動の部分でも、
そこまで複雑な事はしていないので、セレクタをドキュメントから書く必要がある程度の違いです。

要望があれば、ネイティブのJavaScriptへ書き直したものを追記しますので、
コメント頂ければ幸いです。


  1. まずは普通に『input』要素の『type="file"』を設置しよう。
  2. ファイル選択を起動させよう。
  3. ファイル選択状況表示エリアを実装しよう。
  4. 忘れがちなテキストボックス選択イベント
  5. Internet Explorer 対策
『【jQuery】ファイル選択フォームデザインのカスタマイズ方法』を続きを読む »

コピペで使えるfloatレイアウト(可変リキッド・固定幅(2段組・3段組)



CSSにてレイアウトを組む時に良く使われる
基本的な構築方法をサンプルコードと共に解説します。
サンプルコード、そのままコピペにて使用出来る様にしていますので、
ホームページ立ち上げの際に、基本的な枠組みとしてお使い下さい。
サンプルコードを基準として、肉付けしていくイメージですね。

今回は、一般的に良く使用されているレイアウトとして、
CSSのfloatプロパティを使用した二段組レイアウトと三段組みレイアウト、
それぞれにおいて、固定幅のものと、リキッドレイアウト(可変)についても
解説致します。

サイトレイアウトの方向性によって、お好きなサンプルコードをご使用下さい。

  1. 幅を固定した簡単な二段組レイアウトの構築方法
  2. ブラウザサイズによって変動する可変幅!二段組リキッドレイアウトの構築方法
  3. 情報量の多いサイト向き!固定幅3段組みレイアウト
  4. 可変幅の3段組リキッドレイアウト構築方法
  5. CSSによるfloatレイアウト構築のメリット
『コピペで使えるfloatレイアウト(可変リキッド・固定幅(2段組・3段組)』を続きを読む »

【Android】WebView内のJavaScriptやHTMLと相互連携する方法

JUnitについての書籍が遂に発売します!
Java開発時のユニットテストを加速する「JUnit速効レシピ」



今回は、WebView内に書かれたJavaScriptをアプリ側から起動したり、
HTML内のリンクタップをアプリ側で検知したり、
アプリ側からJavaScriptを介す事によって値をWebView内へ渡したり、
逆にWebView内の値をアプリへ渡す様な相互連携を行う方法について
サンプルコード付きで解説します。


まずは、アプリを外部のインターネットへ接続出来る様に権限を指定する必要がありますので、
権限の付加方法から解説しましょう。



  1. マニュフェストの設定でインターネット通信を許可しよう
  2. アプリ内のブラウザ。webViewを設置しよう
  3. WebViewに対してJavaScriptを実行しよう
  4. リンクタップ等、ロケーションの変更を検知する
『【Android】WebView内のJavaScriptやHTMLと相互連携する方法』を続きを読む »

【永久保存版】各プログラム言語のコメントアウト記法まとめ!



コメントアウトとは、プログラムソース内に処理ロジックとは別に
コメントとして残す事を言います。

今回は、様々なプログラム言語やフレームワークで使用する
コメントアウト記法を纏めました。

コメントアウトはプログラムを書く上で、とても頻繁に使い、
プログラム言語を覚える時にも一番初めに確認して起きたい記法です。

新しいプログラム言語を勉強する際は、是非とも下記より
該当のプログラム言語を選択し、コメントアウト記法を見につけて下さい。


【 今回掲載したコメントアウト記法 】
  1. HTMLのコメントアウト記法
  2. CSS(スタイルシート)のコメントアウト記法
  3. バッチ(bat)、バッチファイル内でのコメントアウト記法
  4. PHPのコメントアウト記法
  5. JavaScriptのコメントアウト記法
  6. VBAのコメントアウト記法
  7. Javaのコメントアウト記法
  8. MySQL等で使用するSQL文のコメントアウト記法
  9. C言語でのコメントアウト記法
  10. C++のコメントアウト記法
  11. Objective-Cのコメントアウト記法
  12. Texのコメントアウト記法
  13. Perlのコメントアウト記法
  14. XMLのコメントアウト記法
  15. Rubyのコメントアウト記法
  16. JSPのコメントアウト記法
  17. LinuxのBシェル(sh)でのコメントアウト記法
  18. Pythonのコメントアウト記法
  19. VBSのコメントアウト記法
  20. Smartyのコメントアウト記法
  21. ASPのコメントアウト記法
  22. Fortranのコメントアウト記法
  23. aspxでのコメントアウト記法
『【永久保存版】各プログラム言語のコメントアウト記法まとめ!』を続きを読む »

私が実践する18項目の内部SEO対策ガイドライン!!



私が普段行っているSEO対策の手法として、特に内部対策についてのガイドラインを作成致しました。
チェック項目毎に解説とポイント、私なりの実装方法を纏めましたので、参考にして頂ければ幸いです。

内部対策は、SEO対策の中でも他者の影響を受けないので、誰でも出来る上、絶対に行っておいた方が良い項目です。
こういった内部対策を行った上で、外部対策やSEMといった事を意識していくと、とてもよいフローが構築されます。

それでは、下記の18項目を参考にして、サイトをSEO用にチューニングして頂けたら幸いです。

  1. 見出しタグを適切に配置しよう
  2. 強調タグは使いすぎないようにしよう
  3. 余計なウィジェットやブログパーツを無くそう
  4. 外部へのリンクの貼り方を工夫しよう
  5. トップページからは、なるべく多くのサイト内リンクを貼ろう
  6. HTML内は出来るだけシンプルにする
  7. HTMLは正しく記述しよう
  8. 1ページのコンテンツはなるべく同じテーマで長文にしよう
  9. 1ページに貼るリンク数は50迄としよう
  10. キーワードの出現率を意識しよう
  11. サイトが表示されるまでの時間を短縮しよう
  12. HTMLの構造順序を意識しよう
  13. 1ページ1テーマを徹底しよう
  14. 内部リンクを積極的に貼ろう
  15. ページ数を増やそう
  16. サイトの階層はなるべく浅くしよう
  17. URLもキーワードを埋め込もう
  18. 頻繁に更新して、コンテンツの鮮度を保たせよう
『私が実践する18項目の内部SEO対策ガイドライン!!』を続きを読む »

人気の投稿

Category

Algorithm (2) Android (8) ASP/aspx (1) Blogger (2) C/C++ (1) Chrome (5) CSS (9) Firefox (4) Fortran (1) Google (9) GoogleMap (2) HTML (12) IE (3) Information (4) iOS (2) iPhone/iPad/iPod (2) Java (6) JavaScript (16) jQuery (9) JSP (1) LifeRecipe (5) Linux (2) Macintosh (2) MapKit (4) Marketing (7) MySQL (3) NAMAZU (2) Objective-C (7) Other (7) Perl (1) PHP (9) Python (1) RSS/Atom (2) Ruby (1) Safari (2) SEO (11) Smarty (2) SQL (2) Tex (1) Three.js (1) Twitter (1) TwitterLog (313) UIKit (5) Unix (1) VBA/VBS (1) Windows (5) WordPress (3) Writing (5) XAMPP (1) XML (1) Yahoo (2) ZendFramework2 (14)