タグ

cssに関するmyrmecoleonのブックマーク (37)

  • 栄光ゼミナール;塾選びガイド

    栄光ゼミナールとほかの塾との授業料、サービスなどさまざまなポイントについて比較しています。栄光ゼミナールの授業料、サービスなど充実させたコンテンツで作成していますが、やはり一番栄光ゼミナールを知るには、資料請求が一番です。 栄光ゼミナール資料内容 日程と授業料についてのご案内 栄光ゼミナールの夏期講習のご案内 個別指導のご案内。 「今子供たちは・」資料集栄光ブックレット とっておきなDVD(届くまでお楽しみ) 栄光ゼミナールでは、はじめての方には無料の夏期講習会になります。テキストの教材費は自己負担になりますが、それでも1教科につきたったの2100円。 栄光ゼミナールは特に中学生を対象に向けて圧倒的人気のサービスです。もちろん、それに付随するしっかりとしたサービスがあります。大手の学習塾には、有名講師が授業を100人程度で聞くタイプと少人数制(6人から20人程度)できめ細やかな授業

    myrmecoleon
    myrmecoleon 2007/06/06
    まだあまり内容は充実してない。将来に期待
  • フロートとネガティブマージンまとめ:CSS | Tech de Go

    myrmecoleon
    myrmecoleon 2007/05/21
    ネガティブマージンってこう使うのか。
  • テキストサイズ変更に応じて画像のサイズを変えるCSSテクニック:phpspot開発日誌

    Create Resizable Images With CSS | Smiley Cat Web Design I'm a big fan of layouts that still work if a user increases their browser's text size. テキストサイズ変更に応じて画像のサイズを変えるCSSテクニック 方法1 次のDIVがあったとして、 <div class="resize"></div> 次のCSSを適用します。 .resize { background: url(image.jpg) -130px -140px no-repeat; border: 3px double #fff; float: left; height: 12em; margin: .2em 1em 1em 0; width: 12em; } すると、文字サイズを変更

    myrmecoleon
    myrmecoleon 2007/05/15
    画像のサイズというか,隠れてる部分が表示されるってことか。
  • TRANS - * { magin: 0;}だけでは物足りない!zoom: 1;を使おうよ!

    IE6からIE7が今後格的にマーケットシェアを取って行くことを考えると、IE7の仕様やバグを考えた上でのマークアップが欠かせないとは思います。でも、僕らはまだIE7がどんなものかが分からない。そのため、とりあえず* { zoom: 1;}を指定しておくことが安全策なのかもしれません。 IE7のZoom機能で、見事にこける。 先日、うちの体のサイトを更新し終わった際に、スタッフから「あれ、しゃらくのサイトずれてるよ」と指摘されました。更新箇所が多く、CSSも多少いじくったので、どこか消してしまったのかもしれません。そこで、自分のブラウザで確認するも、どうも問題が再現できない。そのスタッフのブラウザを見ると、こんな感じになっていました。 僕のFirefoxで見てみても問題ないし、そのスタッフが使っているIE7でも問題なし。「うーん」と悩んでみるものの、意外と答えは簡単なところにありました。

    TRANS - * { magin: 0;}だけでは物足りない!zoom: 1;を使おうよ!
  • http://ima.pandach.com/cgi-bin/mt/2007/04/post_107.php

    myrmecoleon
    myrmecoleon 2007/04/21
    例によってIE6では使えないと。
  • CSSで「text-indent:-9999px;」や「display:none;」の画像置換は使ってはいけない - webデザイナーのナナメガキ

    text-indent:-9999px;」や「display:none;」でテキストをウィンドウ外に飛ばしたり非表示にして、代わりに背景画像を表示させる手法を「画像置換(Image Replacement)」というが、これには重大な欠陥があって、最近では使用が推奨されていない。 h5{ width:150px; height:50px; background:url('ir_test.gif') no-repeat; text-indent:-9999px; } <h5>SITE TITLE</h5> h5{ width:150px; height:50px; background:url('ir_test.gif') no-repeat; } h5 span{ display:none; } <h5><span>SITE TITLE</span></h5> 上記のようなCSSだと「CS

    myrmecoleon
    myrmecoleon 2007/03/08
    ずいぶんトリッキーなことやらせてるんだな……
  • line-height に単位ありの指定は駄目?

    最近、CSSline-height プロパティに指定する値は単位なし (<number>) が良いという話が話題になっているようです。別に今に始まった話題ではないんですけども、最近この話題に触れている記事の中に、ちょっと気になる書き方をされる方がいるので書いてみます。 で、そもそもなんで line-height の値は <number> で指定しておいた方がいの?ってところですが、その理由をわかりやすくまとめている Lucky bag::blog さんの記事をまずは紹介しておきます。 line-height の値には単位なしが良いとされる理由 : Lucky bag::blog line-height の値には、 normal inherit <length> <number> <percentage> が指定できますが、ユーザーエージェントのデフォルト値を使用する normal と

    line-height に単位ありの指定は駄目?
  • CSSでオシャレな吹き出し形式のブロックを作成する「CSS Speech Bubbles」:phpspot開発日誌

    willmayo.com CSS Speech Bubbles Easy to customize speech bubbles coded in CSS and valid XHTML 1.0 strict. CSSでオシャレな吹き出し形式のブロックを作成する「CSS Speech Bubbles」。 次のような吹き出し形式のblockquote要素を作成するサンプルが配布されています。 HTMLコードは次のようにクリーンにできます。 <div class="bubble"> <blockquote> <p>Works great for blog comments!</p> </blockquote> <cite><strong>John Smith</strong> on 1st January 2007 at 3:55pm</cite> </div> 角丸部分にはCSSだけでなく、

    myrmecoleon
    myrmecoleon 2007/02/19
    いいなこれ
  • ITmedia +D LifeStyle:ネットから長文が消えたいくつかの理由 (1/3)

    連載でお送りしているコラムは、毎回文字数にして4000字から5000字程度である。ネットに掲載されている記事の中では比較的長文の部類に入ると思われるが、雑誌の感覚ならばだいたい2見開きぐらいの分量だろうか。のレベルからすれば、この程度は全然長文とは言えないわけだが、感覚的にはずいぶん長く感じられる方も多いことだろう。 わかってるなら短くしろよと思われるかもしれないが、それがなかなかできない。わかりやすくするためにはたとえ話も必要だし、少しはオモシロオカシイ事も書きたいし、そうこうしているうちにこの分量になっちゃうわけである。毎回毎回お付き合いいただいて、申し訳ない。 さて、ネットの中の流れを見てみると、もはやコンテンツは文章だけではなく、絵や動画もかなり多くなってきた。WWWの可能性を語っていたその昔は、文字情報だけでなく図版や音楽、さらには動画もと言われて来たわけだが、ようやくそれが

    ITmedia +D LifeStyle:ネットから長文が消えたいくつかの理由 (1/3)
    myrmecoleon
    myrmecoleon 2007/02/07
    読むときはともかく,書くときは行間詰まってても気にならないなー。主に使うのエディタだし。/長文書きが少ないのは,出版よりも高頻度に更新する習慣ゆえかと。
  • 我的春秋: パンくずリストのマークアップ

    ちょっと前に パンくずリスト(Topic Path)を作成する際に使えそうなサンプル8種(CSS HappyLife)というエントリーが盛況でしたが、今日はパンくずナビゲーションの論理構造面を補強する意味も込めて、(X)HTML マークアップの例を、サイト構造やサイトの目的に応じて、いくつか挙げてみました。CSS の話まで入れると長くなるので、今回は(も?)(X)HTML マークアップに話を絞ります。CSS については、特にセレクタまわりが結構 変わってしまいますが、ひとまず、HirasaWa さんのエントリーなどを参照してください。(気が向いたら、別エントリーを立てますけど、実際に書くかどうかは未定。) 階層型構造(tree structure) [2006-02-11 追記] 石川一靖さんより、「セマンティクスを重視するならa要素にrel/rev属性を加えてリンクの関係性を明示するのが

    我的春秋: パンくずリストのマークアップ
    myrmecoleon
    myrmecoleon 2007/02/06
    nlって知らなかった。次世代かあ。
  • tech.nitoyon.com@hatena - はてブのCSSをカスタマイズしてみた

    hatena毎日使っているのにデフォルトのスタイルのままになっていた「はてなブックマーク」の CSS を変えました。こんな感じです。 b:id:nitoyon「はてブ」の何となく分かりにくい部分を、分かりやすく見せることを目標に作ってみました。以下では、今回のデザインでこだわった「タイトル部分のアイコン」と「コメントのふきだし」について簡単に説明してみたいと思います。 タイトル部分のアイコンまずは、タイトル部分。デフォルトのタイトル部分のアイコンや数字の羅列は意味が分かりにくいですよね。マウスを乗せたらツールチップで説明が表示されるのですが、なんか直感的じゃない。この部分の数字の意味を分からずにはてブを使ってるひとも多いのでは…。 なので、画像を書き換えて分かりやすくしてみました。RSS の青くてかっこ悪いアイコンも、オレンジ色のおしゃれなやつに。いろんな人にお気に入りにいれてほしいので、

  • スタイルシートを分けて管理する方法をまとめる - 2xup.org

    comment 2006-10-17T21:15:00+09:00 お好みの言語が英語で無い場合は、日語でどうぞ。 In this PDF file, the order of the set format rule and property's appearing was announced. This time, the method of separately managing the CSS file used on the site is announced. Why is CSS divided? I think that most reasons are the improvements of the work efficiency. The access to the revision part becomes early They are combined and co

    myrmecoleon
    myrmecoleon 2006/10/18
    「ぬかみそ」が気になる。/見た。使わないと理解できないなこれ。GPLライセンスか。今度使ってみよ
  • CSSに抽象化の手法を導入したら便利じゃね? - [・ _ゝ・]日記を書くはやみずさん

    CSSは、あまりにプリミティブすぎる、という話。 既存の問題点 (俺が知らないだけかもしれないけど)CSSは、基的にHTMLタグの名前、クラス、擬似クラス等のセレクタ*1等で対象を指定して、その中にプリミティブなスタイルの指定を書き並べていく*2、というスタイル。 これって、ものすごく不便じゃない?少なくとも、反復作業が大嫌いなプログラマにとっては苦痛が生じる場面が多々ある。 例えば、ページを左右に2分割するようなレイアウトを考えてみる。右側が背景白、文字色黒で、左側が背景黒、文字色白にすることになった。その他のデザイン的な要素については、左右共に同じとする。このとき、スタイルシートはこんな感じになると思う。 div#page_right { width: 50%; float: right; background-color: white; color: black; (ここから共通部

    CSSに抽象化の手法を導入したら便利じゃね? - [・ _ゝ・]日記を書くはやみずさん
    myrmecoleon
    myrmecoleon 2006/10/15
    「共通部分を複数指定で書いて、非共通部分はそれぞれ書く、という方法」これ基本だと思うんだが。/class と id を使い分けるという手もありますね。/ああ,コメントの「変数」ってのは同意。
  • ちょっと使えるかもしれないCSS(1) - 見出しを飾る | オトコのキモチ2

    こちらのブログには認証がかかっています。 ユーザー名 パスワード Powered by Seesaa

    myrmecoleon
    myrmecoleon 2006/09/24
    あらべんり。
  • CSSだけでリモートロールオーバー

    イメージも全く同じ 月ナビ(透過疑似フレーム)月ナビって? こーこにいるよ、月はまだここにいるよのナビゲーション もう1つの没テクニック 作り方 月ナビの作り方。 かなり大雑把な説明です 欠陥・問題点 キャッシュが変になります GoogleYahooで八分状態に リモートロールオーバー(このページ)作り方 今マウスが乗っているメニューの作り方です。この説明と連動してますね。これ、CSSで出来てます。その作り方。一見無駄なものに見えても、削ると上手くいかないブラウザが出たりしますので、改良される時は、慎重にお願いします 同時に2箇所のリモートロールオーバーこのページにクラスをプラスして、一箇所のオンマウスで別々の場所をリモートコントロールします。2箇所と限らず、3ヶ所でも4箇所でもスワップコントロール可能です。 このページに場所の指定を加えるだけなので簡単。勿論、JavaScript

    myrmecoleon
    myrmecoleon 2006/09/12
    CSSだけでここまでやるのは見事。
  • 標準モードと互換モードについて

    汎用性を保たせるためのモード HTMLの形式が徐々に進化することに並行して、HTMLを装飾(デザイン)するスタイルシート(以下CSS)も変化し続けています。現在のブラウザはCSSの標準に準拠した解釈でページを表示するようになっていますが、ブラウザの種類やHTMLの形式によってその解釈が異なることがあります。従って、個々のブラウザでは古いHTMLのバージョンで書かれたページも表示できるように、互換モードが搭載されています。 現在のブラウザの多くはCSS標準に基づいてページを表示するするようになっています。このCSSの標準に準拠して表示するモードを『標準モード』、一方過去のブラウザでも表示できるようなレイアウトで表示するモードを『互換モード』と呼んでいます。 従って、HTMLだけでなく、スタイルシートも使ってページをデザインするには注意が必要です。 モードの切り替えの判断は… 現在のWEBブラ

    標準モードと互換モードについて
  • Greasemonkeyが適用できないページへのリンクに警告画像を付加する - 技術メモ帳

    URL が hiddenWindow.html で終わっているページには、 Greasemonkeyスクリプトが適用できない。 http://d.hatena.ne.jp/lurker/20060818/1155913962 というのを前に書いた。 その記事にて、id:fallaway さんに 『Grease-monkeyを使わせないページへのリンクに[!]をつけるスクリプト』キボンヌw とコメントを頂いたので作ってみた。 hidden_window.user.js // ==UserScript== // @name hidden window // @include http://* // ==/UserScript== GM_addStyle( 'a[href$="hiddenWindow.html"]:after { content: url("http://www.famfamf

    myrmecoleon
    myrmecoleon 2006/08/25
    CSSでこういうのもできるんか