【スパム対策】ホームページにメールアドレスを載せる場合の４つの方法 | 株式会社グラッドキューブ
商用サイトに必ず表示しなければならないものの一つに、 メールアドレスがあります。 しかし、メールアドレスをそのまま掲載した場合、 迷惑メールが大量に来るようになってしまうことが良くあります。 画像でメールアドレスを掲載することもできますが、 そうしてしまうと、善意のユーザーにとっても 扱いづらいものになってしまいますので、おすすめできません。 「そのまま載せてるのに迷惑メール来ないけど？」 という方もいるかもしれませんが、 今後も同じとは限りません。 迷惑メールは一度来てしまったら手遅れで、 窓口用のメールアドレスを 変更しなければならない事態になることもあります。 そこで今回は、迷惑メールも防ぐことができる、 ホームページへのメールアドレス掲載方法を ４つご紹介したいと思います。 １.メールアドレスの中に空白等のテキストを入れる こちらはシンプルで、以下のように表示します。 info @
list-styleで括弧付の数字を振りたいとき - しるてく
ちょっと前に友人と話していたのですが、 list-styleで（）付きの数字をつける方法。 動作確認はあまりしていないですが、最近のは大体大丈夫なはずです。IE7はダメです。 <!DOCTYPE html> <html> <head> <style> ol li{ list-style-type:none; list-style-position:inside; counter-increment: cnt; } ol li:before{ display: marker; content: "(" counter(cnt) ")"; } </style> </head> <body> <ol> <li>test</li> <li>test</li> <li>test</li> </ol> </body> </html> li以外でもこんな感じに使えます。 h2 { counter-inc
Firefox でテーブルの線（border）が表示されたりされなかったりする件の対策。
Web 制作のことを中心に、ちょっとした Tips などを掲載しています。「自分用メモ」が基本スタンス。 btmup Blog 珍しく Firefox のバグです（だと思います）。 あえて「解決法」ではなく「対策」としたのは、解決したかどうか定かではないからです。 つまり、「よく分からんけど、とりあえずうまくいってるっぽい」と。 発生した現象はタイトルの通りですが、テーブルに設定した線が、Firefox で見てみると表示されたりされなかったりするのです。 「されたりされなかったり」とは言っても、表示のたびに結果が変わるということではなく、再現性はあります。 ただ、文字サイズを変えたり行間を変えたりパディングを変えたりすると、表示される線と表示されない線が違ったりするということです。 色々な数値を微調整していけばすべての線がちゃんと表示されるポイントがあるかも知れませんが、環境が異なればまた
ブラウザによるフォントサイズの違いと統一｜スタッフブログ｜東京都新宿区のWeb制作会社 - ウェブラボ
※2023年5月29日に一部内容を更新しました ブラウザのデフォルトフォントサイズとは ブラウザによって文字の見た目の大きさが異なる場合があります。 これは、それぞれのブラウザが基準としている文字の大きさ”デフォルトフォントサイズ”が違うからです。 デフォルトフォントサイズとはフォントサイズを指定せずにHTMLファイルに文字を記述した際に表示されるサイズのことです。 しかし2023年4月現在主流といわているシェア率上位5位のデスクトップブラウザのデフォルトフォントサイズは全て16px(12pt)で統一されています。 シェア率上位5位のデスクトップブラウザ Google Chrome Safari Microsoft Edge FireFox Internet Explorer（日本国内シェア）、Opera（世界シェア） そのため、そこまで気にする必要はないでしょう。 しかし最小フォントサイ
Change Text Link Hover Effect Using CSS3
2020年2月25日 CSS どのサイトでも見かけるテキストリンク。リンクのついたテキストにマウスオーバーすると文字色を変更する、というシンプルかつわかりやすい効果を実装しているWebサイトが多いかと思います。この装飾をもう少し変更できないかな？と思いCSSのみでプラスすることができるエフェクトをいくつか紹介します。 ↑私が10年以上利用している会計ソフト！ 目次 ちょっと予備知識 文字色をふんわり変える 背景色をふんわり変える 文字をぼかす 光を放つグロー効果 背景を角丸に レインボーカラーに 拡大・縮小 角度を変える くるっと回転 1. ちょっと予備知識 今回はjQueryなどのJavaScriptを使わず、CSSのみで実装できる小技を集めています。その中でどの小技にも採用しているのが transition プロパティです。transitionプロパティは、時間の変化を操作するもので、
【CSS】画像を上下中央に表示する（IE7以下にも対応させる） | バシャログ。
娘が小学二年生になり、みまもりケータイ2を買い与えました ishida です。 娘がケータイのボタンを押すたびに、位置情報が送られてきて便利なのですが、 電話をかけたときにも、位置情報がメールで送られてきてちょっと通知頻度高すぎなんじゃね？ さてさて、今回はとある案件で画像を上下中央に表示する機会がありまして、 忘れないように自分的メモです。 CSS3が使えるようになってからは、display: table-cell; で簡単に対応できるようになりましたよね。 例としては、こんな感じ。 HTML/CSSコードサンプル <div class="box"> <p class="image"><img src="image.png" alt="" width="200" heigh="200"><p> </div> .box { display: table; } .box .image { d
簡単に実装できる、ボタン画像のマウスオーバーイベント 10+ - NxWorld
画像のオンオフ切り替えといったようなマウスオーバーイベントで、簡単に実装できるものをいくつか紹介します。 CSS3やjQueryを使ってちょっと変わった動きを取り入れるサイトも見かけることも多くなりましたが、今回は普段も使用頻度が高いと思う定番のものに絞りました。 サンプルで使用する画像とDEMOについて 各マウスオーバーの動きを実装するにあたって上のような3タイプのボタン画像を用いており、各ボタンはそれぞれ以下のようになっています。 type A 単体のボタン画像 type B オンとオフを1枚の画像にした、スプライト型 type C オンとオフをそれぞれ別の画像にし、オフ時のものは_off、オン時のものは_onを拡張子前に入れています。 また、サンプルも用意したので実際の動きはこちらで確認して下さい。 CSS：マウスオーバー時に透過させる CSSのopacity（IEはfilter）の
CSSだけで吹き出しを作ってみる 三角の作り方｜mattintosh note (跡地)
CSSで三角が作りたいなぁ…と。線を途中で曲げたかっただけなんですけどね。CSSのtransformを使って変形してもいいのですが、ブラウザによってグラフィックに差があるので実用が難しい。 そこでググってみるとborderを使ったトリックが紹介されていました。 Image-free CSS Tooltip Pointers - A Use for Polygonal CSS? | Filament Group, Inc., Boston, MA http://www.filamentgroup.com/lab/image_free_css_tooltip_pointers_a_use_for_polygonal_css/ 仕組みはborderで厚みを出し、border-colorでもって領域を分割しているそうです。最初、よくわからなかったのですが、かなり昔のことを思い出してみるとそういえば
すげー便利！ドメイン別にスタイルシート（CSS）を当てる方法。
ドメイン別にスタイルシートを当てる方法。 iframe[src*="youtube.com"]{ width: 500px; height: auto; } iframe[src*="nicovideo.jp"]{ width: 320px; height: auto; } 例えば、YouTubeの外部プレイヤー（iframe）の横幅は500にしたいけど、ニコニコ動画の外部プレイヤーは320にしたいときは、上のように書くと上手く動作します。 a[href*="wayohoo.com"]{ color: red; } a[href*="goryugo.com"]{ color: blue; } ちなみに、aタグをドメイン別に指定する場合はこのようになります。(wayohoo.comは青色、goryugo.comは赤色とする場合) タグ名[属性名*="URL"]{ /* CSSの中身 */ }
[css]マウスオーバー時に画像透過をさせロールオーバーを表現するcssテクニック – devolen
cssでロールオーバー(ホバー)時に画像透過をさせ簡単にロールオーバーを表現する方法。 非常に簡単に画像のロールオーバーを表現ができるので紹介します。 ※上の画像は記事内容と全く関係ありませんm(__)m このブログでもロールオーバー(ホバー)時の表現として画像透過をさせているます。 以下のサンプル画像に、ロールオーバーしてもらえれば少し薄くなっているのが分かるかと思います。 その透過処理の方法なんですが非常に簡単です。 ■以下CSSでの画像透過の方法。 ロールオーバー時に画像透過をしたい「img」に以下のCSSを記述してください。 div#hoge a:hover img { opacity:0.8; filter: alpha(opacity=80); -ms-filter: "alpha( opacity=80 )"; background: #fff; } ■ポイント ■filte
CSSでボックスの内容物を上下中央揃えにする方法3種。｜web bibo
↑CSSだけでこんな感じに上下中央揃えを実現させるテクニックです。下記の3つの方法を紹介します。 ・1行のみのテキストを中央揃えにする場合 ・2行以上のテキストまたは画像を中央揃えにする場合 ・高さが決まっていない要素を中央揃えにする場合 1行のみのテキストを中央揃えにする場合 <!-- HTML --> <div> <p>1行のみのテキストに有用</p> </div> /* CSS */ div{ width: 200px; height: 100px; background: #DDDDFF; text-align: center; } p{ line-height: 100px; } →1行のみのテキストを中央揃えにするサンプル line-heightは行間のスペースを制御するプロパティです。なので、2行以上の文などには利用できません。1行だけの場合には簡単に実装できる有用な方法です
CSS3 テキストグラデーション指定 スマフォンサイト有効
CSS3でテキストグラデーション指定をする方法です。 HTML <p>TEXT BACKGROND GRADIENT</p> CSS p{background-image: -webkit-gradient(linear,left top,left bottom, color-stop(0%,#feb08a), color-stop(49%,#f66428), color-stop(50%,#f0541f), color-stop(100%,#f74408)); -webkit-text-fill-color:transparent; -webkit-background-clip:text; その他任意の指定 } background-imageでグラデーション指定。 -webkit-background-clipで背景を文字に指定。 -webkit-text-fill-colorで文字
「吹き出し」をツールチップとして実装するjsいろいろ
マウスオーバー等で吹き出しが 現れるツールチップのまとめです。 jQueryが殆どになります。 吹き出しは画像やcssを変更 すれば別の形状にする事も可能 なのでうまく活用したいですね。 吹き出し以外のツールチップを実装できるjsをお望みでしたら以下の記事が参考になりそうです。 15 jQuery Plugins To Create A User Friendly Tooltip 40+ Tooltips Scripts With AJAX, JavaScript & CSS vTip 凄く可視性が高い吹き出し。フェードインで表示し、マウスオーバーの間はマウスストーキングします。使いやすそう。対象がテキストでも画像でもOK。試しに入れてみました。以下のリンクにマウスをあわせるとバルーンが現れます。角はcssで丸くしました。デフォルト状態だとマウスカーソルにarrow部分が重なってしまうので
CSS3のWeb Fontを使ってみたよ。 | Ginpen.com
英語だけですが……、Google web fontsのリソースとGoogle Font APIを使うと、簡単にWeb Fontを使って、文字のまま装飾する事ができます。 Web Fontって？ CSS3で追加される機能で、サーバーに置いたフォントを使ったデザインを作れるようになるものです。 今までもフォントを指定することはできましたが、利用者のマシンにそのフォントがインストールされていないと無意味でした。Web Fontは指定のフォントファイルをダウンロードさせる事になるので、誰が見ても同じフォントで表示されるようになります。 ファイルのダウンロードが必要ってのがネックですね。日本語の場合は英語と違ってファイルサイズが膨大になりますから、使いどころは限られそうです……。 Web Fontの使い方 手順はふたつです。 @font-faceでフォントのURLを指定する。 font-family
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://coliss.com/articles/build-websites/operation/css/css-vertical-align-anything-by-sebastian.html
div内で下揃え - CSSブログ～ホームページ制作会社 gravity works（グラビティ・ワークス）のCSSについての知識と備忘録
CSS3でここまで出来るの？！真似してみたいと思える物からそうじゃない物まで様々なCSS3チュートリアル達！ | バンクーバーのうぇぶ屋