type=”file”のクリア - Mars Diary
question:1193930047 より <script type="text/javascript"> function sample(oId){ var obj = document.getElementById(oId); var stO = obj.innerHTML; obj.innerHTML = stO; } </script> <span id="XYZ"><input type="file" name="file" size="10"></span> <input type="button" value="←" onclick="sample('XYZ')">一見、無意味な書き戻しをしているようだが、 <input type="file"> の場合、valueへのアクセスが禁じられているのでvalue=""と同じ効果が得られる。 DOMで削除した後、生成するというのも
改行コード、pre、textarea - FAX
JavaScriptpre要素内の文字を変更する際、改行コードの扱いが各ブラウザで異なるようなので以下コードで調べました。 var pre = document.getElementsByTagName('pre')[0]; pre.innerHTML='[R]\r[N]\n[NR]\n\r[RN]\r\n[END]'; pre.appendChild(document.createTextNode('[R]\r[N]\n[NR]\n\r[RN]\r\n[END]')); innerHTMLで追加した結果は以下です。IEOperaFirefox\r空白のみ○○\n空白のみ○○\n\r空白のみ改行×2改行×2\r\n空白のみ○○ createTextNodeで追加した結果は以下です。IEOperaFirefox\r○○×\n空白のみ○○\n\r○改行×2○\r\n改行+空白○○ この結果を見
【CSS】覚えておいて損はない CSS の定番テクニック BEST 5 | バシャログ。
ネットで検索をすると CSS のテクニックが山ほど公開されていますが、実際に商用サイトの制作をしていて個人的に利用する頻度が高いテクニックの BEST 5 をご紹介します。 ちょっと凝ったデザインのサイトをコーディングする時に、これらのテクニックに助けられることが多いです。どれも覚えておいて損はないものばかりです！ IE6 でも min-height を使う 例えば、異なる高さのブロックを float しつつ底辺のラインを揃えたい時などに、「IE6 が min-height に対応していたら楽なのに！」と思うことがありますが、以下のテクニックを使えば IE6 でも min-height（相当）の適用が可能になります。 [CREAMU]CSSでmin-heightをクロスブラウザにする最も簡単な方法『Easiest cross-browser CSS min-height』 IE6 に mi
Webページを速く見せるための5つのちょっとした工夫（1/3） - ＠IT
株式会社ライブドア マークアップエンジニア 浜 俊太朗 2009/4/30 ページ表示高速化をサーバの設定だけに任せていませんか？ HTMLやCSS、JavaScriptの書き方でも速くできます（編集部） 連載第1回の「Webサイトを“速く”表示させる7つの計測ポイント」では、YSlowを使って速度に関する問題を調査しました。 今回は、CSS・JavaScript・HTMLの工夫で速度を改善する下記5つの方法を紹介します。中にはYSlowの指摘に含まれないものもありますが、併せてチェックしていきましょう。 CSSはソースコードの上部に記述する JavaScriptはソースコードの下部に記述する CSSとJavaScriptを書く順番 JavaScriptを圧縮して読み込みを速くする 読み込みが遅いブログパーツには要注意 【1】CSSはソースコードの上部に記述する 連載第1回では、「CSSは
Web屋のためのVim設定・Tipsまとめ 2/2 - ナレッジエース
おそらく、誰もがやる深夜のWebサーフィンは、究極のところ時間の無駄ではないのかもしれない。 それは、Webで夢をみているのにほかならないのだ。(T.B=リー「Webの創成」より) 「Web屋のためのVim設定・Tipsまとめ 1/2」からの続き。 Vimを使ったHTMLとCSSの編集について、さらに関係しそうな事項を紹介します。 HTML編集でもよく使うVim基本機能 =キーで自動インデント HTMLのインデントが崩れているときは、範囲選択して=キーを押せば、自動的にタグの入れ子を認識してインデント調整されます。 ばらばら→範囲選択→「=」ですっきり カレント行だけインデント調整したい場合はノーマルモードで==とすれば可能です。 なお、手動でインデントを上げ下げするには、ノーマルモードでは>と<、インサートモードでは<C-t>と<C-d>が使えます。 gfで相対パスのリンク先ファイルを開
送信ボタンの上にリンクがあればtabindex=-1に | ランサーズ社長日記
いいね！ 1 ツイート B! はてブ 86 Pocket 8 入力フォーム間の移動はマウスで行いますか？tabで移動しますか？ 例えばtabでログインフォームを移動していて、IDとパスワードを入力して、送信ボタンを押そうとする時に、送信ボタンの上にリンクがあって、間違ってリンクを押してしまい、とてもストレスを感じたことはありませんか？ 年始に興味がわくような話題ではないかもしれませんが、ちょっとしたTIPSに。。 ライブドアさんを例に出して申し訳ないのですが、ライブドアさんのログイン画面には「ID・パスワードを忘れた方」というリンクがあります。 パスワードを入力した後にtabを押すと、このリンクにカーソルが当たります。フォーム間の移動をtabで行い、最終フォームに来ると「tab + Enter」が癖になっている人に取って、このリンクを間違って押してしまうことが結構あります。リンク後に戻って
[CSS]一枚の画像で、四隅が角丸のパネルを実装するスタイルシート
Usability Postから、一枚の画像で、四隅が角丸のパネルを実装するスタイルシートを紹介します。 Scalable Content Box Using Only One Background Image demo 仕組みは、全体を囲む「div」と見出し「h2」に同じ背景画像を指定し、それぞれポジションを「bottom」と「top」にして配置するものです。 仕組みのイメージ 本文のテキストは、背景画像の長さ分（デモでは1000px）までテキスト量が増えても正常に表示されます。 見出しは、同じく見出しの長さ分（40px）までとなります。 追記： 下にある「Update」に、本文量がどれだけ増えても大丈夫なバージョンがあります。 demo 2
CSSでWebページの背景画像を指定する - builder by ZDNet Japan
DXの成否を分けるのはガバナンス Microsoft Security Forum 2021 Day2 どこよりもわかりやすい基調講演解説！ 現場業務のデジタル化の最適解 JBSのアプリポケットとアプリメーカーが 企業のデジタル化をサポート 次の一手はこれだ！ ZDNet×マイクロソフトが贈る特別企画 今、必要な戦略的セキュリティとガバナンス クラウドネイティブの実現 モダンインフラの構築・運用の課題解決へ コンテナの可能性を広げるVMware Tanzu 大学、研究機関、製造業など いま目覚ましい躍進ぶりを見せるデルのHPC その背景と選ばれる理由にせまる 対談：クラウド時代のネットワーク DX推進の要であるクラウド活用 レガシーなネットワークがボトルネックに 体験から学んだ成功への知見 マネーフォワード×エム・フィールド対談 Fintechプラットフォーム開発の「鍵」 Microsof
CSS擬似クラスを使うべき理由 | エンタープライズ | マイコミジャーナル
A List Apart - For People Who Make Websites HTMLとCSSは規格通りに使うとすれば縦横無尽にさまざまな記述ができる。しかし規格上サポートされているからといって、馬鹿正直にそうした機能を使うのは避けたい。シンプルな記述であとから読んでも理解しやすい、他人が読んでも理解しやすいHTMLやCSSを書けるようになることが理想だ。しかし誰しも最初は素人だ。エキスパートがまとめたドキュメントを参考にして、そうしたテクニックであり勘どころを学んでしまいたい。 フロントエンドデベロッパであるAlex Bischoff氏は5日(米国時間)、A List ApartにおいてKeeping Your Elements' Kids in Line with Offspringという名のもと、CSSやHTMLの記述方法について細かい技巧をまとめて発表した。同ドキュメント
JavaScriptを使わないでブラウザ別に画像を振り分けて表示するHTMLを書く
ちょっと思い出したのでクイズを書いてみます。 以下の条件で、IEでは、imgie.gif、 Firefoxでは、imgfx.gif、その他多くののブラウザでは、imgother.gif ノミを表示するHTMLを作ってください。 JavaScriptなどのスクリプトは使わない CSSを通じてハックしない HTMLの書き方のみで勝負するが、validでなくても良い ※最新のブラウザで実現できなかったらすみません。なんだお、とか叱らないでくださいませ。 このテクで、ブラウザごとにJSファイルや外部スタイルシートとかを分別できないのかなぁと昔、妄想したことがあります。 hasegawayosukeさんへ http://d.hatena.ne.jp/hasegawayosuke/20070927/p1 なんと申しますか、すごいものを拝見させて頂きました。ある意味勉強になります。ありがとうございます。
HTMLのソースをエディタで開く方法
Web制作に携わっている人を中心に、WebページのHTMLソースを閲覧する機会というのは何かと多いものだ。しかし時と場合によっては、デフォルトで指定されているソース表示用のプログラムでは物足りなさを感じてしまうことも多い。 例えばInternet Explorer（IE）の場合、「表示」から「ソース」を見ようとするとデフォルトでは「メモ帳」が起動する。しかしメモ帳だと、EUCコードで書かれたHTMLソースは文字化けしてしまうし、改行を示す「改行コード」すら無視してしまう。当然ながら、HTMLタグの色分け表示もしてくれない。 お気に入りのエディタでソースを見たいときは、「ツール」－「インターネットオプション」－「プログラム」でHTMLエディタを設定して、「ファイル」－「［指定したアプリ］で編集」でソースを確認する方法がオススメ。秀丸やワードパッドを用いて、HTMLソースが表示できるようになる
スタイルシートによる崩れない 2カラム 3カラム・レイアウト
このウェブサイトは販売用です！ desperadoes.biz は、あなたがお探しの情報の全ての最新かつ最適なソースです。一般トピックからここから検索できる内容は、desperadoes.bizが全てとなります。あなたがお探しの内容が見つかることを願っています！
404 Blog Not Found:あなたのページを最速にする14の掟
2007年05月11日18:45 カテゴリiTech あなたのページを最速にする14の掟 人気Webサイトの管理人、必読。 紹介ページ: 14 rules for fast web pages (Skrentablog) PPTのスライド: http://www.web2expo.com/presentations/webex2007/souders_steve.ppt 実は、これらはYahoo!の"Chief Performance Yahoo!"(本当にそういう役職名)であるSteve Soudersによる以下のblog entriesをまとめたもの。 Performance Research, Part 1: What the 80/20 Rule Tells Us about Reducing HTTP Requests Performance Research, Part 2:
ふつうに横三角 - ぼくはまちちゃん！(Hatena)
ＣＳＳで横三角。「半キャラずらし」 (インターネット帳面) 今回はお題の通りインターネット帳面でもやってる「ＣＳＳで横三角をやる方法」。２バイト文字の三角記号は▲や▼しかないので横方向を示すことができませんでした。これをなんとかどーにかできんものかと。 ↑こんな記事があって、ちょっと面白かったので、 参考までに、ふつうの横三角のコードも書いておきますね！ » (») « («) ▷ (▷) ▶ (▶) ◁ (◁) ◀ (◀) そうそう、この中でも » って結構使えるよ！ よくサイドのメニューとかで、CSS を使って <li> の背景左端に、三角っぽい画像を設定したりするよね！ でも » をつかえば、画像がなくてもこんな感じ！ » Diary » Bookmark » Fotolife »
小粋なインターフェースを実現する25のコード （パート3） - SIMPLE*SIMPLE ～ ウェブ職人のための小粋なネタ帳 ～
シリーズもの第三弾が発表されていました。ウェブ製作に使えるちょっとした小技集です。パート1と2もあわせてどうぞ。 小粋なインターフェースを実現する25のコード 小粋なインターフェースを実現する25のコード （パート2） 今回も全部で25個ありますが、気になったものをいくつかピックアップ。 ↑ Flickrのようにクリックするとその場で編集できるようにする方法。 ↑ テキストがフェードイン、フェードアウトしていくような効果を作る方法。 ↑ CSSだけで上のようなボタンを作る方法。 ↑ CSSだけでリストをこのようなツリーのようにする方法。 全部見たい方は以下からどうぞ。一度試しておくと技の幅が広がりそうですね。 » 25 Code Snippets for Web Designers (Part3)
【コラム】クリエイターのためのライフハック 第7回 デスクトップにToDoリストを常時設置 - Wallnote (MYCOMジャーナル)
Webベース管理の便利さと、デスクトップアプリの簡便さを ToDoリストは、ベーシックな仕事アイテム。Microsoft Office Outlookのようなデスクトップアプリケーションだけでなく、企業内で利用するようなグループウェアにもToDoリストは実装されています。最近ではWebベースでToDoリストを管理できるようになりました。Webベースだと場所やパソコンに依存することもないですし、最近はドラッグ&ドロップで操作ができるデスクトップアプリケーションのような使い心地を実現させているものが多いです。 ところが、Webベースで管理できるということは、いちいちサイトにアクセスしなければリストの管理も、閲覧することもできないというデメリットにもなり得ます。今回紹介する「Wallnote」は機能面では、最低限の機能しかありませんが、常にデスクトップ上に置いておけるような工夫がいくつかされてい
CSSでPDFやExcel等のファイルタイプ別アイコンを自動付与:phpspot開発日誌
Showing Hyperlink Cues with CSS (Ask the CSS Guy) I like the little icons next to hyperlinks that signify if that link will take me offsite, open a popup, or link to a file (as opposed to another html page). Here's how to do it in a way that's supported in IE7, Firefox, and Safari. CSSでPDFやExcel等のファイルタイプ別アイコンを自動付与する方法が紹介されていました。 自動付与、というのは、例えば、<a href="***.pdf">pdfファイル</a> のようなリンクがあったとすると、pdfという最後
DIVを垂直方向に中央寄せするCSSサンプル:phpspot開発日誌
Blue Box Demo: Vertical Centering with a Shiv Div DIVを垂直方向に中央寄せするCSSサンプル。 次のように、DIV要素をブラウザの縦方向に配置できます。 CSSは非常にシンプルで、まず、html と body 要素に height:100% プロパティを設定します。 次に、body内にdiv要素を配置し、そのdiv要素に対し、height:50% かつ、margin-top:-50px のようにプロパティをあて、 中央寄せしたい要素(上図中、青い部分)の半分のサイズ分のマージンをマイナスします。 最後に中央寄せしたいdiv要素( height:100px ) を配置することで、青い部分は中央によります。 垂直方向に、100px のdiv要素が配置される感じです。 <html> <head> <style type="text/css">
IFRAMEを使わずにHTMLファイルから他のHTMLファイルを読み込む方法:phpspot開発日誌
Insert HTML page into another HTML page | published @ aplus moments IFRAMEを使わずにHTMLファイルから他のHTMLファイルを読み込む方法。 Objectタグで外部ファイルを読み込む方法があるんですね。 <html> <head> <title>test</title> </head> <body> <!--[if IE]> <object classid="clsid:25336920-03F9-11CF-8FD0-00AA00686F13" data="/exec/some.html" style="width:100;height:100px"> <p>non object</p> </object> <![endif]--> <!--[if !IE]> <--> <object type="text/html
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScriptを利用してフォームの二重送信を防止する：CodeZine