タグ

CSSとJavaScriptに関するtsupoのブックマーク (27)

  • 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 コードに追加するフレームワーク
  • 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 なんて機能がある
  • ブラウザ依存の記述を検査するツール「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
  • [NS] お知らせ:「コナミコマンド」を実装しました

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

    tsupo
    tsupo 2007/07/26
    ↑↑↓↓←→←→BA でスタイルシートを切り替える
  • » 25 Code Snippets for Web Designers (Part4)

    tsupo
    tsupo 2007/05/05
    25個のスニペットシリーズ第4弾
  • 25 Code Snippets for Web Designers (Part3)

    tsupo
    tsupo 2007/04/18
    「25個の snippets リンク集」第3弾
  • 簡単にブラウザ別CSSを導入するJavaScript (CSS Browser Selector) - youmos

    tsupo
    tsupo 2007/04/12
    OS、ブラウザ別のスタイル指定を簡単にできるようにしてくれるJavaScriptライブラリ / 導入するとスタイルシート記述にOS別、ブラウザ別で記述する事が可能になる
  • IE版のFirebug IE Developer Toolbar[to-R]

    IE版のFirebug IE Developer Toolbar みなさんはInternet Explorer Developer Toolbarというのを知っているでしょうか? マイクロソフトが現在ベータ版として提供しているツールで、簡単に説明すればIE版のFirebugです。 IEで使えるFireBugとして聞くとFireBug Liteを思い浮かべがちですがFireBug Liteのようにソースにjavascriptを埋め込むことなく実行することが可能です。 ちなみにFirebugとはjavascritpやCSSのデバッグなどを行えるFirefoxのアドオン(拡張機能)になります。 すごく便利ですので、使ったことがない方はFirebugの方からお使いください。 話は戻りますが、Internet Explorer Developer Toolbarのインストール方法について解説したいと

    IE版のFirebug IE Developer Toolbar[to-R]
    tsupo
    tsupo 2007/03/20
    いつの間にか Internet Explorer Developer Toolbar の IE7 対応版が出てたんだ
  • Live Nude Cams 😍 - Ooh Cams

    Live nude webcam chat IntroductionLive nude webcam chat has become increasingly popular as a form of online entertainment and communication. This unique platform allows individuals to connect with models in real-time, engaging in intimate experiences through video chat. With the advancements in technology and the widespread availability of high-speed internet connections, live nude webcam chat has

    tsupo
    tsupo 2007/03/15
    jQuery の応用例。複数の画像をスライドショー風に見せるエフェクト。
  • » 25 Code Snippets for Web Designers (Part1)

    tsupo
    tsupo 2007/03/14
    JavaScript と CSS を駆使した snippet 集
  • FirebugによるWebコードのデバッグ | OSDN Magazine

    Webサイトの開発は、世紀の変わり目となった7年前の頃ほど単純な作業ではない。新たなツール、テクノロジ、開発方法論の氾濫により、もはやWebページはかつての単純なHTMLコードの列ではなく、各種のスタイルシート、マークアップ言語、スクリプトが複雑に入り混じったものになっている。だが、こうした複雑なブレンドものをデバッグするのは容易ではない。そこで登場するのが、WebブラウザFirefox用のオープンソースのアドオンFirebugだ。このアドオンを使えば、CSSおよびJavaScriptの単純なテンプレートから複雑なAjaxアプリケーションに至るまでのすべての編集とデバッグを行うことができる。 各種Webプロジェクトの作成とデバッグに携わるWeb開発者を支援するアプリケーションは、いくつか存在する。SANIsoftの最高技術責任者で『Professional PHP4 Programming

    FirebugによるWebコードのデバッグ | OSDN Magazine
  • [ThinkIT] 第4回:Windows Liveで見せるMicrosoftの懐の深さ (1/4)

    奇異に思われるかもしれないが、実は「Ajaxの生みの親」は誰かという問い掛けに応えるのは難しい。 なぜかといえば、「Ajaxに使われる主要な技術を整備した者」と「現在Ajaxと呼ばれるサービスを作り出した者」、そして「Ajaxという名前を付けた者」はすべて異なっているからである。 具体的にいえば、最初の者はMicrosoft、2番目の者はGoogle、そして3番目の者はJesse James Garrett氏とみることができる。GoogleをAjaxの生みの親である、という立場を取っているケースが一般的だと思われるが、Googleだけですべてを作り上げたわけではないのも事実である。 一方Microsoftは、Googleを追い上げる形でAjaxに参入した後発の企業、というイメージで受け止められているが、見ての通りGoogleに先んじてAjaxに使われる技術を整備した元祖的な立場である。ここ

    tsupo
    tsupo 2007/03/13
    元祖でありながら後発となる、という奇妙にねじれた立場に立つMicrosoft / 誰でも使えるようにお膳立てされた技術が提供されていたにも関わらず、なぜAjaxは1998年に流行しなかったのか
  • Opera 最新ビルドの Developer Console を試す - WebOS Goodies

    インストール方法は従来の開発者向けツールと同じです。 Opera 9.0 で開発者向けツールのページを表示し、「Developer Console」のリンクを適当なツールバーにドラッグしてください。ただ、この方法だとアイコンが表示されないので、 Hideto さんが作成されたボタンを利用されるほうがお勧めです。ご好意により Tips に転載させていただきましたので、ご利用ください。便利なボタンを作成してくださった Hideto さんに感謝です。 Developer Console は現在の正式版(Opera 9.1)には実装されていませんので、最新の Weekly Build をインストールする必要があります。 OPERA DESKTOP TERM のページのタイトルの下に最新版インストーラへのリンクがありますので、そこからダウンロードしてインストールしてください。ただし、場合によっては不

    tsupo
    tsupo 2007/02/05
    Developer Console / DOM Console / CSS Editor / XMLHttpRequest のログ機能
  • Articles: Create Your Own Custom Ajax-Enabled Accordion Compone

    Adding massive amounts of data to one web page is not a recommended design approach because it can be completely disorienting to the user, and might cause him to go to another site. There are always exceptions, though, which is the case when using an accordion component to display data. Using an accordion component enables a single web page to display much more content without disorienting the use

    tsupo
    tsupo 2007/01/31
    JavaScript による折り畳み(アコーディオン)の実装例、その他
  • Kazuho@Cybozu Labs: クロスサイトのセキュリティモデル

    « Japanize - IE 系の User JavaScript エンジンに対応しました | メイン | 安全な JSON, 危険な JSON (Cross-site Including?) » 2007年01月04日 クロスサイトのセキュリティモデル あけましておめでとうございます。 昨年、社内で「XMLHttpRequest は何故クロスサイトで使えないのか。画像や SCRIPT タグは使えるのに」という疑問 (というより試問) を耳にしました。おもしろい話なのでブログネタにしようと思っていたのですが、新年早々 GMAIL の事例がスラッシュドットされていたので、自分の現時点での理解をまとめてみることにしました。文書を確認して書いているわけではないので、間違いがあれば指摘してください。また、よい参考文献をご存知の方がいらっしゃいましたら、教えていただければ幸いです。 ウェブブラウザ

    tsupo
    tsupo 2007/01/04
    JSON については、JavaScript として文法違反であるがゆえに、秘密情報を含むデータフォーマットとして使用することができる ← これはうそだと思う
  • JsonML (JSON Markup Language)

    JsonML.org JSON Markup Language (JsonML) JsonML (JSON Markup Language) is an application of the JSON (JavaScript Object Notation) format. The purpose of JsonML is to provide a compact format for transporting XML-based markup as JSON which allows it to be losslessly converted back to its original form. Native XML/XHTML doesn't sit well embedded in JavaScript. When XHTML is stored in script it must

    tsupo
    tsupo 2006/12/29
    JsonML (JSON Markup Language) is an application of the JSON (JavaScript Object Notation) data-interchange format. The purpose of JsonML is to provide a compact format for transporting XML-based data via JSON.
  • Opera が純正の開発者ツールをリリース - WebOS Goodies

    WebOS Goodies へようこそ! WebOS はインターネットの未来形。あらゆる Web サイトが繋がり、共有し、協力して創り上げる、ひとつの巨大な情報システムです。そこでは、あらゆる情報がネットワーク上に蓄積され、我々はいつでも、どこからでも、多彩なデバイスを使ってそれらにアクセスできます。 WebOS Goodies は、さまざまな情報提供やツール開発を通して、そんな世界の実現に少しでも貢献するべく活動していきます。 先日公開された Opera の開発者向け情報サイト Dev.Opera にて、 Opera 純正の開発者ツールが公開されました!今回公開されたのは以下の 3 つです。 DOM Console インタラクティブに DOM ツリーを表示し、スタイルや属性などの状態を調査できます。 DOM Snapshot 現在の DOM ツリーのスナップショットを別ページに表示します

    tsupo
    tsupo 2006/11/27
    DOM Console, DOM Snapshot, CSS Editor の3つ。前二者はDOM絡みのデバッグで使えそう。
  • CSS JSON

    Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents. JSON (JavaScript Object Notation) is a lightweight data-interchange format. CSS may easily be expressed in JSON notation (CSS JSON). CSS JSON is a powerful and flexible approach allowing for inheritance and logical constructs within CSS. CSS JSON Structure { "selector-1":{ "property-

    tsupo
    tsupo 2006/11/09
    A CSS selector may be inherited within another selector using CSS JSON. / ex. "CSSJSON-INHERIT-SELECTOR"
  • IT戦記 - FireBug の新しいバージョンが便利すぎる件について

    FireFox の拡張機能 FireBug を更新したらすごいことになっていたので共有します。 まずこれを見てください http://Sample.ECMAScript.jp/20060331.html ぱっと見の機能 HTML のソースを見ながら、属性値を直接編集できる。 影響のある CSS を即時に表示 レイアウト情報を即時に表示 インスペクト中の要素に浮上したイベントをキャプチャ インスペクト中の要素の JavaScript オブジェクトを表示 Ajax レスポンスのヘッダも確認できるようになった。 FireBug のインストール https://addons.mozilla.org/extensions/moreinfo.php?application=firefox&id=1843

    IT戦記 - FireBug の新しいバージョンが便利すぎる件について
  • Balloon Tooltip

    Licensing This script is distributed under the LGPL open source license. Commercial licenses are also available. Some of these licenses also includes personal e-mail support for up to 1 year. Download script You can download the script from this Zip file Implementation On the words that should have tooltip, insert a tag like this: <a href="#" onmousemove="showToolTip(event,'This is a simple, simpl

    tsupo
    tsupo 2006/03/22
    バルーン型ツールチップ。面白いんだけど、RSS で全文配信するテキストには埋め込めないよなぁ。ってことで、blog で使う場合は、サイドバーとかで使うのに留めるのが無難かも。