インラインCSSで書かれたHTMLを一撃でCSSファイルと分割する「Cascader」
とある理由から、インラインでCSSが書かれているHTMLを、綺麗にCSSファイルと分割させたいというときもありますよね。 しかし、これを手作業で進めるのはとても手間がかかり、０から作り直したほうが速いことがほとんど。 今回は、そんなときに一撃でCSSファイルと分割できるサービスをご紹介します。 組織のマインドマップツールをマインドマイスターにすべき理由 伸びてる産業、会社、事業を紹介しまくるStrainerのニュースレターに登録!! インラインCSSのHTMLをCSSファイルと分割する「Cascader」 「Cascader」は、インラインでCSSが書かれているHTMLファイルを、一発でCSSファイルと分割してくれるオンラインサービス。 ひとつひとつ分解しなくても、HTMLをコピペするだけで分割できてしまうのが非常に便利です。 HTMLタグを貼り付けるだけで分割 ↑たとえば、画像のようにイ
IEでのa要素の各属性について - monjudoh’s diary
色々あってa要素でURLをパースするというコードを書いていて色々はまったのでまとめます。 IE6-8でのa.hrefの上限 IE6,7:4096bytes IE8:4121bytes でした。 なお、Firefox,Google Chrome,Safariは1MBとか普通に扱えます。 使わないけど。 http://jsdo.it/monjudoh/8Fm6/read 各属性の取得状況 a.hrefにURLを代入して各属性がどうなるか調べてみました。 URLの長さが短い⇔上限超え outerHTMLハックを使わない⇔使う a.hrefにURLを代入後、別の要素のinnerHTMLにa.outerHTMLを代入し、そのfirstChild(a要素)の各属性を見ること の二軸を変えて調べてみました。 http://jsdo.it/monjudoh/sc82 IE6 a.hrefへの代入で更新され
URLを引数に本文抽出を行うJavaライブラリ「Boilerplate」 | MOONGIFT | オープンソース・ソフトウェア紹介を中心としたITエンジニア/Webデザイナー向けブログ
BoilerplateはURLを与えると本文部分を抽出するライブラリ。 BoilerplateはJava製のオープンソース・ソフトウェア。Webサイトをクローリングしたり、そのサイト内にあるテキストを使って別なWebサービスを構築すると言った手法はよく存在する。そんな時に必要になるのが本文抽出というテクニックだ。 デモ Webサイトには本文以外にも多様なコンテンツが存在する。例えばヘッダー、サイドバー、フッター、広告などだ。そうした無用なコンテンツを除去し、必要な部分だけ取り出すためのライブラリがBoilerplateだ。 BoilerplateはURLを引数に、後は自動的にコンテンツを取得して本文だけを返却してくれるという手軽なライブラリだ。Javaのライブラリなので、既存のJavaシステムに組み込むのはもちろん、Google App Engineを使ってWeb APIとしてコンテンツ抽
はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
HTML文書内にJavaScriptで使う「見えないデータ」を入れる - 檜山正幸のキマイラ飼育記 (はてなBlog)
Kuwataさんとリポジトリ共有のためにBitbucket（http://bitbucket.org）を使っているんですが、そのヘルプのHTMLソースを見たら、表示と関係ない要素がいろいろ入ってました。 JavaScriptを使うことを前提に、JavaScriptプログラムから使うデータをHTML文書内に埋め込んでいるんですね。もちろん、これらのデータは見えてはいけないので、隠すように細工されています。 meta要素を使う head要素内のmeta要素は何も細工しなくても隠れています。ここにプログラム用データを入れられます。「メタ情報である」というセマンティクスに沿ったデータなら、metaに入れるのも理にかなっているでしょう。 <meta name="ajs-build-number" content="2032" /> <meta id="atlassian-token" name="a
HTMLをDBみたいに使えるスゴイライブラリ『htmlSql』を CakePHPで使う - h2ospace - builder by ZDNet Japan
APIやRSSなどを提供しているサイトは、情報を簡単に扱うことができますが、例えば Yahoo!の検索結果とか、mixiのニュースとか、あるサイトの一部を取り出したいことってよくあります。（とはいえ、著作権違反には注意 そんな時、PHPのライブラリである「htmlSql」を利用すると便利。このライブラリに、ファイルでもURLでも文字列でも、HTMLで作られたものなら何でも与えると、解析して取り出しやすくしてくれます。しかも、その取り出し方はSQL！ 例えば、「id属性が’test’の p要素の内容を取り出したい」という場合には、次のようなSQLを使います。 SELECT text FROM p WHERE $id=="test" 超パワフル。ということで、これを CakePHPで利用するためのテクニック。 まずは、ダウンロードしたファイルの中から次のファイルを「app/vendors」フォ
CSS+HTMLのみで実装出来る、クロスブラウザ対応のWebデザインテクニック集
cssやプログラミングcss × クロスブラウザ cssとHTMLタグのマークアップ のみで実装出来るテクニック集 です。クロスブラウザ対応のみ をcss-playから探したので、 ついでにご紹介します。 cssとHTMLタグのマークアップ のみで実装出来るテクニック集 です。クロスブラウザ対応のみ をcss-playから探したので、 ついでにご紹介します。 jsが使えない環境でデザインする機会があったのでメモがてらエントリー。css-playを中心に、あとはググったりSBMで探したり。マークアップはリンク先をご確認下さい。css-playはソースを。 シンプルなドロップダウンメニュー シンプルなドロップダウンメニューです。マルチレベルのメニューも可能。 demo 縦並びのフライアウトメニュー 横に出るフライアウトタイプ。画像を使用しています。 demo クロスブラウザ対応のグラデーション
簡単！たった１３行のコードでHTML取得＆解析をするPerlスクリプト - DQNEO起業日記
１３行のコードで、Yahoo!Japanのトピックス一覧を取得する！ PerlでHTML取得・解析したいときはLWP::UserAgentとHTML::TreeBuilderというのを使うと簡単にできます。 LWP::UserAgentを使うと、Webページの取得ができます。 HTML::TreeBuilderを使うと、HTMLのDOM解析ができます。 この２つのモジュールを使って、Yahoo!Japanのトピックス一覧を取得してみましょう。 コメント行と空行を除くとたったの１３行です。 use strict; use warnings; use LWP::UserAgent; use HTML::TreeBuilder; # urlを指定する my $url = 'http://www.yahoo.co.jp'; # IE8のフリをする my $user_agent = "Mozilla
テキストベースのサイトに写真を入れ込む、単純だけどもの凄い仕掛け | naglly.com
一見、テキストしか無いように見えるこのサイトですが、この中にはなかなか面白い仕掛けが隠されています。下記サイトです。 Sasha http://fichtre.net/yop.html マウスカーソルを使ってテキストを選択すると、一つ一つの文字に設定されているテキスト選択時の色が浮かび上がり、テキストの選択範囲が増えるごとに、少しずつ鮮明な写真の全貌が明らかになっていきます。 一行ずつ文字を選択するのがめんどくさい方は、[Ctrl-A]で一発選択が出来ます。さらにこのサイトを楽しむためには、ブラウザのズーム機能で縮小（Firefoxだったら[Ctrl - -]）すると隠されてる絵がより見やすくなります。 ヌード写真なので、写真の下の方は仕事中での閲覧注意です。 これ、どうやって絵を描いているんだろうと疑問に思い、ソースをちょっと覗いてみたら、本当に一文字ずつ、地道に色指定してました。地味だ
【レビュー】HTMLのidとclassでいい名前をつけるテクニック | エンタープライズ | マイコミジャーナル
SitePoint: New Articles, Fresh Thinking for Web Developers and Designers HTMLを書く際に悩むことは多々あるが、中でも悩ましいことのひとつにidやclassで指定する「名前」がある。idやclass属性はCSSやJavaScriptで対象となる要素を特定するために使われる。わかりやすく一貫性がある名前をつけることは、WebプログラマやWebデザイナにとって欠かすことができないスキルであり、悩ましいところでもある。 How To Compose HTML ID and Class Names like a RockstarにおいてMeitar Moscovitz氏がidやclassの名前をつけるひとつの方法を紹介している。短くまとまっており参考になる。同記事では次のテクニックが紹介されている。まず、名前を考える段階で次
Twitterのエスケープ処理について。 - こせきの技術日記
入力 http://twitter.com/koseki/status/12141558975 <"♥&♥"> 表示 <"♥&♥"> HTML <"♥&♥">&"はエスケープされない！APIが返すテキストも同様。<>だけエスケープされる。 Twitterを信じて、与えられたテキストをそのままHTMLで出力していいものか。 一方、URLとか@、#なんかをリンクにする処理はAPIユーザが自前でやらなければならない。不安。 HTMLが壊れる例 http://twitter.com/koseki/status/12141510877 上と別の話。以下の入力は、 http://www.example.com/(@koseki)以下のように表示される。 koseki)" class="tweet-url web" rel="nofol
無駄なdiv要素やclassだらけのマークアップから卒業する方法
グリッドベースのレイアウトを作成すると、ついついdiv要素を多用してしまいがちですが、意味のあるデータにはそれに適した要素を使用し、無駄なdiv要素やclassだらけのマークアップから卒業する方法をWebdesigner Depotから紹介します。 Fight Div-itis and Class-itis With the 960 Grid System 下記は各ポイントを意訳したものです。 はじめに CSSのフレームワーク：960.gsの場合 classの乱用を避ける リスト要素の使用 画像とキャプションの使用 複数の見出しとパラグラフの使用 子要素のclassは親要素に はじめに 数年前までウェブページの設計はテーブルがスタンダードでした。そしてCSSはそれを大きく変え、今日ではCSSのフレームワークがウェブページの設計を容易にしてくれています。 しかしながら、このCSSのフレームワ
CSSでマルチカラムレイアウト
はじめに 本連載では、「クロスブラウザに対応したデザインテクニック」をテーマに、保守性や互換性に優れたXHTML+CSSの書き方を紹介していきます。 今回は、本連載の総まとめとして、CSSでマルチカラムレイアウト（段組レイアウト）を実現する方法を紹介します。CSSでマルチカラムレイアウトを実現する方法はいろいろありますが、今回は、最も基本的な方法として、前回の記事で解説した「floatプロパティ」および「positionプロパティ」を利用した、「フロート型」と「ポジショニング型」のレイアウトテクニックを紹介します。同時にページレイアウトで起こりがちな問題とその対処方法についても扱います。 対象読者 XHTMLとCSSの基本を理解している方。 Web標準サイトの実践的な作り方に興味のある方。 必要な環境 （X）HTMLやCSSを記述するエディタと、それを確認するブラウザがあれば、特別な環境は
どんな時でもXML宣言は入れておくくらいがちょうどいい - Open MagicVox.net
どんな時でもXML宣言は入れておくくらいがちょうどいい Posted by ぴろり Posted at 2010/03/15 18:32 Trackbacks 関連記事 (0) Post Comment コメントできます Category UTF-8ならばXML宣言は入れなくてもいい: 世界中の１％の人々へ 悪貨は良貨を駆逐するケースですか。ブクマのコメントでは識者が多いので安心ですが、タイトルだけ読んだら間違いを助長しますよ、これは。なぜ specification において強く推奨されている、という部分をすっ飛ばして、例外的に Such に続く部分に乗っかってしまうのですか。 | | | | XHTML 1.0: The Extensible HyperText Markup Language (Second Edition) An XML declaration is not re
UTF-8ならばXML宣言は入れなくてもいい: 世界中の１％の人々へ
2010年3月| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 明確な理由がなければXML宣言はいれないことにした。 このブログをはじめとして、仕事ではずっと、XML宣言を惰性で入れてきたのですが、昨年７月から明確な理由がなければXML宣言をいれなくなりました。 IE6の後方互換対策ができないわけでもないし、XML宣言を知らないから入れないわけでもありません。入れない理由は以下によります。 ルールの正当性：W3C勧告に条件を満たせば省略してよいと明記してある 物理的理由：ブラウザはDOCTYPE スイッチを読みHTMLの種類を判別する 作業の合理性：IE6の後方互換対策をする必要がないから 何人かの国内のHTMLの権威の人たちに確認したら例外なく「不要」と。 以下で、少
Big Sky :: zen-coding for vim を pure vimscript だけで書いてみた。
私も結構長くvimを使ってきましたが、実はsnippet系やsorround系のプラグインは殆ど使っていません。理由は入力の規則が多様すぎて覚えられないのと、それくらい手で入力出来るんじゃないか...と思っていたのが理由でもあります。 sorround.vimなんかは何度か常用をチャレンジしてみましたが、結局諦めました。 先日、zen-codingを見つけ、「へー便利そうだなぁ」と思ったと同時にこのくらいならvimscript(pure vimscript)だけで書けるな...と思ったので書いてみました。 と言ってもEmacsへの移植なんかと同様に「Expand Abbreviation」だけです。 正直言うとzen-codingのプロジェクトページにvimがラインナップされていなかったのがキッカケだったりもしますが...。ただ、後から知ったのですがsnipMateという物でzen-cod
CodeRepos::Share – Trac
Chemr Chemr (is pronounced as きめぇwww ('kimeˈeˑ' with a laugh)) is an application for reading references. Features Reading CHM (Compiled HTML Help) Reading CHM Bundle (original format) Incremental index search Useful keybinds User StyleSheets? Full-text search capability (currently not multilingual) Chemr is designed for good indexed CHMs for example reference manuals. Release/Download Super Alpha
Vim の Sparkup プラグインで HTML タグを Zen Coding 風に簡単入力 : Serendip – Webデザイン・プログラミング
Vim プラグインの Sparkup (rstacruz’s sparkup at master – GitHub) で、CSS セレクタ風の記述から HTML タグ文字列を入力することができる。（zen-coding 風の入力） プラグインのインストールは上記サイトからダウンロードしたファイル内の vim/ftplugin/ 内のファイルを ~/.vim/ftplugin/ にコピーする。 プラグインの実行には python2.5 以上が必要。 <c-e> を押すことで、タグキーワード（div, h1, img, meta 等）から開始タグ・終了タグ・各種属性を自動で入力できる。 <c-n> を押すことでカーソルを次の入力位置に移動できる。 CSS 風のセレクタ表記を使ったショートカット文字列から HTML タグ文字列に展開される。 タグ単体の入力 タグキーワードを入力して <c-e>
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
RtfをHtmlに変換用基本設計メモ
クローラビリティを100点に仕上げてURLを検索エンジンに正しく伝える | Web担当者Forum
