Iframeがキャッシュを保持して更新されないときの対処法（特にChrome） - サイト制作の豆知識
Iframeがキャッシュを保持して更新されないときの対処法（特にChrome） ●top.html <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> </head> <body> <iframe id="testtest" src="Iframeで読み込むhtmlのURL" width="400" height="300" frameborder="0" scrolling="NO"></iframe> </body> </html> ●iframe.html <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> </head> <body> 下記のスクリプト
CSSのセレクタ部分(IDやCLASS)にハイフンとか使われるの好きじゃないなー。ボクはあまり好きじゃないなー - latest log
「CSS の ID 名や CLASS 名の単語の連結にハイフンを使うべき、キャメルケースとかアンダーバーとかダメ」的な主張を去年ぐらいにどこかで読んだ記憶があるのですが(うろおぼえ)、 /* たしか… これがオススメのスタイルで */ .hoge-huga-piyo {...} /* これとか… */ .hoge_huga_piyo {...} /* これはイケてない(らしい) */ .hogeHugaPiyo {...} 個人的には「ちょっとそれ CSS に寄り過ぎてて、視野せまくないかー」という考えをもっていたので、つらつらと書いてみます。 E:first-child や E[key|="value"] などのハイフンを前提とした構文に関してはもちろんありですよ。ここで取り上げてるのは、属性セレクタや擬似クラスセレクタについてではなく、IDセレクタ と CLASSセレクタ についてです
hr要素のデザインサンプル 12 - NxWorld
hr要素は罫線を表示させるもので、話題を変えるときの目印となる区切り線などとして用いられます。 どのブラウザでも完璧に同じ見栄えをとなると背景画像とかがやはり手っ取り早いし無難なんですが、やろうと思えばCSSだけでも結構いろいろとできるので、備忘録兼ねてhr要素をスタイリングしたものをまとめてみました。 ここで紹介しているものは、ブラウザによっては（特にCSS3を用いているもの）ちゃんと表示されません。 また、多用する人も多いと思う破線や点線もブラウザによっては多少見栄えが違ったりするので、使用する際はあらかじめ注意が必要になります。 はじめに ここで紹介しているものは、すべてHTMLは<hr />のみです。 また、それぞれのhr要素にはデフォルトスタイルとしてあらかじめ下記のようなスタイルを指定してあります。
CSS の white-space: nowrap; + HTML の wbr 要素 + 日本語コンテンツの組み合わせで起きる問題を回避する
CSS の white-space: nowrap; + HTML の wbr 要素 + 日本語コンテンツの組み合わせで起きる問題を回避する 2013年09月03日 16:48HTML / CSS CSS の white-space: nowrap; と HTML の <wbr> 要素の組み合わせによる挙動が Firefox と Google Chrome で違ってて、 特に日本語コンテンツの表示を統一しようとすると何かとややこしいので その回避方法を書いてみます。 その前にちょっと前提のお話を。 white-space: nowrap; のおさらい CSS を書く人には説明の必要もないと思うんだけど、 white-space というのは HTML の要素内で ホワイトスペース（スペース文字や改行コードなど）がどのように扱われるかを指示するための CSS のプロパティですね。 W3C によ
全日本＜label＞要素マークアップ検定
Web入力フォームの縁の下の力持ち、Label要素をマスターするための検定試験です。 仲間内の勉強会で、ちょっと遊びすぎましたｗRead less
昨今の自分用Webアプリケーションひな形 - naoyaのはてなダイアリー
ちょっと jQuery と簡単なサーバサイドの処理を組み合わせた処理を試しに書いてみよう･･･なんて時に、いちいち jQuery を取ってきて HTML を書いて script タグを書いてロードして sinatra 立ち上げて云々･･･というのが毎度面倒なので、ひな形になるアプリケーションを作った。 https://github.com/naoya/boilerplate ひとまず sinatra でサーバーサイドを書き、HTML は slim で、CSS は sass 。JavaScript は CoffeeScriptで書くにあたって jQuery、underscore、Backbone をロードしてある、というような構成にしてあります。 まあ、この類のことは人それぞれ自分なりにカスタマイズしてやっていると思いますが、どういうコンポーネントで構成しているかを、備忘録も兼ねてちょっと紹
速習テンプレートSlim(HTML作成編) - Qiita
テンプレートエンジンSlimを使ってスマートにHTMLを作成する 昨日うちの事務所で開催したagatsuma.survive#02の中でSlimの説明が思ったよりも好評だったので改めてまとめてみます。 このエントリでは Slimを使ってHTMLを作成する ことだけを目的としているため、動的にSlimでゴニョゴニョするような話は出て来ません。HTMLの代替にSlimを使う、といった主旨の内容です。プログラムの話も出て来ませんが、残念ながらコマンドラインを少し使います。 Slim とは? 拡張子は .slim view の構文を本質的な部品まで減らすことを目指したテンプレート言語 Ruby製のテンプレートエンジン 高速, 軽量 インデント重要 用途 Railsプロジェクトのテンプレート Sinatra(Padorino)のテンプレート HTMLの代替(個人的には) SlimでHTMLを作成する
CSS Sprite画像はDataURI画像にすべきか？ - MOL
最近、スプライト画像はDataURIにすべきですか？という質問が多くて、調べてみました。てか、前のもそんな話題があったような。DataURIってなんぞって方は下記を見てほしい。 データURIスキーム | MOL CSSファイルがパースされなければレンダリングが始まらないのでCSSファイルの肥大化は絶対に避けなければならない。画像の1KBとCSSファイルの1KBを同じように考えてはいけない。 ― ぼくのかんがえたさいきょうのしーえしゅえしゅ あ、ホントそうだっけーなーと思いつつ、どこぞの資料見たんだっけなーと探してたらあった。 Optimizing the Critical Rendering Path for Instant Mobile Websites - Velocity SC 2013 このセッションはすごく分かりやすいのでオススメです（該当の箇所は12分位から）。というかIlya
入力したパスワードを表示するJavaScript「Password (un)Masking」
twitter facebook hatena google pocket 確認などもあるとパスワードに何を入力したかわからなる場合があります。 入力したパスワードを表示させることでユーザーにとってわかりやすくなるかと思います。 jQueryを利用した「Password (un)Masking | VileWorks」を紹介します。 sponsors 使用方法 まず以下のようなフォームがあったとします。 <form> パスワード：<input id="password" name="password" type="password" /> </form> これに確認するためのチェックボックスをつけます。 <input id="showcharacters" name="showcharacters" type="checkbox" /> 確認する 次に、このチェックボックスにチェックが入っ
Google、ページネーション問題を解決するrel=“next”タグとrel=“prev”タグをサポート開始
[レベル：中〜上級] ※長い記事になりますが、ものすごく重要な仕組みなので確実に理解してほしい内容です。 ひと続きのコンテンツを複数のページに分割する“Pagination”（ページネーション）によって起こる可能性がある、重複コンテンツ問題に対処するために、rel=“next”要素とrel=“prev”要素のサポートをGoogleが開始しました。 「ページネーション」は、いわゆる「ページ送り」のことです。 一連の長い記事を複数のページに分けたり、多数のカテゴリがある時にいくつかのまとまりに分けたりするときによく使われます。 ページネーションを利用していた場合、rel=”canonical”タグを使って2ページ目より後のページを1ページ目に正規化することをGoogleは推奨していません。 上は僕がセミナーで使ったスライドの一部分です。 詳しいことはブログでも説明しています。 ページネーション
[HTML]素朴な疑問：空白の行は内容か装飾か ― 文章とHTML
久しぶりのエントリになってしまいました＞＜また元気に書いていきます★ webcre8は正直なところHTMLを学びだして大した年月を重ねているわけではありませんが、自分なりに密度の濃い学習に励んできたつもりはあります。 そしてその中ではとりあえず理解が及ばなかったり、ソースが英語で、「自分より詳しい人がこの解釈で間違いないと言っているから」「リファレンスに書いてあるから」そういうものだと受け入れてしまっているセオリー的な知識や情報も多々あります。 でも「これってそう言われてるけど本当にそうなのかな」って考えることも必要ですよね。 HTMLは内容、意味 CSSは表現、装飾 これは大前提ですよね多分。pは段落。h1、h2、h3等が見出し。sectionは段落から始まるコンテンツの塊(セクション)。blockquoteは引用。このように、HTML内に書かれたテキストや画像、コンテンツ等の文書の内容
![[HTML]素朴な疑問：空白の行は内容か装飾か ― 文章とHTML](https://cdn-ak-scissors.b.st-hatena.com/image/square/cc31fb479040621c377f551ca7401441b93e134f/height=288;version=1;width=512/http%3A%2F%2Fwebcre8.jp%2Fwordpress%2Fwp-content%2Fuploads%2F2012%2F02%2Fspace-html-and-css-150x150.png)
clearfixについて、今の時代にあった主流な記述ってありますか？Compass (SCSS)の場合、こんな感じですが。。。overflow: hidden;*zoom: 1;
上のブログの中の人です。 上の記事の内容は、1年ほど前のものなので、補足します。 IE6,7を対象にしたclearfixは、今まで通り *zoom:1; がベストだと思います。 IE8以上のfloat解除は、複数やり方存在します。 1.overflow overflow:hidden; または overflow:auto; どちらでも解除可能です。 2.擬似要素を使用する場合 記事の通り .clearfix:after { content: ’’; display:block; clear:both; } が良いかと思います。 *:after {} も記載していますが、パフォーマンスの問題や:afterを使用した場合にdisplay:blockなどを継承してしまうので、避けたほうがいいかもしれません。 もし、*:afterのように、個別単位でやる場合は、SCSSで@includeよりも、@
テーブルを見やすく、使いやすくするためのアルティメットガイド
ウェブページでデータをみせるテーブルを見やすく、使いやすくするためのスタイルや機能性などUIパターンを紹介したアルティメットガイドをJanko At Warp Speedから紹介します。 Ultimate guide to table UI patterns 下記は各ポイントを意訳したものです。 テーブルの「（エクセルでいうところの）行と列」の表記は、「横列と縦列」に統一しています。 はじめに 1. 列を交互にスタイリング 2. 列をフルに 3. テーブルのセクション 4. ソート 5. フィルタリング 6. ページネーション 7. スクロール 8. 固定されたヘッダ 9. ヘッダのないテーブル 10. 拡張可能な列 11. 列のアクション 12. マルチプルな列のアクション はじめに テーブルは構造化されたデータをみせるものです。そして、その目的はデータを読みやすくし、走査しやすく、簡単
キャッシュされた画像を使わずサーバーの画像を使う方法
Web屋です。OkWebの様なサイトを設計, 開発する仕事をしています。 僕らも非常に手を焼かされる問題です。 結論から言うと、残念ながらキャッシュをコントロールする方法はありません。 meta宣言を利用する方法が紹介されているページもありますが、 ブラウザの種類やバージョンに大きく影響を受けるため、 利用者の環境次第になってしまうのです。 特に、InternetExproerのキャッシュをコントロールする事は非常に難しく、 現実的ではない。と言うのが僕らの常識です。 では、全く方法が無いのか。と言うと、そんな事はありません。 一番簡単な方法は、利用する画像ファイルのファイル名を変えてしまえば良いのです。 静的HTMLでページを組んでいるのであれば、画像の内容が変わるたびに、 画像ファイルのファイル名を変更してください。 すると、次に訪れた時には、必ずWebサーバーから画像を取りに行きます
ol要素のstart属性を使わずにCSSで番号を途中から振る方法
ol要素のstart属性を使わずに、CSSで番号を途中から振る方法を紹介します。 番号付きリストで「第10位以降のランキング」など、途中から番号を振るケースは少なくないと思いますので、ご活用頂ければ幸いです。 １．基本 ol要素を使えば番号付きリストを作成できます。 HTML <ol> <li>あああ</li> <li>いいい</li> <li>ううう</li> </ol> 実行結果 あああ いいい ううう ol要素にstart属性を使えば、番号を途中から割り振ることもできます。 例えば、次のようにstart属性に「5」を設定すれば、番号付きリストを「5」から開始することができます。 HTML <ol start="5"> <li>あああ</li> <li>いいい</li> <li>ううう</li> </ol> 実行結果 あああ いいい ううう ただし、このstart属性はHTMLあるいは
親要素がdisplay:noneかどうかを、子要素で確認する方法 - 超自己満足プログラミング
<div style="display:none;font-size:14px"> <p><span id="child">子要素(正確には子孫要素)</span></p> </div> こんな感じのhtmlがあったときに、display:none が指定されてるdivを見ずに、 id="child"の要素から、自身が表示されているのかどうかを判別したい。 普通にstyleを見ても当然ながらわかりません。 >>> alert(document.getElementById('child').style.display) "" // 空文字 >>> alert(document.getElementById('child').style.fontSize) "" getComputedStyleを使ってみる >>> var child_style = getComputedStyle(doc
フォームのボタンをSUBMITから画像にしたいのですが…
フォームを使って値を渡すのに <INPUT TYPE=SUBMIT NAME=WORD VALUE='*****'> とボタンを作成し、VALUEの値 （中身を確認、とか送信実行とか） で動作を分岐し、実行していました。 このボタンを画像にしたいのですが、 値を渡すのはGETじゃないと無理でしょうか？ （今まではPOSTで送信） ボタンを画像にするとなると <A HREF='**.cgi'><IMG SRC='**'></A> となるので、 <A HREF='**.cgi?key=****'><IMG SRC='**'></A> のように、する必要があるのかなぁ？と思いまして… せっかくPOSTで受け取るようにCGIを作成したので、 できればPOSTのままで使用できればと思うのですが。 （無理ならGETに変更するしかないですけど） VALUEの値はボタンでは送信できないので、 <INPUT
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
fujitaiju.com
http://dresscording.com/blog/svg/retina_svg.html
display:none;でもformデータは送信されるんだよな… : ひろ式めもちょう