タグ

関連タグで絞り込む (17)

タグの絞り込みを解除

CSSに関するYeshiのブックマーク (48)

  • 2016年最強のFont family設定 - ミルログ

    いつもサイト運営者を悩ませる Font-Family の指定。 今回は最先端な Font-Family 指定を考えてみました。 2017年になりましたが特にフォント環境の動きがなかったので、少なくとも当年中はこの記事を更新の更新を続けていきます。 当サイトで指定しているFont Family 当サイトでは現在、こんな感じで指定しています。 font-family: -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', '游ゴシック Medium', meiryo, sans-serif; クリップボードにコピー スポンサーリンク Mac では安定のヒラギノ Mac では普段目にするフォント、ヒラギノ角ゴを指定します。 なんだかんだでずっと Mac のシステムフォントとして使われてます

    2016年最強のFont family設定 - ミルログ
    Yeshi
    Yeshi 2017/03/05
    リンク

  • CSS3 color - CSS3ウェブブラウザ実装メモ - 血統の森 web実験小屋

    表1：CSS3カラーキーワード・チャート *1 CSS2.1で定義される17色 *2 別名でcyan *3 別名でmagenta *4 greyの綴りも受け付ける CSS3では拡張色として以上の138色（+別名10色）が定義されている。色キーワードの関係としては、 CSS3基本色＝HTML4定義色 CSS3基本色＋オレンジ（CSS3拡張色）＝CSS2.1定義色 CSS3拡張色≒SVG1.1定義色≒Netscapeカラーパレット≒X11の色名称 ということになっている。X11の色名称は、Netscapeカラーパレットとして初期のバージョンに一部の色にバグがありながらもかなり昔のNetscapeには実装されていた。よって、色をサポートしているブラウザが色キーワードを解釈できず、色が出ないということはまずないと思われる。なお、X11の色名称の経緯については、なぜCSSのカラー名には「トマト」「レ

    Yeshi
    Yeshi 2015/11/08
    リンク

  • 珍しいCSSプロパティたち - Qiita


    あまり見かけない、かつ実用的なCSSのプロパティをまとめました。 他プロパティに依存するプロパティは割愛します。 ブラウザ対応状況はCan I Use等でご確認ください。 紹介するCSSプロパティ will-change scroll-behavior resize object-fit と object-position appearance user-select font-feature-settings text-rendering font-smoothing hyphens pointer-events will-change 予め演算処理をさせておくプロパティです。 これから変化する スクロール位置 / 要素 / プロパティ を値に設定すると、事前に変化をブラウザに知らせる事ができます。 アニメーションのカクつきを、いくらか抑えることができるでしょう。 ただ、何にでも指定して
    珍しいCSSプロパティたち - Qiita
    Yeshi
    Yeshi 2015/09/05
    object-fit, object-position, will-changevw, vh, vmax, vmin, rem　あたり知らなかったメモ。
    リンク

  • いま俺たちに必要なのはz-indexの明確な指標だ - Qiita


    こんにちは、@armorik83です。こういう煽ったタイトルを書きたいってずっと思っていたので今回やってみます。 z-indexの値付けどうしてる? z-indexの説明は省略しますが、この値は取りうる範囲が膨大1でそれに対する指標が無いことから、複数のWeb設計者が入り混じる場合にバッティングする恐れがあります。1から10までの範囲で収めていた設計者のサイトに100刻みの値付けをするプラグインが導入されると、一気に関係が崩れてしまうことが想像できます。 W3Cではこの値についての明確な指標を載せていないようにみえます。︵調査不足だったらすいません︶ 広告業界では Web広告業界の展開は日本国内外問わず盛んで、さまざまな手法でうっとうしい広告を載せてきます。この時、元のコンテンツにオーバーレイする形で表示される広告や、マウスオーバーで拡大する広告などが普及してきたことで、2012年にこの
    いま俺たちに必要なのはz-indexの明確な指標だ - Qiita
    Yeshi
    Yeshi 2015/05/01
    リンク

  • レスポンシブWebデザインでハマりがちな%指定 │ Design Spice

    レスポンシブWebデザインでは要素を可変にするために数値を%で指定することが多いですが、%指定の仕様を理解してないとハマることがあります。自分もそのような経験があったので備忘録としてまとめました。 要素の幅と高さの%指定 レスポンシブWebデザインのように、ある要素の幅を一定の比率を保ったまま可変するようにするには、通常、値を%で指定します。この時の値は、 求める要素の幅÷親要素のコンテンツ幅×100% の式で求められます。 例えば求める要素の幅が20px、親要素のコンテンツ幅が200pxの場合は、10%となります。 また、ここで言うコンテンツ幅とはmargin、padding、borderを含まない幅です。 同様に高さを%で指定する場合は、 求める要素の高さ÷親要素のコンテンツの高さ×100% となります。 marginとpaddingの%指定 左右のmargin、paddingを%で指

    レスポンシブWebデザインでハマりがちな%指定 │ Design Spice
    Yeshi
    Yeshi 2014/09/13
    リンク

  • CSS3のtext-strokeとtext-shadowで文字の縁取り（アウトライン）を表現した時の違い – hazumu.net/blog

    CSS3のtext-strokeとtext-shadowで文字の縁取り（アウトライン）を表現した時の違い 2012年06月14日 css 縁取りの方法 CSS3で文字の縁取り（アウトライン）を表現する方法は二つあります。 1.text-stroke webkitのプレフィックスつきで利用します。 現在はwebkit系のブラウザしか対応されていません。 When can I use CSS text-stroke?

    Yeshi
    Yeshi 2014/05/13
    リンク

  • 1216彩票-官网平台

    您不具备使用所提供的凭据查看该目录或页的权限。 请尝试以下操作： 如果您认为自己应该能够查看该目录或页面，请与网站管理员联系。 单击刷新 按钮，并使用其他凭据重试。 HTTP 错误 401.1 - 未经授权：访问由于凭据无效被拒绝。 Internet 信息服务 (IIS) 技术信息（为技术支持人员提供） 转到 Microsoft 产品支持服务 并搜索包括“HTTP ”和“401 ”的标题。 打开“IIS 帮助”（可在 IIS 管理器 (inetmgr) 中访问），然后搜索标题为“身份验证”、“访问控制”和“关于自定义错误消息”的主题。

    Yeshi
    Yeshi 2014/04/26
    リンク

  • すごく役立った！サイト制作でさりげなく使われているCSSテクニックまとめ


    作成‥2014/04/21 更新‥2014/10/24 Web制作 > 前回コーポレートサイト制作が捗るjQuery プラグインをまとめましたが、今回はCSS版ということで、使用頻度が高いものと、これから必要になりそうなものを、忘れないようにメモしておきます。コーポレートサイトやWeb サービスサイトでさりげなく使われているものや、今後増えそうなものなど。 エンジニア速報は Twitter の@commteで配信しています。 もくじ 横並び1．今までの回り込み解除2．横並びや並び順3．均等に並べる／段組み ナビゲーションメニュー4．多階層　ドロップダウン5．amazon風　メガドロップダウン6．ドロワーメニュー コンテンツメニュー7．モーダルウィンドウ8．アコーディオン9．タブパネル テーブル10．ストライプテーブル11．レスポンシブ＋テーブル リスト12．カウント
    すごく役立った！サイト制作でさりげなく使われているCSSテクニックまとめ
    Yeshi
    Yeshi 2014/04/26
    しらないのもちらほら
    リンク

  • 長い英単語を途中で折り返したいときの CSS の指定方法: Days on the Moon

    ヨーロッパ系の言語では基本的に単語の途中に折り返しを入れません。しかし、幅の狭い領域に長い英単語を記述するときや、笑いを表す「www…www」のように欧文文字を表現に組み込むときなど、欧文文字同士の合間で折り返したいと思うかもしれません。そのような折り返しの制御を CSS で行うにはどうすればよいのでしょうか。 2013 年 6 月時点の結論 word-wrap: break-word を使うとどうなるのか word-break: break-all を使うとどうなるのか word-wrap: break-word と word-break: break-all を両方使うとどうなるのか なぜ word-break: break-all ではなく word-wrap: break-word を勧めるのか どこに word-wrap: break-word を指定するのか position:

    Yeshi
    Yeshi 2013/12/30
    リンク

  • ぼくのかんがえたさいきょうのしーえしゅえしゅ - MOL


    俺ももう30だし、夏なんで、CSSフレームワークはじめました。 とりあえず、UIエレメントとか作ってないし、CSSフレームワークとか言いながら、GithubのLanguage Staticsは98.3%、JavaScriptってな感じでGrunt Taskばかり充実してるような感じです、現状。 とりあえず、設計方針としてはマシなCSSを書くことを目標としている。この一年、スマホアプリのHTML/CSSコーディングをやってきたわけだが、度重なるUIの変更に耐えうるCSS、そして肥大化しないCSSとは何かずっと考えていて、特に答えという答えもで見つかっていわけだけど、とりあえずはこうしたほうがBetterなんじゃないかというの自分的に固まってきたので、公開してみた。 てか、最強のCSSなんて存在しないからなっ！！ t32k/maple - GitHub ありがちな落とし穴 これを作るにあたって
    ぼくのかんがえたさいきょうのしーえしゅえしゅ - MOL
    Yeshi
    Yeshi 2013/09/08
    リンク

  • なぜリセットではなく Normalize.css を使うのか | Yomotsu net


    まずは、歴史をみてみよう。 初期* { margin:0; padding:0; border:none; }tableレイアウトから CSS レイアウトへの移行期に考案された。すべてゼロにするというコードで、実装者が書いたコードのみが適用できるという手法。弊害として input 要素の枠線など、本来、スタイルをゼロにする必要がない箇所までスタイルが消えてしまい、しょうがないので更に上から枠線を加えるなどが必要になっていた 中期今から5年ほど前の 2008 年、エリックメイヤー氏によるリセット CSS やYUI のリセット CSS が登場した。全称セレクター﹁*﹂ ではなく、要素セレクターそれぞれに対して CSS をゼロにするという手法。 ただし、pや見出し要素の上下マージンやliのリストスタイルまでも依然としてゼロになっていたため、次のような、本末転倒な HTML まで
    なぜリセットではなく Normalize.css を使うのか | Yomotsu net
    Yeshi
    Yeshi 2013/03/03
    リンク

  • ITポテチ : CSSで特定のドメインを含むURLだけ強調表示する


    2011年08月20日20:17 CSSで特定のドメインを含むURLだけ強調表示する カテゴリ CSSといってもCSS3の属性セレクタを使います。 といっても最近のモダンブラウザならほぼ問題なく動作すると思います。 CSS3の属性セレクタでは、正規表現に近い書き方ができます。 たとえば﹁yahoo.co.jp﹂というドメイン名を含むリンク全てにスタイルシートを適用したい場合であれば、下記のように記述します。 a[href*="yahoo.co.jp"} { color: red; } これでヤフーJAPANへのリンクすべての文字が赤色になります。 ポイントはアスタリスク︵*)で、これがあることでワイルドカードでの指定がCSSでも可能になります。 逆に﹁^﹂を使うと特定キーワードの除外になります。 a[href^="yahoo.co.jp"} { color: blue; } これでヤフー以
    Yeshi
    Yeshi 2013/03/03
    リンク

  • -webkit-text-size-adjust: none を絶対に設定してはいけない理由


    PC 版の Google Chrome や Safari で見たときにユーザビリティーが落ちるから。 以上。 で終わってしまうと記事にならないので、ちゃんと説明しておく。 そもそも -webkit-text-size-adjustとは何か iPhone や Android のブラウザーは、縦向き (Portrate mode) と横向き (Landscape mode) の文字サイズを自動調整する機能がある。 これを制御するのが CSS の -webkit-text-size-adjustである。 文字サイズ自動調整の具体例 次のような HTML をスマートフォンで表示してみる。 <!DOCTYPE html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-
    -webkit-text-size-adjust: none を絶対に設定してはいけない理由
    Yeshi
    Yeshi 2013/02/24
    リンク

  • HTML5/CSS3にも対応、HTML/CSS/JavaScriptを整形・チェックするオンラインツール -Dirty Markup

    Dirty Markup [ad#ad-2] Dirty Markupはウェブ制作者がよく使う下記のツールをまとめたような感じです。 HTML Tidy CSS Tidy JS Beautify Dirty Markupの使い方は簡単で、右側にコードをペーストし、左側でHTML/CSS/JavaScriptを設定し「Clean」ボタンをクリックするだけです。

  • [CSS]画像置換「-9999px」のパフォーマンスを改善した新しいテクニック

    テキストで実装した見出しなどを画像に置換するテクニックで「-9999px」が有名ですが、そのパフォーマンスを改善するテクニックを紹介します。 Replacing the -9999px hack (new image replacement) [ad#ad-2] 画像置換：-9999px 改善したテクニック 画像置換：-9999px -9999pxを使った画像置換のテクニックは、下記のようになります。 HTMLは見出し要素で実装します。 HTML <h3 id="sample06">見出しのテキスト</h3> 「text-indent:-9999px;」でテキストを見えない位置にし、見出しとなる画像を背景画像として表示します。 #sample06{ width:300px; height:50px; background:url('bg-01.gif') no-repeat 0 -250p

    Yeshi
    Yeshi 2012/04/22
    リンク

  • はてなにおけるCSSメタ言語（CSSプリプロセッサ）の導入について - Hatena Developer Blog


    こんにちは、id:tikedaです。数年前から登場して以来、利用されるケースが増え続けているCSSメタ言語︵CSSプリプロセッサ︶。近年、様々な大規模サービスへの導入が進む中、はてなのサービス開発においても導入を行うため、2012/3/6に勉強会を実施しました。その内容を公開いたします。CSSメタ言語そのものの説明よりも、社内導入の為に必要な内容が中心となります。 アジェンダ どんなものがあるか 導入の背景と目的 はてなでの選択 何がやれるか どう使うか 事例・実演 運用ルール 今後の展望 どんなものがあるか Sass(scss,sass) http://sass-lang.com/ Less http://lesscss.org/ Stylus http://learnboost.github.com/stylus/ Tass http://cho45.github.com/tasscs
    Yeshi
    Yeshi 2012/04/12
    リンク

  • [CSS]スタイルシートを使用して現在位置のリンクを無効にする方法 | コリス

    使用するのはCSS3の「pointer-events」で、対応ブラウザはFx3.6+, Safari3+, Chrome(5+?)となっており、IEでは未対応です。 HTML ナビゲーションはシンプルなHTMLです。 <textarea name="code" class="html" cols="60" rows="5"> <nav> <ul> <li class="home"><a href="#">Home</a></li> <li class="about"><a href="#">About</a></li> <li class="clients"><a href="#">Clients</a></li> <li class="contact"><a href="#">Contact Us</a></li> </ul> </nav> </textarea>

    Yeshi
    Yeshi 2011/08/13
    pointer-events: none;
    リンク

  • blog.katsuma.tv


    CSSでDOM要素に対してアルファフィルターを適用させたいときは、クロスブラウザを意識すると次のような記述になると思います。 もうすこし古いMozilla系ブラウザを対象にするなら-moz-opacityの定義も追加してあげるとことになりますが、 今回はIEに絞った話のため、そのあたりは割愛します。element {filter: alpha(opacity=0); /* IE / opacity: 0; / その他のモダンブラウザ */ } さて、普段は特に何も考えずにfilter:alpha~と記述していたのですが、 実はIEはある条件下によってまったくfilterが効かない場合があります。 ActiveXが無効 そもそもの話ですが、filterはActiveXを利用したレンダリングを行っています。 そのため、そもそもセキュリティの設定などでActiveXを無効にされていると、fi
    Yeshi
    Yeshi 2011/07/30
    リンク

  • 指定した画像をCSSにしてくれるジェネレータ・・・『Img to CSS』 | 100SHIKI


    なんという力業ｗ。 Img to CSSを使えば、指定した画像をCSSにむりやり変換してくれる。 しかも変換結果はtableタグを使いまくっているというものだ。 使いどころは難しそうだが、画像に見えてそうじゃない、という驚きを演出したいときにはいいかもですな︵でもないか︶。
    指定した画像をCSSにしてくれるジェネレータ・・・『Img to CSS』 | 100SHIKI
    Yeshi
    Yeshi 2011/05/25
    リンク

  • Webサイトの基本要素 見出し・リスト・引用文のスタイルを整える


    2014年8月20日 CSS Webサイトを装飾していく時に無視できない要素、見出し・リスト・引用文。特にWordPressでオリジナルのテーマを作る時は、ブログ用にこれら基本の要素すべての装飾もすると思います。そんな時に使うコードのバリエーションをメモしていたので記事にしました。少し変えるだけで応用できると思うので、ぜひ使ってみてください！ ↑私が10年以上利用している会計ソフト！ 色、フォント、サイズなどを変えるだけで、どんなサイトでも使える見出し・リスト・引用文用のHTMLとCSSコードを紹介します。そのままコピペして使っちゃってください。少しはコーディングの手間が省ける…かもしれません。ちょいちょい使っている画像も保存して使ってもらってもOKです :) サンプル画面内の﹁HTML﹂﹁CSS﹂タブをクリックでコードが表示されます。IE6, 7, 8, FF, Chrome, Safa
    Webサイトの基本要素 見出し・リスト・引用文のスタイルを整える
    Yeshi
    Yeshi 2011/01/25
    リストタグの技、知らなかった。
    リンク
  • 1 2 3 次のページ

お知らせ

もっと読む

公式Twitter

  • @HatenaBookmark

    リリース、障害情報などのサービスのお知らせ

  • @hatebu

    最新の人気エントリーの配信

はてなブックマーク

公式Twitter

はてなのサービス

  • App Storeからダウンロード
  • Google Playで手に入れよう
Copyright © 2005-2024 Hatena. All Rights Reserved.