Nokogiriを使用したクローラーめも - Qiita
doc.at('//title') => 検索にヒットした最初のノード doc.at_xpath('//title') => xpathの検索にヒットした最初のノード doc.at_css('title') => cssの検索にヒットした最初のノード doc.css('title') => cssで検索。Nodeset doc.css('title')[0] => cssで検索。NodeSetから最初のノード doc.xpath('//title') => xpathで検索。最初のNode doc.xpath('//title')[0] => xpahtで検索。NodeSetから最初のNode doc.search('title') xpathかcssで検索。NodeSet doc.search('title')[0] => xpathかcssで検索。NodeSetから最初のNode ##
[CSS]文章の先頭に画像を表示する擬似クラス"before""after"要素の使い方！ | エバーセンス開発ブログ
という感じです。簡単！ SAMPLEのCSSでは、画像の位置をテキストを合わせる為に、positionを指定して揃えています。 contentプロパティで追加した画像は、”置換インライン要素”なので、positionで調整しないとテキストのベースラインと下端が揃った状態で表示されます。 ↑少し分かりづらいですが、画像の下端とテキストの下端が揃ってますね。 今回のSAMPLEコードの様に、positionを使用すると位置を調整できますが、relativeで調整した場合、本来表示されるていた場所に画像があると他の要素が判断しますので、お気をつけて。 （※：置換インライン要素とは） “before””after”対応ブラウザ ・Chrome ・Safari4〜 ・Firefox3.5〜 ・Opera6〜 ・IE8〜 しかし、何かと便利な”before””after”ですが、IE
![[CSS]文章の先頭に画像を表示する擬似クラス"before""after"要素の使い方！ | エバーセンス開発ブログ](https://cdn-ak-scissors.b.st-hatena.com/image/square/b3630f57f76ae5df0d332ed8dc07828fd4b65106/height=288;version=1;width=512/http%3A%2F%2Ftech.eversense.co.jp%2Fwp%2Fwp-content%2Fuploads%2F2014%2F11%2Ftop.png)
ブラウザ上でcssやjavascriptのキャッシュを使わせない方法 | WisdomTrees
cssやjavascriptのファイルを変更したけど、ブラウザ上でキャッシュが残っていて 反映してくれない。仕方なくF5を押す。 と言う事で内にタグを使ってキャッシュを抑制している人も多いかも知れません。 具体的には↓の様に。 <meta http-equiv="Pragma" content="no-cache"> <meta http-equiv="Cache-Control" content="no-cache"> でもこの方法だけだと、上手くキャッシュが破棄されない事も多々ありまして、 普段自分が使っているブラウザ「Firefox」でも、この方法ではキャッシュ残っちゃいます。 おそらく、HTTPの仕様に則ったものではないんでしょうね。 と言う事で、この問題をどのように回避するかと言うと、こうします。 //javascript <script type="text/javascrip
使われていないCSSを探す方法
Webページの制作に携わったことがあるならCSSも扱ったことがあるだろう。当初は小さかったCSSファイルも、デザインの変更や調整を続けるうちに、どんどん大きくなっていき、簡単には全体を見渡すことができなくなる。既存のデザインが崩れたりパラメータ間の調整を取るため、既存のCSSには手を加えずに新しいスタイルを追加していくことになるため、ファイルはどんどん大きくなっていく。 こうした状況はCSSファイルのメンテナンスという観点からはあまり好ましいものとはいえない。編集を繰り返していくうちに、すでに使われなくなっているスタイルもあるだろう。そうしたスタイルはできれば削除した方が、ファイルの中身の見通しがよくなる。そんな場合に活用できるツールがThe David Walsh Blogの記事「uncss: Find Unused CSS」において紹介された。 紹介されているツールは「uncss」とい
背景固定で美しいブラーがかかった半透明のパネルだけがスクロールするスタイルシート | コリス
レスポンシブ対応で背景画像は固定表示、美しいブラーがかかった半透明のパネルだけがスクロールするコンテンツを実装するスタイルシートを紹介します。 最低限の要素にしたデモ 実装は、こんな感じになります。 HTML パネルはarticle要素で実装します。中身はテキストでも画像でもフォームでも何でもOK。 <body> <article> <h1>半透明の美しいパネル</h1> <p>洋酒といえば、誰でも最初に思い浮かべるのがウイスキー。いわば洋酒のシンボル的な存在なのだが、英語表記が［一般に〔米〕では Whiskey,〔英〕では Whisky.］であることはあまり知られていない。米英両国では、このスペルの差で自国産と輸入品を区別しているという。わが和製ウイスキーの“Whisky”という英国式表示は、手本にしたスコッチのフォルムに倣ったものであり、それ以上の意味はないようだ。カナ表記にしても、ご
フリーの高機能HTMLエディタ「Aptana Studio3」の日本語化と「Zen-Coding」のインストール方法。
Home > 便利なツール > フリーの高機能HTMLエディタ「Aptana Studio3」の日本語化と「Zen-Coding」のインストール方法。 たいへん遅ればせながら、とある本で「Aptana」の存在を知って、気になって使ってみたら、すごーい！便利！デザインもかっこいい！アプタナって名前も可愛い！これが無料とか信じられない！と、真夜中に一人テンションが上がってしまい、翌日見事に寝坊した私です。 まだ入れたてほやほやで、使いこなしているわけではないのですが、もしまだご存じない方がいたらおすすめしたいなーと思って、書いてみました。 はじめに 同じようにAptanaの記事を書いてくださっているブログもいくつか拝見したのですが、古い記事が多く、現在のバージョンや方法とは少し異なる点があったので、あらためて書いてみようと思いました。つまり、この記事も執筆時点（2012年2月）のものですので、
画像(イメージ)に文字を重ねるCSSサンプル | WEB道
HTML <a href="http://tabimame.com/tb/38/?page=10" target="_blank" title="嵯峨野竹林"> <img src="/sample/img/sample3.jpg" alt="嵯峨野竹林" width="200" height="113" /> </a> <p"> <a href="http://tabimame.com/tb/38/?page=10" target="_blank" title="嵯峨野竹林">京都嵯峨野にある竹林</a> </p> CSS .img_box { position:relative; display:block; margin:0; padding:0; } .img_box img { z-index:0; margin:0; padding:0; } .img_box a { color
ズルいデザインテクニックを生かして作る、汎用性のあるズルいボタンデザイン
さて今回は、ズルいデザインテクニックの集大成ともいえる「ズルいボタン」です。これまでの連載で取り上げた数々のズルいデザインテクニック、「ズルいテキストシャドウ」「ズルいグラデーション」「ズルい角丸」、そして前回解説した「ズルいボックスシャドウ」を用いたズルいボタンの作り方を解説します。 今回のズルいボタンに関しては、以前にズルいデザインテクニックのスライドで紹介したものから大幅に改定を加えて、より汎用性があり、さまざまな場面で使い勝手の良いものに刷新しました。 改良のポイントは次の通りです。 文字サイズの変更、またそれに併せてボタンサイズの変更に対応しています iタグを使ったアイコン用のWebフォントに対応しました。今回はfont-awesomeを使って解説しています フラットデザインの流行に伴うデザイン傾向に合わせ、立体感やグラデーションをより控えめに、かつpaddingを大きめに取った
CSS3で画像をおしゃれに演出
透明度を指定するopacityプロパティとrgba()の違い 今回は、これまでの連載の中で出てきたCSS3の表現を使って、画像をちょっと素敵に装飾してみましょう。opacityプロパティで画像を半透明にしたり、box-shadowプロパティで画像枠に影を付けたり、Webフォントで写真にタイトルを付けたりと、画像装飾の例を紹介します。また、CSS3のtransformプロパティを使って、JavaScriptを使わずに画像を回転／拡大する方法も紹介します。 まずはボックスやカラーの透明度を変えて遊んでみましょう。CSS3では、opacityプロパティやrgba()で透明度を指定できます。opacityプロパティは、要素の透明度を指定する際に使用します。透明度は、0（完全に透明）～1（完全に不透明）の数値で指定します。 rgba()は、RGBカラーモデルのred、green、blueに、透明度の
『CSS3で角丸を実現するborder-radiusのコピペ用まとめ』
毎度書くのが煩わしいので、 よく使う組み合わせの角丸CSS3をまとめて単語登録しておこうかと思ってまとめました。 といいつつ単語登録めんどくさくて このページ見てコピペで済ませそうな私がみえる…！ ということで角丸いろいろ。 自分のサイトは 角丸はほぼCSS3使ってやってます。 最近はお仕事のサイトでも角丸はCSS3でやるようになってきました。 他のことに時間とお金を使った方がイイ！ 早くどのブラウザでも実現できるようになるといいのになぁ…！ みなさんは角丸、どうしていますか？？？ /*全体角丸*/ border-radius: 6px; /* CSS3草案 */ -webkit-border-radius: 6px; /* Safari,Google Chrome用 */ -moz-border-radius: 6px; /* Firefox用 */ /* 左上のみ角丸 */ borde
:link、:visited、:hover、:active の記述順序とその覚え方 - jmblog.jp
スタイルシートでa要素のリンクのデザインをする際に、次のように 4 つの擬似クラスを用いることが多いと思います。 a:link { color: blue; } a:visited { color: purple; } a:hover { color: red; } a:active { color: yellow; } 実はこの 4 つの擬似クラスの記述順序には注意が必要で、 link visited hover active の順番で記述しないと意図した結果にならなかったりします。この順序についてちょっと調べてみたので、まとめてみたいと思います。 なぜこの順番じゃなければダメなのか？ 実践 Web Standards Design には、次のように書かれています。 :hover 擬似クラスと:active 擬似クラスは一連の動作であるので、スタイルシート内でもこの順番で記述しないと有効
CSS3アニメーションの基本
CSS3アニメーションの基本：脱エンジニアっぽさ！ クライアントの笑顔を引き出すCSS3アニメーション（1）（1/3 ページ） エンジニアの立場でデザインまで積み上げていくのは、なにかと難しいもの。脱エンジニアっぽさを演出し、クライアントの笑顔を引き出す、CSS3アニメーションを紹介する。 クライアントさんからのさまざまな難しい要求を解決し、ようやく納品にこぎ着けたのに、クライアントさんから出た言葉は「ちょっとやぼったいね……」というつぶやき。Webエンジニアの方からよく耳にする嘆きの声です。エンジニアの立場でデザインまで積み上げていくのは、やはり難しいですよね。 しかし、いわゆる外観としてのデザインの他に、クライアントさんを「おっ！」と思わせる便利な手法が1つあります。それは「アニメーション」です。 Webサイトでの小気味良いアニメーションは、そのユーザー体験を豊かなものにしてくれます。
CSS3で実現するアローアイコン
CSS3で実現するアローアイコン スマートフォンなどでリンク領域を示すことなどで使われることが多いアローアイコン。これをCSS3を使って表現する方法を紹介します。 ちなみにアローアイコンとはこんなかんじのリストの右にある矢印。(アローアイコンの正式名称とかあるのかしら) まず、HTMLは次のようにします。今回は便宜的にアローアイコンを付けるa要素にclass属性「arrow」を付加しています。 <ul> <li><a href="#" class="arrow">link</a></li> <li><a href="#" class="arrow">link</a></li> <li><a href="#" class="arrow">link</a></li> <li><a href="#">link</a></li> <ul> .arrowには以下のようなCSSを指定します。 li a
オンマウスでふんわり現れる！CSS3を使った吹き出しサンプル5つ
タイトルの通りですが、アイコンの上にマウスを乗せると吹き出しが現れるサンプルを紹介します。今回は現れる動きが違うサンプルを5つ用意しましたので、気に入ったものがあればうれしいです。 Chrome、Firefoxの最新バージョンやIE10だとすべてのサンプルが動きます。CSS3のtransitionやrotateが使えないブラウザでも機能的には問題はないと思います。opacityが使えないIE8以下はちょっと厳しいですが、最後に少し対応法を紹介します。 では、一番上のサンプルを解説します。 HTML まずはHTMLから。 Home Twitter Facebook RSS Setting a要素がアイコンで、span要素が吹き出しです。アイコンはWebフォントで表示します。 続いてCSSです。いつも通りまずは全部載せます。 @font-face { font-family: 'typicon
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Top Plurk - Plurk
All-animation by clovisdasilvaneto
ページ高速化のため .htaccess でキャッシュ設定を絶対やっておこう！
【図解】CSSだけで画像の縦横比を維持したサムネイルを表示する - Qiita
Webpark 
Remove unused CSS - CSS Optimizer
