Category: Design

特殊文字 HTML コード表

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

Wingdings 3 Font

Wingdings 3 フォント一覧

Webdings フォント Wingdings フォント Wingdings 2 フォント Wingdings 3 フォント HTML: !Keyboard:  ! ! HTML: "Keyboard:  ” (double quote) ” HTML: #Keyboard:  # # HTML: $Keyboard:  $ $ HTML: %Keyboard:  % % HTML: &Keyboard:  & & HTML: 'Keyboard:  ‘ (single quote) '…

Wingdings 2 Font

Wingdings 2 フォント一覧

Webdings フォント Wingdings フォント Wingdings 2 フォント Wingdings 3 フォント HTML: !Keyboard:  ! ! HTML: "Keyboard:  ” (double quote) ” HTML: #Keyboard:  # # HTML: $Keyboard:  $ $ HTML: %Keyboard:  % % HTML: &Keyboard:  & & HTML: 'Keyboard:  ‘ (single quote) '…

Wingdings Font

Wingdings フォント一覧

Webdings フォント Wingdings フォント Wingdings 2 フォント Wingdings 3 フォント HTML: !Keyboard:  ! ! HTML: "Keyboard:  ” (double quote) ” HTML: #Keyboard:  # # HTML: $Keyboard:  $ $ HTML: %Keyboard:  % % HTML: &Keyboard:  & & HTML: 'Keyboard:  ‘ (single quote) '…

Webdings Font

Webdings フォント一覧

Webdings フォント Wingdings フォント Wingdings 2 フォント Wingdings 3 フォント HTML: !Keyboard:  ! ! HTML: "Keyboard:  ” (double quote) ” HTML: #Keyboard:  # # HTML: $Keyboard:  $ $ HTML: %Keyboard:  % % HTML: &Keyboard:  & & HTML: 'Keyboard:  ‘ (single quote) '…

Color Name Chart

Web 色の名前チャート

六角形 Web セーフ カラー チャート Web 色の名前チャート  steelblue  steelblue  steelblue 4682B4  royalblue  royalblue  royalblue 041690  cornflowerblue  cornflowerblue  cornflowerblue 6495ED  lightsteelblue  lightsteelblue  lightsteelblue B0C4DE  mediumslateblue  mediumslateblue  mediumslateblue 7B68EE  slateblue  slateblue  slateblue 6A5ACD  darkslateblue  darkslateblue  darkslateblue 483D8B…

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

サイトをモバイル対応したレスポンシブ デザインに変更すると、色々なところで今までなかった問題が発生します。その一つがイメージマップです。他のポストでも話していますが、私は 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…