コンピュータクワガタ

かっぱのかっぱによるコンピュータ関連のサイトです

HTML

WebComponentsでデバイスピクセル比を表示するカスタム要素を作った

Chrome 36でWeb ComponentsのHTML Importsが使えるようになり、Web Componentsのすべての要素が普通に使えるようになりました。そこで、Web Componentsのすべての要素(HTML Imports、Template、Shadow DOM、Cuntom Elements)を使ってデバイスピクセル比を…

WebComponentsの使用可否判定画面

Chrome 36でHTML Importsが標準で使えるようになって、ChromeではWebComponentsがひと通り使えるようになりました。しかし、他のブラウザでもある程度使えるようになってこないとなかなか実践で使うわけには行きません。毎回確認するのが面倒なので、WebComp…

Chrome 33からCustom Elementsが動くようになったらしいので動かした

Web Componentsの一部であるCustom ElementsがChrome 33から動くようになったらしいので、少しだけ、本当に少しだけ動かしてみました。前にWeb Components関連の調査をしていた時の自分のメモはあるのですが、肝心の参考にしたサイトがなくなっていたため、y…

Chrome 32くらいから標準のNotificationが使えるようになった

先日、Notification APIを取り上げました。Webブラウザからの「通知」(Notification) - コンピュータクワガタその時のChromeのバージョンは30で、Notificaton.permissionでパーミッションを取得することができませんでした。Chrome 31では確認していないの…

HTML5のテンプレート

HTML5のテンプレートはよく使う割に、いつも検索して貼り付けているので作りました。特に、IEのドキュメントモードをEdgeにしておかないと色々面倒なので、そのあたりも埋め込んでいます。 HTML5 template

Twitter Bootstrapでファイル選択ボタンがカッコ悪い

Twitter Bootstrapを使ってみていますが、input type="file"はそのまま使うと以下の様に残念な感じになってしまいます。Bootstrap自体始めたばかりなので、私が知らないだけかもしれませんがこれはいけてません。何か方法があるのではないかと調べたところ、…

Webブラウザからの「通知」(Notification)

はじめに Chrome拡張の通知機能を調べていたのですが、その過程でWebの標準として「通知」があることを知りました。http://www.w3.org/TR/2013/WD-notifications-20130912/そこで、Web標準の「通知」機能をひと通り動かしてみました。 * 動かせるサンプルは…

CSSだけでradioボタンをtoggleボタンのグループのようにする

Web画面のデザインをしていると、jQuery UIにあるようなhttp://jqueryui.com/button/#radioこんなradioボタンを作りたくなる時があります。jQuery UIを使ってもいいのですが、個人的には少し動作がもっさりしてしまうように感じるためCSSだけでできないか調…

CSS3のtext-overflowは便利かも

全然それを調べるつもりはなかったのですが、偶然CSS3にtext-overflowというプロパティがあることを知りました。今回はtext-overflowを簡単に紹介します。昔はCSS3のTEXTモジュールの一部だったみたいですが、今はCSS3のUIモジュールの一部となっているよう…

LABUtilにしました

LABjsを使った動的で同期的なscriptの読み込み - コンピュータクワガタ昨日の今日ですが、LAB_sampleという名前とサンプルそのものを変更しないといけない使い勝手があまりにも手抜きだったのです、LABUtilとして、ライブラリー部分とそうでない部分を分離し…

LABjsを使った動的で同期的なscriptの読み込み

HTMLプロトタイプを作成する際にJavaScriptでちょっとしたユーティリティを使うことがあります。普通はjQuery等のライブラリーを用いるのですが、読み込むライブラリーのバージョンを統一したいことが多いです。 また、同じようなscriptの読み込みを何箇所も…

CSSの複数クラスによる絞り込み

今日、Googleのサイトの構造を見ていて、以下の様なCSSのセレクタが設定されている事に気づきました。 .hoge.foo { // CSS } .hogeと.fooの間にはスペースは空いておらず連結して使われていました。まさかと思って、CSSの仕様を確認したところ仕様として定義…

CSSの疑似クラスの対応状況

http://builder.japan.zdnet.com/news/story/0,3800079086,20370946,00.htm きれいにまとめられてていい。 I.E.8でもアンカー以外の:hoverは対応されないのか。。。 これが使えるだけでも、見栄えもいいし、アプリケーションの使い勝手もだいぶ違うんだけど。

HTML5のドラフトが出たようです。

http://d.hatena.ne.jp/shot6/20080123#1201049972 figure要素とかがなかなかよろし。 結局、ブラウザの対応待ちなんだけど、勧告されてちゃんと対応するのは・・・いつになるやら。

colgroup、colが。

colgroupもcolもだいぶ以前からの仕様だと思うのに、まともに動くブラウザがない。 IEとOperaが惜しいくらいで、もじら系は完敗だし。 これが動くと、すごく楽なのに。いろいろと。 まてよ、標準モードでないからか?試してみよう。 ということで試しました…

はてなのスタイルを少し読んで見ました。

ナマクワ研も左サイドバー形式にしようと考えているので、とりあえず、はてなのCSSを読んでみました。 肝となるのは以下の点です。 .sidebar { position: absolute; top: 19px; left: 0px; width: 24% ; padding: 0; margin: 0 ; font-size: 90%; text-align…

Webデザイナとは。

ほその日記より(おおもとは、lovebuzz weblog)、Webデザイナに必要なスキルは、 HTMLがエディタで書ける CSSをエディタで書ける Javascriptをある程度理解できる(書ける) サーバーサイドのコードをある程度理解できる(書ける) FTPが使える サーバーの…

Webサイトのドキュメントのスタイルについて

ナマクワ研の技術資料のページに、SJC-WC、SJC-BCの試験のまとめたドキュメントも載せようと思っています。 章番号とかも書いているので、変更した際に番号の付け直しが非常にめんどくさいです。 XMLで元の文章を書いて、XSLTでどどっと変換というのが一番い…