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


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

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

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

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

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

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

WordPress公式テーマの拡張!子テーマを作成する!


WordPressには、とても素晴らしくカッコイイ公式テーマが沢山あります。
公式テーマは、出所がはっきりしている上に、セキュリティ上の問題など、
常にアップデートが繰り返され、安全に扱えるように品質を保っています。

そんな公式テーマを拡張して新しいテーマを作成したい方も多いのではないでしょうか?
拡張方法としては、大きく分けて三つの方法があります。


  • 公式テーマのソースコードを直接修正し、改変を加える
  • 公式テーマの内容をそのまま複製し、名前だけ変えた後に改変を加える
  • 公式テーマの子テーマを作成し、修正を加えたい箇所のみ改変したコードで上書きさせる


公式テーマのソースコードを直接修正し、改変を加える

一番簡単で、直ぐに思いつく方法ですが、公式テーマはアップデートが繰り返されているため、
バージョンアップを適用すると公式テーマは上書きされてしまいますので、
せっかく行った拡張が破棄されてしまいますので、注意が必要です。

公式テーマの内容をそのまま複製し、名前だけ変えた後に改変を加える

公式テーマの内容を複製したとしても、
異なるテーマとなる為、公式テーマのバージョンアップに対応出来ません。
バージョンアップを怠ると、セキュリティホール等の管理は自分で行う必要があり、
維持していくのは大変です。

公式テーマの子テーマを作成し、修正を加えたい箇所のみ改変したコードで上書きさせる

今回解説する方法です。公式テーマの子テーマとした位置づけで新たにテーマを作成し、
公式テーマに対して変更を加えたいファイルのみ用意して改変を加える事で、
公式テーマを部分的に上書きします。
元の公式テーマへは手を加えないため、公式テーマのアップデートによって
拡張した部分が破棄される事も無く、公式テーマのアップデートは行われますので、
品質も保たれます。

それでは早速、子テーマの作成方法をみてみましょう。


  1. 子テーマを作成する
  2. 子テーマを適用する
『WordPress公式テーマの拡張!子テーマを作成する!』を続きを読む »

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



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

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段組)』を続きを読む »

CSSのoutlineプロパティを駆使したHTMLのデバッグとテスト




CSSの『outline』プロパティを使用して、HTMLの構造を確認したり、
非推奨のタグの発見や推奨タグの未定義の発見、
リンク切れ等をとても簡単にCSSのセレクタを使って見つける方法を解説します。


ただのCSSの定義となる為、有効・無効も簡単に変更出来ますし、
仕組みは簡単なので、独自に拡張する事も可能です。

デバッグやリリース前のテスト等に御使い下さい。

  1. ワイヤーフレームを表示させてHTML構造を確認しよう
  2. 現在非推奨となっているタグを見つけるstyle直指定、fontタグ、centerタグ
  3. 現在推奨されている、画像に対するtitleとaltを見つける
  4. tableタグに推奨されるsummary属性やthの未定義scopeを見つける
  5. リンク先の未指定を発見する
『CSSのoutlineプロパティを駆使した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でのコメントアウト記法
『【永久保存版】各プログラム言語のコメントアウト記法まとめ!』を続きを読む »

人気の投稿

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)