タグ

webとCSSに関するducky19999のブックマーク (5)

  • インラインCSSで書かれたHTMLを一撃でCSSファイルと分割する「Cascader」

    とある理由から、インラインでCSSが書かれているHTMLを、綺麗にCSSファイルと分割させたいというときもありますよね。 しかし、これを手作業で進めるのはとても手間がかかり、0から作り直したほうが速いことがほとんど。 今回は、そんなときに一撃でCSSファイルと分割できるサービスをご紹介します。 組織のマインドマップツールをマインドマイスターにすべき理由 伸びてる産業、会社、事業を紹介しまくるStrainerのニュースレターに登録!! インラインCSSHTMLCSSファイルと分割する「Cascader」 「Cascader」は、インラインでCSSが書かれているHTMLファイルを、一発でCSSファイルと分割してくれるオンラインサービス。 ひとつひとつ分解しなくても、HTMLをコピペするだけで分割できてしまうのが非常に便利です。 HTMLタグを貼り付けるだけで分割 ↑たとえば、画像のようにイ

    インラインCSSで書かれたHTMLを一撃でCSSファイルと分割する「Cascader」
  • 必見!携帯サイトをお手軽にiPhoneやスマートフォンに対応させる方法 - 適当な日々

    フリーランスでwebの仕事をしながらwebサービスとかを作ったり作らなかったり、成長と挫折の記録・・・かもしれないiPhoneの登場でスマートフォンで閲覧しやすいサイトの需要が高まってきたようです。 でもわざわざiPhoneやスマートフォン向けにサイトを作るのは大変・・・。 そんな方に、今までに制作したモバイルサイトをスマートフォン対応させる方法があります。 しかも5分でお手軽にできます! htmlCSSで解決する方法なのですが、実はこの方法を使うだけで開発もしやすくなる優れものです。 論より証拠ということで、まずはこちらをご覧ください。 (PCからでもオッケーです。htmlはこちらの記事で作成したものを使ってます。) まず、こちらが普通に作成したモバイルサイト→before そしてこれがその方法を使ったもの→after やっていることは閲覧しているブラウザに応じて、3つの

  • glayer.js - グレーアウト表示ライブラリ

    Lightbox.jsや、Livedoor Readerのフィード追加画面のような、背景全体をグレーアウト表示させるためのライブラリです。(gray+layerで、glayer.js) Lightbox JS livedoor Reader - RSSリーダー 下記のような機能を持っています。 背景全体を覆うレイヤの表示/非表示が簡単に出来ます。(レイヤを透過表示することにより、グレーアウトを実現) レイヤ自体は、透過PNGを使う方法と、opacityを使う方法の二種類をglayer.cssにスタイルとして定義しています。 フェードイン、フェードアウトしながらのレイヤ表示/非表示も行えます。(この場合は、opacityによるレイヤを透過表示) なお、Ver 2.0 にて、prototype.js、script.aculo.usを使用せずに、glayer.jsのみでフェードイン、フェードアウ

  • スタイルシート[CSS]/テーブル - TAG index

    表全体の指定 width: ***; height: ***; 表の大きさを指定する border: ***; 表の境界線を指定する border-collapse: ***; 境界線の表示方法を指定する border-spacing: ***; 境界線の間隔を指定する table-layout: ***; 表のレイアウト方法を指定する empty-cells: ***; 空セルの境界線の表示・非表示を指定する caption-side: ***; 表タイトルの位置を指定する text-align: ***; 表タイトルの位置(水平方向)を指定する visibility: collapse; 表の行または列を詰める セルの指定 text-align: ***; vertical-align: ***; セル内の文字の位置を指定する width: ***; height: ***; セルの大

    スタイルシート[CSS]/テーブル - TAG index
  • 画像は一切使ってない!?CSS3だけで描いた“ドラえもん”がすごい - はてなニュース

    こちらの“ドラえもん”のイラスト、どうやって描かれていると思いますか?PhotoshopやIllustratorなどの画像編集ソフトで描かれているようにも見えますが、実はこのイラスト、なんと画像を一切使わずに「XHTML」と「CSS3」のソースコードのみで描かれているとのことです。 ▽CSS3 ドラえもん インターネット上でイラストを公開するには、JPGやGIFといった画像ファイルでアップロードするのが一般的。しかしこちらのドラえもんはそういった画像ファイルではなく、Webサイトを構築する際に使われるXHTMLCSS3のソースコードのみで作られています。そのため“右クリックで保存”ができなかったり、ブラウザの種類やバージョンによって見え方が異なるのが特徴です。 こちらはFirefox3.6の場合です。FirefoxやGoogle ChromeCSS3に対応しているので、グラデーションま

    画像は一切使ってない!?CSS3だけで描いた“ドラえもん”がすごい - はてなニュース
  • 1