はてなブックマーク

html上にimg要素として画像を配置する際、画像の下にmarginやpaddingでは消せない余白ができてしまうことがあると思います。 今回はこの謎の隙間を無くす方法をご紹介いたします。 なぜ隙間ができるのか？ 画像（img要素）に対して余白ができる原因は、画像を含むインライン要素が、ベースラインに配置されているためです。 つまり、imgを含むインライン要素（インラインブロックも含む）の初期値は「vertical-align: baseline;」ということになり、そのことがこの隙間ができる原因になっているのです。 この問題の解決方法 この問題はvertical-alignにbaseline以外のものを指定することで解決します。 css

バックグラウンドカラーの透過などに便利カラーコードをrgbaに変換するツールです。 テキストボックにカラーコードを入力またはコピペすることでRGBaに変換されます。 透明度は0.05刻みで設定できます。 rgba(255 […]

GoogleMapの共通を使ってマップを埋め込む際、iframeをコピペして自作のhtmlに張り付けるだけでマップが取り込めて大変便利なのですが。 縮尺が勝手に調整されて意図とした大きさで表示されず困ることがありますよね。 ということで今回は、埋め込みgoogleマップの縮尺を調整する方法をご紹介します。 srcの一部を書き換えるだけで縮尺調整する 答えは案の定って感じですが、iframeのsrcの一部を書き換えることです。 対象はsrcの中の、!4f13.1の部分で、13.1の部分が縮尺を表す数値になります。 1~180（詳細～広域）の間で変更可能なようです。 具体的には、次のような感じです。 !4f13.1を!4f50に変更してみる <iframe src=”https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3241.74779

「このJavascriptの指定はPCの場合のみ利用できるようにしたい。」、「この指定はスマートフォンでのみ使用できるようにした。」など、スマートフォン、タブレット、PC、それぞれの端末に対して実行するJavascriptを限定したり、変更していといったことがよくあると思います。 そこで、今回はJavascriptを使って、ユーザーエージェントを判別し、スマートフォン、タブレット、PC、それぞれに条件分岐して、Javascriptを指定する方法をご紹介いたします。

font-family:"ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO"; ヒラギノ丸ゴシック、ヒラギノ角ゴシック、がmacに、HG丸ゴシックがwindowsに対応します。 windowsとmac のみに対応で、iosやandroidには対応しません。iosやandroidでも丸文字ゴシックで表示させたい場合はwebフォントを埋め込む方法が最適です。 webフォントに使える日本語丸ゴシック（フリーフォント） どの環境でも丸文字ゴシックを表示させたい場合は@font-faceで丸文字ゴシックを埋め込む方法が最適です。 ここでは、webフォントに使える丸文字ゴシックの日本語フリー

フォーム設置に大変役立つ優秀なプラグインMW WP Formについて、以前セレクトボックスの「選択してください」を空欄とみなす方法という記事で、「選択してください」という項目のoptionのvalue値を空欄にする方法をご紹介しましたが、この方法だと、セレクトボックスの選択が必須でない場合、確認画面で「選択してください」という文字が表示されてしまうということがわかりました。（この値はメールに送信されません） いろいろ試した結果、とりあえず対処方法が見つかりましたのでご紹介します。 JavaScriptで「選択してください」を当てて確認画面の表示問題に対処する 以前サポートフォーラムで紹介されていた方法ですが、JavaScriptで操作するこの方法を使うと確認画面に遷移後、「選択してください」などの文字が表示されることはありません。 管理画面でのセレクトボックスの設置方法

cssでテキストや文字に縁取り（アウトライン）や光彩を追加できたら便利だと考えたことはないでしょうか？css3から追加されたプロパティで、直接この要望に応えるものはないのですが、text shadowというプロパティを使 […]

positionを使って要素を配置する際、その要素を中央に配置したいといったことはよくあると思います。その場合どうすしたらいいのか悩まれた経験はありませんか？ 今回は、positionで、要素の幅が確定していなくても上下中央、左右中央、上下左右中央に配置できるcssの設定方法をご紹介します。 positionとtranslateを使って要素を中央に配置する方法 具体例と解説 それでは、具体例を示しながら実際の設置方法を解説していきたいと思います。 例は、画像の上にテキストを配置するケースで、テキストの配置位置は、上下左右中央になるようにする場合です。 完成イメージは下記図になります。（わかりづらいかもしれませんが、水色部分が画像[img]だと仮定してください） 図 それでは、具体的にソースを示してから解説していきたいと思います。 まずは、htmlとcssをご確認ください。 html

【図1】のような三角形の矢印のような表現をCSSのみでするとき、borderを使った方法がよく取り上げられているのですが、あれって使い勝手悪くないですか？ 特に写真の上に配置したい時とか、三角形の幅を自由に可変させたいと […]