タグ

cssに関するllilのブックマーク (29)

  • コピペブログがムカつくので、はてブを快適にするユーザーCSS作った

    はてブは便利だ。かれこれ使い続けて8年目になる。 しかし、はてブを使っているとしばしばムカつくことがある。 それは2chをコピペしただけのデマまとめサイトがホットエントリとして頻繁に表示されてしまうことだ。 リンクをクリックしなければいいのだが、最近はタイトルだけで不快になるレベルのものも多い。 例えばここのところ、冷凍庫に入ったバイトをアップして炎上させる遊びがリア充の間で流行しているが、 「ハム速」というサイトはこういったものを毎回取り上げて、嫌でも目に付くタイトルで他人の個人情報を晒している。 なにがホットだよ。見たくねえよ死ね。 しかし、はてなの運営はいつまで経っても非表示サイト機能を用意してくれないし、 こういったクソサイトを未だにブクマしてホッテントリ入りに貢献するはてなユーザーはあとを絶たない。 これらを弾くユーザースクリプトやユーザーCSSを書いてくれた人もいない。 仕方な

    コピペブログがムカつくので、はてブを快適にするユーザーCSS作った
    llil
    llil 2013/11/24
  • cssとは?使い方と学び方の基礎まとめ - プログラミング学習の窓口

    プログラミングの基礎であるhtmlを勉強していると、必ず出てくる言葉がcss。 現代のwebサービスにおいて、htmlcssはいわば兄弟のようなもので切っても切れない関係と言えるでしょう。 では、cssとはいったいどういうものなのでしょうか。 簡単に言うと、Webページの文字の色や大きさ、背景、配置といった見た目を設定する言語の一種です。 静的ページも動的ページも見た目の部分の多くはこのcssで制御されています。 もしcssを詳しく学ぶなら、独学もいいですがプログラミングスクールがおすすめです。費用は当然かかりますが、アドバイスがもらえることと、学習スケジュールが管理されるので、強制的に頑張れる仕組みが作れるのもメリットと言えるでしょう。 The post cssとは?使い方と学び方の基礎まとめ first appeared on プログラミング学習の窓口.

    llil
    llil 2013/11/05
  • CSS上級者を悩ませるフォント指定を探究するぜ2011 autumn

    2011年9月2日 CSS初心者から上級者まで頭を悩ませるフォント指定のベストプラクティスを模索してみた。 2014年4月28日追記: フォント指定に関する新しい記事を書きました。 CSSのfont-family指定に関する考察 2014年版 先日、CSSによるフォント指定について色々な人と話をする機会があり、せっかくなので、これまでの自分のやり方を、もう一度ゼロから考えなおしてみようと思い立った。 font-familyの指定を考察する CSSによるfont-familyの指定についての世間一般の見解を調べていると、非常に参考になる記事を発見! font-familyはメイリオが先かヒラギノが先かという命題を気で調べた 上記のウェビンブログ様の記事中に添付されている資料:日のコーダーのfont-family指定が、非常に興味深い。これを見ると、ある程度経験のあるコーダーさんたちの中で

    CSS上級者を悩ませるフォント指定を探究するぜ2011 autumn
    llil
    llil 2013/05/04
    font/ 「winとヒラギノを組み合わせると、すごく見辛くなる」ぐえー
  • 三点リーダが真ん中に表示されない理由

    三点リーダ「…」が「…」という風に真ん中に表示されない問題について調べてみました。 1.三点リーダとは 説明するまでもありませんが、点を3つ横に並べた形をした記号のことで、語尾を省略したり、言葉の余韻を残すときに使う「…」です。 2.問題点 たとえばブログを書いているときに、記事編集画面のテキストエリアでは「…」と表示されているのに、公開したページでは「…」となることがあります。 3.原因 三点リーダが真ん中に表示されないのはCSSの「font-family」の設定によるものです。 「font-family」の値には多くのフォントを並べているケースが多いと思いますが、その一番最初に記述しているフォントに依存します。 たとえば、このブログのfont-familyは以下のようになっています。 font-family: Verdana,Arial,"メイリオ",Meiryo,"ヒラギノ角ゴPro

    三点リーダが真ん中に表示されない理由
    llil
    llil 2013/05/03
    font/
  • http://blog.alice-books.com/tmp/zero.html

    ルイズ!ルイズ!ルイズ!ルイズぅぅうううわぁああああああああああああああああああああああん!!! あぁああああ…ああ…あっあっー!あぁああああああ!!!ルイズルイズルイズぅううぁわぁああああ!!! あぁクンカクンカ!クンカクンカ!スーハース ーハー!スーハースーハー!いい匂いだなぁ…くんくん んはぁっ!ルイズ・フランソワーズたんの桃色ブロンドの髪をクンカクンカしたいお!クンカクンカ!あぁあ!! 間違えた!モフモフしたいお!モフモフ!モフモフ!髪髪モフモフ!カリカリモフモフ…きゅ んきゅんきゅい!! ルイズ!ルイズ!ルイズ!ルイズぅぅうううわぁああああああああああああああああああああああん!!! あぁああああ…ああ…あっあっー!あぁああああああ!!!ルイズルイズルイズぅううぁわぁああああ!!! あぁクンカクンカ!クン

    llil
    llil 2010/06/03
    びっくり。
  • [NS] お知らせ:「コナミコマンド」を実装しました

    当サイトでは、日よりコナミコマンドを実装いたしました。コマンドはファミコン版グラディウス準拠の「上上下下左右左右BA」です。SFC版グラディウスIIIのように自爆はしません。ご安心ください。 コマンドを打つとサイト全体がパワーアップします。もう一度コマンドを打つと元に戻ります。携帯電話やRSSリーダでご覧の場合は効果がありません。ご了承ください。 特に意味はありませんが、どうしようもなくコナミコマンドを打ちたくて打ちたくて仕方がなくなったときなどにご利用ください。料金は一切いただきません。 著作権を主張するようなモノでもないので、自分のサイトに付けたいと考えてらっしゃる奇特な方はソースを見て勝手にお持ち帰りください。 追記:うまくいかない方は日本語入力をオフにしてください。Windows版のInternetExplorer、Firefox、Operaそれぞれの最新版で動作確認済みです。

    llil
    llil 2009/10/17
    これはニヤニヤしちゃうw
  • ppBlog official

    こんにちは、martinです。日に帰国して1年が経ちました。昨年は2月から新しい職場で働き始めたり、9月6日に第1子が生まれたりとバタバタな一年でして、まるでppBlogの開発・サポートが出来ませんでしたが、今年はなるべく時間を作ってppBlogをいじれたらと思っています。 世界中の皆さんにとって、良い年でありますように。 久しぶりのカキコ。 静的リンクでの挙動を変えています。URLのパスに日付情報などを含ませるように。まだ、いじっている段階なので、色々と不具合があるだろうけれど、まぁ気にしないと。 日付情報がある以外には、現状、PermaLink用の英数文字からなる記事タイトルを別に指定できたのですが、これはそのまま取っておくとして、そうでない場合は、記事のタイトルがそのままブラウザのアドレスバーに表示されるような感じにしてます(静的リンクが有効な場合ですが)。今時のブラウザならエンコ

  • IE6で閲覧すると。

    hamashunさんがTwitterで、 IE6を使って閲覧すると右上に『アナログ』って出るようにしようぜ。 って言ってたので、CSS HappyLifeでやってみた。 ボクが出来る2008年最後の大仕事でした。えぇ。 使いたい方は是非是非。 ちなみに、ボクが使った画像はコレです。自分のモニタで出るやつを参考にしました。 ご自由にお使いください。 IE6だけに表示させるにはどんなやり方でもいいっすけど、手っ取り早いのだったらハック使ってやるのがいいかと。 .analog { display: none; } * html .analog { display: block; position: absolute; top: 10px; right: 30px; } こんな感じで。 であ。 16日のお昼頃追記 ウチのアクセス解析を久々に確認してみたら、全体の50%くらいがFirefoxで40%

    IE6で閲覧すると。
    llil
    llil 2008/12/23
    「アナログ」
  • キーワードクラウドページ、keywordcloudモジュールを追加しました - はてなダイアリー日記

    最近言及したキーワードをはてなブックマークなどのタグ一覧のようにクラウド(雲)状に見る事のできるキーワードクラウドページ、およびkeywordcloudモジュール機能を追加しました。idea:2576でご提案いただいたアイデアをもとに実装致しました。ご要望いただきありがとうございました。 はてなダイアリーのヘルプ - ユーザーがこれまで言及したキーワードの一覧ページを見る はてなダイアリーのヘルプ - 最近言及したキーワードを表示する(keywordcloudモジュール) キーワードクラウドページ キーワードクラウドページは、最近14日間に使用したキーワードを表示します。スタイルシートに指定がある場合、使用頻度が多い順にキーワードが大きくなります。 http://d.hatena.ne.jp/ユーザー名/keywordcloud からアクセスできます。 例 http://d.hatena.

    キーワードクラウドページ、keywordcloudモジュールを追加しました - はてなダイアリー日記
    llil
    llil 2008/12/23
    スタイルシート/
  • CSS 3における新しいレイアウト手法:ボックスレイアウト - builder by ZDNet Japan

    ウェブページのレイアウトでは、ヘッダーやサイドバー、コンテンツなどをどのように配置するかがポイントとなる。現在、配置のコントロールにはfloatやpositionプロパティを利用するのが一般的だが、CSS 3の「Advanced Layout Module」という草案では、新しいレイアウト手法が提案されている。 このレイアウト手法は「行と列のレイアウト」や「ボックスレイアウト」と呼ばれ、FirefoxとSafari、Google Chromeが対応している。 ボックスレイアウトの機能を利用すれば、これまでのfloatやpositionプロパティでは困難だった「段の高さを揃えた段組み」なども簡単に作成できるようになる。 そこで今回は、floatプロパティとボックスレイアウトを利用した段組みを比較していく。また、CSS 3で段組みのレイアウトを実現する「Multi Column」との違いも確認

    CSS 3における新しいレイアウト手法:ボックスレイアウト - builder by ZDNet Japan
  • 複数のclassをセレクタに指定した際のIEのバグ | Blog hamashun.com

    関連リンク 複数のclassをセレクタに指定する方法 複数のclassをセレクタに指定する際のメモ書き 複数のclassをセレクタに指定した際のIEのバグ 複数のclassをセレクタに指定する方法でぴんどめさんからコメント頂いた件ですが、その後ぴんどめさんからサンプルファイルを送って頂けて、どうやら判明しました! ぴんどめさん、わざわざありがとうございました! HTML <div class="sample code test">~</div> CSS div.hoge.test { color: red; } こんなソースがあった時に、来ならば文字色は変わらないはずです。 現にFirefoxやOperaではそのように表示されます。 しかし、なんとびっくりIE様は文字色を赤にしてしまうのです! なんてこった! どうやらIE様は、複数のclassを使うセレクタは、最後の一つのclassしか

    llil
    llil 2008/10/03
    IE6/「どうやらIE様は、複数のclassを使うセレクタは、最後の一つのclassしか見ていないようです。」
  • 単語の禁則処理に関してのメモ|CSS Happy Life

    KiriLog WWW WATCH Webアクセシビリティについての覚書 Security Note 前向きストラテジー B to A vagabond 2.0 wwwusic.net 世界を変える挑戦 5colors-HERO! Dazzling + ピクトグラム チャンネル デジパのウェブサイト制作基姿勢 極端にテキストが長いと折り返してくれない。極端にテキストが長いと折り返してくれない。 ユーザビリティの追及 ビジュアルデザインへのこだわり アクセシビリティへの配慮 ウェブサイト制作の流れ Movable Typeによるサイト構築 ウェブコンテンツ企画 ウェブサイト運営支援 ウェブシステム開発 ウェブ標準 / アクセシビリティ準拠サービス 会社概要 採用情報 環境・社会貢献活動 社員ブログ 自社運営サイト アクセスマップ digiper Vietnam Co.,Ltd KiriLo

  • タグクラウドのフォントサイズの計算式について

    タグクラウドのフォントサイズの計算式について Permalink URL http://www.magicvox.net/archive/2008/04091135/ Posted by ぴろり Posted at 2008/04/09 11:35 Trackbacks 関連記事 (0) Post Comment コメントできます Category タグクラウド(Tag Cloud)を生成する際に、タグの使用回数に応じてフォントサイズの大小を計算していますが、今までは単純な一次関数を利用してこれを求めていました。それを試しに対数関数を利用してみたところ、ダイナミックに変化を感じられるタグクラウドを表現することができました。

    タグクラウドのフォントサイズの計算式について
    llil
    llil 2008/10/03
    「そこで,この計算式を一次関数から対数関数(log)を利用したものに」
  • 日本語に対して欧文フォントを指定した場合の問題点 - Web標準普及プロジェクト

    語に対して欧文フォントを指定した場合の問題点 CSSではfont-familyプロパティで要素に対してフォントを指定することができます。 もし、欧文フォントを日語混じりの要素に対して指定しても、 英数字は指定した欧文フォントのもの、日語はそれが含まれる他のフォントと、 自動で描画時にフォントが選択されます。 しかし、ここにちょっとした落とし穴があるので紹介しておきます。 x-height まずは題に入る前に欧文フォントを考える際に重要なx-heightを紹介しましょう。 x-heightとは文字通り小文字のエックスの高さです。 これは平均的な英語の小文字の大きさです。 欧文は日語とは違ってx-heightが事実上のフォントの高さとなります。 なぜなら欧文のうち、大半の文字はx-heightしか高さの無いアルファベットの小文字だからです。 さて問題です。 欧文の中に記号を入れる際

    llil
    llil 2008/10/01
    font// なるほどねー★☆「この問題の回避方法は、無責任なフォント指定は行わない、これにつきます。/フォントの一般名の指定のみを行っている場合は/このような問題は起こらないと思われます。 」
  • リスト全体の余白を調整する

    margin の値には auto(自動)を指定することもできます。 マージンとパディングの指定については、以下のページをご覧ください。 ボックスのマージン(外側の余白)を指定する ボックスのパディング(内側の余白)を指定する デフォルトの余白を取り除く方法 一般的なブラウザでは、リストの周囲に適度な余白が設定されています。 この余白を取り除きたい場合は、ul要素(またはol要素)に対して次のスタイルを設定します。 ul { margin: 0 0 0 1em; padding: 0; } 左マージンは、少なくともリストマーカー1つ分以上の大きさが必要です。(以下は1つの目安です) ul要素に設定する場合 … 1em 程度 ol要素に設定する場合 … 1.5em ~ 2em 程度 マージンとパディングを 0 にして、左マージンにだけ上記の値を設定する、といった感じになります。 余白の比較 u

    リスト全体の余白を調整する
    llil
    llil 2008/10/01
    ブラウザ別の表示例/わかりやすい/「ul 要素(または ol 要素)にマージンやパディングを指定すると、リストマーク(マーカー)がはみ出てしまったり、ブラウザによって表示位置が異なってしまう場合があります」
  • http:///b.hatena.ne.jp/alfalfarm/

    llil
    llil 2008/09/12
    id-アイコンが可愛い♪/ブクマページもダイアリーもsimpleで見やすい+カッコイイ。センス良いわ。/ 特にユニークな色使いが印象的。なかなか普通は思いつかない配色なのに、全体ではシックな印象。- 興味深いなぁ
  • コメント欄がウザくならない方法 - チープカ

    はてな, CSS | 前々から思っていたのですが、こういう風にするとコメントを隠すことができます。 div.commentshort{ display: none; } form div.commentshort{ display: block; } こうすることでコメントはコメント投稿欄でしか見れなくなります。そうすれば記事にコメントがついて読みづらくなるなんてこともなくてすごく便利だと思います。コメントを読みたいときはコメントページで見れますし。これを使えばいちいち外にトラックバックを表示する必要もなくなりますし、読者は自分の書いたコメントが他の人の目にさらされる機会が減るので気軽にコメントをすることができますし、管理者も気軽にコメントを無視できるという利点があると思います。はてなダイアリー日記(id:hatenadiary)と町山さんの日記にこれを導入して欲しい。ということでコメント

    llil
    llil 2008/08/10
    「こうすることでコメントはコメント投稿欄でしか見れなくなります。」これは素晴らしい
  • JavaScript読み込みブロック回避でページ表示を高速化する方法 | エンタープライズ | マイコミジャーナル

    スクリプトが読み込まれるまで画像の読み込みがブロックされている - 同ブログより抜粋 WebページパフォーマンスツールであるYSlowの主要開発者でありYahoo! Exceptional Performanceの開発者であるStoyan Stefanov氏がNon-blocking JavaScript Downloadsというタイトルで、ページの読み込み速度を向上させるテクニックを簡潔にまとめている。これはブロックが発生するJavaScriptの読み込みを並列化することでページの読み込み時間を短縮しようというもの。Webページの読み込み高速化に効果的な手法なのでWebデベロッパは一度目を通しておきたい。 JavaScriptの読み込み中はほかの読み込み処理がブロックされる。これをDOM経由で動的にロードするように書き換えてやれば並列して読み込まれるようになる。Non-blocking

    llil
    llil 2008/07/30
    performance/tuning
  • タグクラウドみたいなのの単語の折り返しに関して

    単語の禁則処理に関しては、結構無頓着であんまりそういう事がなかったのもあり、イマイチ分かってないんですけど、ブラウザによる差異が激しい問題の一つだと思います。たぶん。 Firefox3になってから、URLなどが長い場合折り返されるようになったみたいだけど、単純な半角英数の羅列だとやっぱり折り返してくれないんですね。ちと残念。 で、今回はむしろ折り返さないで欲しいっていう状況の時の処理に悩んだのでメモがてら。 サンプルは以下より確認できます。 単語の禁則処理に関してのサンプル 取りあえず、サンプル見てもらうと2つ似たようなのがあるんですが、タグクラウドみたいなのを作ったときに普通に作ると多分2番目みたいになるかと思います。 通常はコレで問題ないのです。 なにせ、1番目みたいにすると、長いテキストが入った場合に折り返してくれないので、はみ出したりしてしまいます。 更に、IE6だとoverflo

    タグクラウドみたいなのの単語の折り返しに関して
  • 日本語で斜体を使うのはおかしいだろ : ひろ式めもちょう

    メイリオフォントで斜体を表示 http://laputa.cs.shinshu-u.ac.jp/~nakayama/others/meiryo.html もはや日語においても斜体は標準的な表現方法の1つであり えー…。というか、文中で「斜体」と「イタリック」がごっちゃになっているわけだが。 いつから斜体なりイタリックなりが標準的な表現方法になったんだ。アレを多用しているサイト(はてなに多い)を見るたびに、読みづらいからやめてくれと思う。 少なくともイタリックは出自からして欧文書体のひとつにすぎないんだから、それを和文組版中で使うのは一種の破格だよね。美しくない。 「意味的にイタリックは強調、もしくは引用だから」という人がいるかもしれないけれど、強調や引用をあらわすためには日語文脈中ではほかの表記手法が用意されているわけですよ。それを適切に使えないのはどうかと。 日語の印刷物で斜体表

    日本語で斜体を使うのはおかしいだろ : ひろ式めもちょう
    llil
    llil 2008/06/26
    キャンセルはこれ追加→ cite { font-style: normal; }