タグ

CSSに関するtsupoのブックマーク (67)

  • CSSコーディングで泣かないためのSassの基礎知識と10の利点

    CSSコーディングで泣かないためのSassの基礎知識と10の利点:爆捗! WordPressテーマ作成ショートカット(3)(1/3 ページ) 連載では、CMSのスタンダードでもある「WordPress」のテーマ作成を、Dreamweaverをメインに用いてさまざまなモダンな技術を組み合わせながら爆発的に捗(はかど)らせる方法を解説していく。今回は、現場におけるCSSコーディングの3つの問題点、Sassの概要と主な10の機能、SASS記法とSCSS記法の違いなどを紹介。 連載「爆捗! WordPressテーマ作成ショートカット」では、初回の「Dreamweaverで始めるWordPressサイト構築の基礎知識」で、「Adobe Dreamweaver CC」(以下、Dreamweaver)でWordPressのテーマをカスタマイズできるようにする環境構築や設定を行い、前回の「WordPr

    CSSコーディングで泣かないためのSassの基礎知識と10の利点
    tsupo
    tsupo 2014/02/18
    Sass(サスと呼ばれている)は、「Syntactically Awesome StyleSheet」の略 / 直訳すると「構文的にすげえスタイルシート」 / SASS記法とSCSS記法 / 最近は、SCSS記法が主流 / Sassの利点: 変数が使える
  • Cutting Edge - CSS のプログラミング: LESS で効率を上げる

    このブラウザーはサポートされなくなりました。 Microsoft Edge にアップグレードすると、最新の機能、セキュリティ更新プログラム、およびテクニカル サポートを利用できます。 CSS のプログラミング: LESS で効率を上げる Dino Esposito 今回は、CSS コンテンツの動的な生成に LESS フレームワークを使用する Web 開発について説明します。 Web ページのプレゼンテーションとコンテンツを完全に分離するという (ほぼ達成済みの) 約束によって、CSS が飛躍的に成長したことは間違いありません。CSS はデザイナーの担当 (のはず) ですが、ほぼすべての開発者が気にしている "関心の分離" の原理を尊重しています。そのため、CSS の使用はすぐに普及し、今では最新の Web サイトの進化に対応するのが難しいこともあるほど Web 開発に深くかかわるようになっ

    Cutting Edge - CSS のプログラミング: LESS で効率を上げる
    tsupo
    tsupo 2013/12/20
    CSS の前処理ツール / LESS, Syntactically Awesome Stylesheets (Sass) / LESS はプログラマにとってなじみ深い概念 (変数、ブロック、関数など) を CSS コードに追加するフレームワーク
  • このブログに3Dモードを追加した

    みなさん、2012年のゴールデンウィークは、いかがお過ごしでしょうか! 中には映画を観に行ったりしている人もいるかと思うのですが、タイタンの逆襲なんかを例にとってみても、最近は「3D/2D 同時公開」の流れがあるみたいですね。 というわけで、このブログも、これから更新するときは 2D だけじゃなくて 3D でも楽しめるようにしてみました。ページの右の方にある「3D mode!」をクリックすると、3D モードでお楽しみいただけます。 元ネタは LAB! – 3D it! です。webkitTransform と MozTransform を使っているので、WebKit 系と Mozilla 系でしか動かないと思います。興味のある方は、Chrome や Firefox で試してみてください。

    このブログに3Dモードを追加した
    tsupo
    tsupo 2012/04/29
    3Dモードって何かと思えば。これはおもしろい
  • https://jp.techcrunch.com/2011/07/01/20110630turn-google-into-facebook/

    https://jp.techcrunch.com/2011/07/01/20110630turn-google-into-facebook/
    tsupo
    tsupo 2011/07/01
    Google+の外見をFacebook風にしてしまう「StylishのエクステンションGoogle+ : Facebook」
  • @-moz-document - MDC Doc Center

    tsupo
    tsupo 2011/04/08
    @-moz-document 規則
  • per-site user stylesheet rules from L. David Baron on 2004-08-19 (www-style@w3.org from August 2004)

    tsupo
    tsupo 2011/04/08
    @-moz-document の書式、仕様
  • 私が新Twitterに指定しているユーザースタイルシート - ただいま村

    私が新Twitterに指定してるユーザースタイルシート - 聴く耳を持たない(片方しか)(http://d.hatena.ne.jp/rikuo/20100929) のまねです。といってもちょっとだけ。 /* プロフィール欄の斜体と明朝体をやめる */ div.bio{ font-style:normal!important; /* 斜体をやめる */ font-family:Georgia!important; /* 明朝体をやめる */ } これだけです。 これが↓ こうなります↓ この指定は、右ペインにほかの人のプロフィールが表示されたときにも適用されます。 Macではこれが↓ こうなります↓ 「明朝体をやめる」はMacの人ならいらなさそう。Macは明朝体きれいですもんね。 「斜体をやめる」のみにした場合、Macではこうなります(自分はMacではこうしてます)↓ ユーザースタイルシー

    私が新Twitterに指定しているユーザースタイルシート - ただいま村
    tsupo
    tsupo 2010/09/30
    「斜体をやめる」のはいいかも
  • 私が新Twitterに指定してるユーザースタイルシート - 聴く耳を持たない(片方しか)

    Twitterのデザインが大きくリニューアルされ、ランダムで徐々にユーザーに公開されています。 Download the free Twitter app | Twitter http://blog.twitter.jp/2010/09/twitter.html Twitter.comの新しいユーザインタフェースを早速紹介(スクリーンショット多数) | TechCrunch Japan 新Twitterの右カラムはミニプラットフォームだ―参加各社の思惑を探ってみた | TechCrunch Japan 新しいTwitterでは機能が増え、 例えばツイートの中に(Twitpicのような)対応した画像投稿サービスのURLが含まれていれば クリックで 右カラムに表示するなんて機能もあります。 他にも、 このマークがあればリプライの発言元がどのツイートか見れる、など色々と便利になっていますね。 …

    私が新Twitterに指定してるユーザースタイルシート - 聴く耳を持たない(片方しか)
    tsupo
    tsupo 2010/09/30
    Who to Follow/おすすめユーザーを消す / おすすめしてくれるのは良いんですが、邪魔なので → 邪魔ですねww
  • HTML によるプレゼン作成のススメ - WebOS Goodies

    WebOS Goodies へようこそ! WebOS はインターネットの未来形。あらゆる Web サイトが繋がり、共有し、協力して創り上げる、ひとつの巨大な情報システムです。そこでは、あらゆる情報がネットワーク上に蓄積され、我々はいつでも、どこからでも、多彩なデバイスを使ってそれらにアクセスできます。 WebOS Goodies は、さまざまな情報提供やツール開発を通して、そんな世界の実現に少しでも貢献するべく活動していきます。 昨日、 HTML5 勉強会で Opera の開発者向け機能についてプレゼンしてきました。会場が Opera の目黒オフィスということで急遽駆り出されました(笑)。 こういったプレゼンをするときに必要なのがプレゼン資料(スライド)の作成。これまでは Google Docs や OpenOffice.org で作っていたのですが、これがどうにも不便。ちょっとしたことを

    tsupo
    tsupo 2010/01/21
    それぞれのスライドを個別の HTML にしたかった / HTML で表示できるものならなんでもスライドに埋め込める / Opera には Opera Show なんて機能がある
  • 引用のやり方についての論争まとめ

    ウェブでは、「引用はこうやってするよ」「それでは駄目だよ」といった論争・トラブルが時折発生します。 内容はいずれも似たり寄ったりで、要するに「HTMLの規格に基づいて引用するよ」という考え方と、 「そんな規格に従ったから何?」という考え方の衝突というパターンです。 毎度毎度似たようなやり取りが繰り返されて不毛なようにも思うのですが、 以前の論争を誰もが知っているわけではないので、仕方のないことなのでしょう。 以前の論争は、ログが消えてしまうことも珍しくありませんし。 というわけでこのページでは、現時点でログが確認できる範囲でそういった論争・トラブルをまとめてみたいと思います。 2001年7月:ありみかさとみさんvs佐藤治さん 2002年12月:野嵜健秀さんvsいずしさん 2005年9~10月:真名垣郁夫さんvsAkkyさん 2006年10月:中島聡さんvs高木浩光さん なお、このページには

    tsupo
    tsupo 2009/10/05
    少なくとも、著作権法には、blockquote を使えとも、cite を使えとも書かれていない
  • ブラウザ依存の記述を検査するツール「Pirka'r」がOSSで公開 - @IT

    2009/10/01 情報処理推進機構(IPA)は9月30日、ブラウザ間の互換性を備えたWebコンテンツの作成を支援するツール「Pirka'r」(ピリカル)を、オープンソースソフトウェアとして公開した。 Pirka'rは、IPAのオープンソフトウェア利用促進事業の1つとして、委託先のグルージェントにより開発されたツールだ。Webコンテンツが業界標準に沿っているかどうか、またブラウザに依存した記述がないかどうかを検査することで、互換性の高いWebコンテンツの作成を支援する。 Pirka'rは、検証サーバとクライアントから構成されている。起動すると、「CSSがWeb標準に準拠しているか」「HTMLCSSJavaScriptにブラウザに依存する記述がないか」などをチェックできる。また、1つのページを、Internet ExplorerやFirefox、Safariといった複数の主要ブラウザで

    tsupo
    tsupo 2009/10/02
    「Pirka'r」(ピリカル) / 検証サーバとクライアントから構成 / 「CSSがWeb標準に準拠しているか」「HTML/CSS/JavaScriptにブラウザに依存する記述がないか」などをチェック → クライアントがEclipse風。Javaで作ってるのかな。あとOper
  • [柔軟すぎる]IEのCSS解釈で起こるXSS

    [柔軟すぎる]IEのCSS解釈で起こるXSS:教科書に載らないWebアプリケーションセキュリティ(3)(1/3 ページ) XSSにCSRFにSQLインジェクションにディレクトリトラバーサル……Webアプリケーションのプログラマが知っておくべき脆弱性はいっぱいあります。そこで連載では、そのようなメジャーなもの“以外”も掘り下げていきます (編集部) なぜか奥深いIEのXSSの話 皆さんこんにちは、はせがわようすけです。 第1回「[これはひどい]IEの引用符の解釈」と第2回「[無視できない]IEのContent-Type無視」でInternet Explorer(IE)の独自の機能がクロスサイトスクリプティング(XSS:cross-site scripting)を引き起こす可能性があるということについて説明してきました。 第3回でも引き続き、IE特有の機能がXSSを引き起こす例ということで、

    [柔軟すぎる]IEのCSS解釈で起こるXSS
    tsupo
    tsupo 2009/06/04
    スタイルシートを利用したクロスサイトスクリプティング / スタイルシート内にJavaScript / スタイルの評価時にJavaScriptを実行 // exp/* */ression / \0065\0078pression / :expression / \65x/**/pression // HTML Purifier
  • 雑記帳

    雑記帳

  • ARAKI notes - windows live writerの<p>の直後の空白の処理が変わったこととココログフリー

    tsupo
    tsupo 2008/10/20
    すごい昔の記事が引用されてるけど、それはココログフリーじゃなくて、ココログの最初期の話です。いまはココログベーシックでも、ココログフリーでもスタイルシートをいじれます。
  • Account Suspended

    Account Suspended This Account has been suspended. Contact your hosting provider for more information.

    tsupo
    tsupo 2008/08/12
    Conditional-CSS is open source software, freely available for you to use and modify (U4EA CDDL license). The source files can be downloaded using the following link, or alternatively use the online compiler to generate the PHP or binary file you require
  • [CSS]スタイルシートに「if」を使った条件式が利用できる -Conditional-CSS | コリス

    ブラウザごとのスタイルシートの記述に、ifを使った条件式が利用できる「Conditional-CSS」を紹介します。 Conditional-CSS デモ デモ画面にIE, Fx, Op, Safariの各ブラウザでアクセスすると、それぞれ用の画像が表示されます。 条件式に利用できるものは、下記のようになっています。 browser IE - Internet Explorer Gecko - Gecko based browsers (Firefox, Camino etc) Webkit - Webkit based browsers (Safari, Shiira etc) Opera - Opera's browser IEMac - Internet Explorer for the Mac Konq - Konqueror IEmob - IE mobile PSP - Pla

    tsupo
    tsupo 2008/08/12
    ブラウザごとのスタイルシートの記述に、ifを使った条件式が利用できる「Conditional-CSS」 → サーバ側で条件式を評価しつつ、通常のCSSに変換してクライアントに送信する、という仕組み、みたいですね
  • はてなブログ | 無料ブログを作成しよう

    2024夏休み旅行 神戸・2日目【前編】 zfinchyan.hatenablog.com ↑1日目はこちら 6:50 わたしと夫だけ先に起床 前日に買っておいたお芋のパンで朝ごはん 昨日の疲れからか、なかなか息子たちが起きてこなかったので、ゆっくり寝かせてから10:00にホテルの下にあるプレイゾーンに行って、パターゴルフやバス…

    はてなブログ | 無料ブログを作成しよう
    tsupo
    tsupo 2008/01/19
    Firefox だと問題ないですけど、IE だと表示がすごいことになってしまってます。 → 直りました。早速の対応、ありがとうございます
  • IEにFirebugの機能を提供する - "DebugBar"登場 | エンタープライズ | マイコミジャーナル

    DebugBarの動作例 - DebugBarサイトから抜粋 Webアプリケーション開発に必須のツールといえばFirefoxとそのエクステンションFirebugだ。その機能は驚くべきものがあり、もはやFirebugなくてはWebアプリケーション開発はできないと考えるデベロッパやデザイナは少なくない。 エクステンションが豊富に用意されているFirefoxだが、ほかのWebブラウザでも似たような機能を提供するものがある。ここでは先日新しいバージョンが公開されたDebugBarを紹介したい。DebugBarはIEを対象として開発されたツールで、Firebugの機能をIEでも実現することを目指している。 今回公開されたバージョン(5.0 beta 1)では新しくDOMタブが追加されている。DOMツリー上のノードが選択されると、Source/Style/Comp.Style/Layout/Attrs

    tsupo
    tsupo 2007/11/15
    マイクロソフト純正の Developer Tool Bar と差別化できてない。今後に期待
  • 栄光ゼミナール;塾選びガイド

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

    tsupo
    tsupo 2007/08/10
    「何でもtable病」と根は一緒なんじゃないかという気がする。「何でもAjax病」にも注意。
  • 【レポート】CSS、YAML、XML、JSONのいいとこ取り? 新データフォーマット「RSD」提案 | エンタープライズ | マイコミジャーナル

    ZeraWeb development labは2007年3日(米国時間)、新しいデータフォーマットとして「Really Simple Data(RSD)」を提案した。同フォーマットは現在注目されているデータフォーマットの優れた特徴をまとめたようなフォーマット。CSSからクォートなしのシンプルな表記を、YAMLから高い柔軟性を、XMLからメタデータとの親和性の高さを、JSONから文法の学習の容易性を持ってきていると主張されている。 ZeraWebのサイトにおいて提案されているサンプルを次に引用する。CSSとJSONのフォーマットを組み合わせたようなフォーマットになっているようだ。 Example 1: A person object.(ZeraWebからの引用) person { name { last: Yoder, first: Dan } title: Web Application

    tsupo
    tsupo 2007/08/07
    RSD って、ふつう <link rel="EditURI" type="application/rsd+xml" title="RSD" href="<$MTBlogURL$>rsd.xml" /> で出てくる RSD のことだよね。紛らわしい名前を付けるのはやめて欲しい