Category: Script

特殊文字 HTML コード表

表示 HTML コード ISO 数値コード 説明 !   ! 感嘆符・イクスクラメーション ”   & quot ; " ダブル クォート #   # ナンバー サイン $   $ ドル %   % パーセント記号 &   & amp ; & アンド、アンパーサンド '   ' アポストロフィー…

イメージマップのモバイル レスポンシブ化対応

サイトをモバイル対応したレスポンシブ デザインに変更すると、色々なところで今までなかった問題が発生します。その一つがイメージマップです。他のポストでも話していますが、私は Bootstrap をフレームワークに使用しています。Bootstrap で画像をレスポンシブ対応するには、画像のクラスに img-responsive を追加するだけで自動で画像のリサイズを行ってくれるので非常に簡単です。ただ、その画像にイメージマップを設定している場合、ブラウザのサイズによって画像のサイズが変更されると、そのイメージマップのリンクが移動してしまう問題が発生します。 この問題は Bootstrap と jQuery の jQuery RWD Image Maps というプラグインを使用すれば、簡単に解決することができます。 使用するフレームワーク: jQuery / Bootstrap 以下の例では “Click Here for Details” という文字列にリンクが設定されています。ブラウザをリサイズして、画像のサイズを変更しても、リンクがちゃんとその文字列についてくることが確認できます。 以下がコードです。jQuery プラグインへのリンクと、1 行のスクリプトを追加するだけで簡単に問題解決です。画像のコードには何もする必要はありません。

Crayon Syntax Highlighter Plugin 全テーマ/スタイル 比較

私のように WordPress で HTML、JavaScript、C# など、コードを公開する人にとって、Crayon Syntax Highlighter Plugin というプラグインは非常に重宝します。もうすでに使用しているユーザーは多いと思いますが、選択できるテーマ (スタイル) が非常に多く、一つ一つクリックしてそれぞれのテーマを確認しないといけないため、比較するのも難しく、なかなか決めかねる方も多いのではと思います。気に入ったテーマを見つけても、他のテーマも確認していくうちにどれだったのか忘れてしまうこともしばしば。そこでこの Crayon Syntax Highlighter Plugin テーマ比較ページを作ってみました 使用するスクリプト: WordPress / Crayon Syntax Highlighter Plugin すべて表示 この アイコンをクリックしてテーマを非表示に。 1c Kod

1c Zapros

Div 内のコンテンツを縦方向の真ん中に配置する方法

Web の作成の際、昔はよくテーブル (table) を使用していました。その頃はテーブル セル内のコンテンツを垂直方向の真ん中に配置するのは非常に簡単だったんですが、最近テーブルはほとんど使われなくなり、またモバイル デザインを考慮する必要もあり div を使用して、テーブルを形成するようになってきました。ここで度々直面する問題は div 内のコンテンツを縦方向の真ん中に配置するのが非常に難しいというところです。 valignvertical-align というクラスがありますが、これらは縦方向の位置指定にはなぜか効かないんです。Web で検索してみると、やはり皆同じように苦労しているようで、色々な方法が紹介されていました。ここで私が縦方向の真ん中に何かを配置したいときに常に使用する簡単な CSS の方法を紹介します。 以下の例では左の div 内のコンテンツを真ん中に持っていきたいと思います。 div ボックスの高さが固定されていれば、 margin-top を使用して、上の余白を指定してあげれば良いのですが、モバイル レスポンシブ デザインではそうはいきません。 Professional Professional Edition includes following features: Feature 1, blah blah blah. And…

DIV ボックスの高さをそろえる方法

最近よく div を使用してボックスを作成し、横に並べるデザインを作ることがあります。製品を横に並べたり、製品の機能の説明を四角くボックスにして横に並べたり。背景がなく、ボーダーもなしであれば全然問題ないのですが、見た目を良くするため、背景に色を付けたり、ボーダーを入れたりは良くあることですよね。ただ、ここで問題になるのはボックスの高さが異なり、見た目が崩れてしまうこと。高さを無理やり指定する方法もありますが、レスポンシブ デザインだと文章の改行される位置が解像度によって変わり、ボックスの高さも変わってしまうので解決策にはなりません。最近はすべて Bootstrap と jQuery でサイトを作成しているんですが、 div ボックスの高さをそろえる方法をここにメモしておきます。 使用するフレームワーク: jQuery / Bootstrap 以下は div ボックスの高さが統一できていない例です。 Pink with envy This is us in decor.. one beautiful day.. Salty Saturdays Dreaming of a place like this…