はてなブックマーク

Firefoxでtd要素のborderが表示されない td要素にborderを指定しても、borderが表示されないことがあります。 td { position: relative; border: 1px solid #000; background: #ccc; } こんなようなスタイルを当てたとき、Chromeなどではきちんと表示されるのだけど、Firefoxだけ表示されないのです。 原因はposition？ デベロッパーツールでtd要素をいじってみたら、どうもpositionが指定されているとborderが表示されなくなるらしい。 かと言ってpositionを外すと意図したデザインが出来ないし、どうしたものか……と悩んでいたら、あっさり解決しました。 CSSのみで対処できた td { z-index: -1; position: relative; border: 1px soli

Androidで何かしらの要素をタップした時やフォーカスが当たった時、オレンジ色の枠が表示されます(色は機種によって違うらしい)。 このオレンジのド畜生野郎が、案外デザインを邪魔してくるので、消してやろうといろいろ調べてみました。 ネット上に転がっている情報では消えなかった #honyarara { -webkit-tap-highlight-color: rgba(0,0,0,0); } これで消えるぞ！的な情報がごろごろ出てきますが、これだとしぶとく表示されます。 驚異的生命力。Gかよ。 これで消えた #honyarara { -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-box-shadow: none; box-shadow: none; outline: none; } どうやらあの忌まわしきオレンジのド畜生はbox-sh

概要 長い文章や項目の多いフォームなどの高さを制限して、クリックで表示したいときに便利な「続きを読む」 「もっと見る」ボタン。 要素をグラデーションで隠して、ボタンをクリックすると全文を表示してくれます。 UIとして適切かはともかくとして、どうしてもページの高さを節約したいときなどに便利です。 最近では、ヤフー知恵袋の2つめ以降の回答などで見かけますね。 仕組みとしては、チェックボックスを用いて、チェックされたら兄弟要素を表示状態にするというものです。 デモはこちら [jQuery] アニメーションしながら開く「続きを読む」をjQueryで実装するから随分と時間が立っておりますが、アニメーションさせなければjQuery使うほどでもねぇなぁ、と思ったので、今のところ一番簡単な方法をメモ替わりに書いておきます。 もっといい方法あるで！！という方はコメントやらついったーやらで教えてくださいませ。

iOSは機種やブラウザに関わらずiOS10が必要みたい(要検証) Androidの標準ブラウザは恐らく全滅、Chromeは新しめのものならだいじょうぶっぽい(要検証) PCはモダンブラウザなら大体だいじょうぶ。 デモは下部のボタンから シェアボタンってあんまり使わないよね スマホでシェアボタンをタップすると、ブラウザでSNSが開いて、いちいちログインする必要がありますよね。 でも、SNSはアプリしか使わないので、ログイン情報なんて覚えていない……という人はかなり多いのです。 PCではURLは問題ないのだけど、タイトルがうまくコピー出来ないサイトが多い(どうしても周辺の余計な文字も選択してしまう)。 記事をシェアする場合、シェアボタンでSNSへ飛ぶのではなく“タイトルとURLをコピー”し、使い慣れた方法でSNSに投稿する、というほうが使いやすい人も多いのではないでしょうか。 色々調べてみると

長い文章を3行ぐらいで切っておいて、続きを読むボタンクリックでアニメーションしながら全文表示させてみます。 デモはこちら HTML <div class="grad-wrap"> <span class="grad-trigger">続きを読む</span> <div class="grad-item"> <p>近頃岡田さんへ講義人身少々招待にするあり権力…</p> </div> </div> トリガーとなるボタン.grad-triggerと高さを変化させる.grad-itemをgrad-wrapで囲います。 CSS .grad-wrap { position: relative; } .grad-wrap + .grad-wrap { margin-top: 40px; } .grad-trigger { /*ボタンのスタイルはご自由にどうぞ*/ } .grad-item { posit

テキストを選択(反転)した時のスタイルを指定するには、::selection擬似要素を使用します。 Firefoxは、ベンダープレフィックス付きの::-moz-selectionを指定しないと適用されないので注意してください。 IE8以下は未対応のため、指定してもデフォルトのスタイルで表示されます。 ::selectionの使い方 ::selection { background: #000; color: #fff; } //Firefox ::-moz-selection { background: #000; color: #fff; } 要素を指定しなければサイト全体に適用されます。 .example::selection { background: #000; color: #fff; } 要素やクラスを指定すると、その範囲のみ適用されます。 ::selectionで使用できるプ

斜めになった横並びメニュー Codepenに面白いカタチのメニューがあったので、試してみました。 CSS3のtransformプロパティを使用するため、対応ブラウザは各モダンブラウザとIE9+。 ※CSSは最低限必要なプロパティのみ記述しています デモはこちら HTML <ul> <li><a href="#">Menu1</a></li> <li><a href="#">Menu2</a></li> <li><a href="#">Menu3</a></li> <li><a href="#">Menu4</a></li> </ul> ul{ transform: skew(-20deg); } まずはulにtransform: skew(-20deg);を指定。数値はお好みで。 li{ float: left; margin: 0 1px; background: #3397de; }

CSS3のfont-smoothingプロパティを使用することで、フォントのアンチエイリアスを調節することができます。 ※Windowsはブラウザに関わらず対応していません Mac版のSafariやOpera、ChromeなどのWebkit系とFirefoxのみ、プレフィックス付きで独自実装しているみたいです。 WebkitとFirefoxで別のプレフィックスをつける必要があり、値も違ってくるので注意が必要です。 アンチエイリアス調節のデモ(効果が見えるのはMacのみ) Webkit用CSS Webkitには-webkit-を付与。 .example{ -webkit-font-smoothing: none; //ぎざぎざ -webkit-font-smoothing: antialiased; //なめらか -webkit-font-smoothing: subpixel-antial