Plastic Prison - Diary - HTMLにおける画像の拡大縮小
使ってる人がいるかは知りませんが、まな板(旧名:ドット絵掲示板(辛口))には投稿されたドット絵をその場で拡大縮小する機能があります。 その場でやっている以上、サーバーサイドのテクニックではなく クライアントサイドのテクニック、すなわちJavaScriptを用いているわけですが、 今日はJavaScriptを用いた画像の拡大縮小の僕の個人的なメモ的なお話です。 JavaScriptで拡大縮小をする方法はそんなに多くはなく、 imgタグのwidthとheightを弄るのが最もメジャーであると思います。 100x100の画像に対して二倍表示したい場合はwidth=200、height=200を設定してやれば良いのです。 まな板もつい最近までこれによって画像の動的拡大縮小を実装していました。 dotllectなんかも同じようにやってるようです。 ですが、この方法には一つ問題があります
word-break－スタイルシートリファレンス
word-breakプロパティは、W3Cで審議中の仕様をInternet Explorerが独自に採用したもので、 表示範囲に合わせて改行するか、単語の切れ目で改行するかなど、文の改行の仕方について指定する際に使用します。 単語の途中で改行するかどうかを指定するword-wrapプロパティとの使い分けについてですが、 word-wrapプロパティは、文の改行というより、 長い英単語を途中で改行させたくない場合に使用するもののようです。また、日本語の単語に対しては無効なようです。 word-breakプロパティは、CSS3で標準採用されるかもしれません。 ■値 normal 英語等は単語の途中では改行せず、単語の切れ目で改行されます。日本語・中国語・韓国語等は表示範囲に合わせて改行されます。このため単語の途中で改行されることもあります。 break-all 言語に関係なく表示範囲に合わせて改
CSSで半透明、opacityとrgbaの違い - ぼくはまちちゃん！
こんにちはこんにちは！！ 今日はちょっとCSSのメモです！ 半透明について！ opacityを使った透過 #testOpacity { -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; /* IE */ filter: alpha(opacity=40); /* IE */ -moz-opacity:0.4; /* Firefox(old) */ -khtml-opacity: 0.4; /* Safari(old) */ opacity: 0.4; } Opacity test! opacityは子要素まで全て透過する。 RGBaを使った透過 #testRgba { background: rgba(0, 0, 0, 0.4); /* RGBを10進数(0〜255)で指定、不透明度を0〜1.0で指定 */
ねこまぐろBlog :: IEのユーザスタイルシートでpixivの特定ユーザを非表示にする方法
ネットなどの備忘録なブログ。たまに創作ネタメモとか？ ※当サイトではアフィリエイト広告を掲載しています。詳しくはPrivacy Policyをご覧ください。 ぼかしもしないタイトルですね。 pixivとTINAMIのタイトルからサムネイルを非表示にするユーザCSS*Firefox+Stylishも参照ください。 CSSが分からない人にも…と言う事で書いてます。 追記）2012-07-30 先月くらいからpixivが仕様変更により pixiv.net/img数字/img/userID/ と数字フォルダが付いたため、 img[src*="/img/userID/"] にするといいかと思います。（まー /img/userID/ が被る事はないだろう） 前提条件として、IE7、IE8、IE9が必要です。 もう強制アップデートが行われたはずなので、大抵はIE8かIE9ですね。 マイドキュメントにでも
pixivの感想タグを非表示にするユーザーCSS書いた - oui@はてな村
タイトルの通りです。 全裸待機だの続き待ってますだの禿げただの(孫正義に謝れ)、タグならざるタグを非表示にしたくて書きました。見たくないものは自力でなんとかするに限る。 リンクタグのhref属性で判断しているので漏れまくりです。 右に「/* ○○ */」と書いてありますがただのメモ書きなので消しても意味はありませんが意味が分からなくなります。 「俺」などものによっては本来のタグに引っかかることがあるので臨機応変にやってください。 だいたいこんなかんじ /* 感想タグ非表示にする */ a[href*="%E3%81%AA%E3%81%AB%E3%81%93%E3%82%8C"], /* なにこれ */ a[href*="%E4%BF%BA"], /* 俺 */ a[href*="wwww"], /* Wが3つ以下だとWWW.PIXIV.NETに引っかかります */ a[href*="%E3
blog.chira-ura.info » Gmailのメール本文を等幅フォントで表示する(2011/11/04版)
11/01からGmailの新デザインが順次利用できるようになった。例によって本文が等幅フォントではないので、強制的に等幅フォントするユーザーCSSを調べてみた。過去のこの記事の改訂版。 /* 本文 */ div[class="ii gt yDgJbb gtZ5Re"]>div { font-family: monospace !important; font-size: 100% !important; line-height: 120% !important; width: 80ex !important; } /* 送信フォーム */ div.At>textarea.Ak[name="body"] { font-family: monospace !important; font-size: 100% !important; line-height: 120% !important;
Style Guide - hail2u.net
Posted on 07 Dec, 2011 in Web Design? hail2u.netで使われているスタイルの解説兼プレビューのページです。スタイルのコードそのものについてはその公開リポジトリを参照してください。このページのマークアップにはおかしいところが多々ありますが、その多くはやむを得ない事情によるものです。 コンテンツの見出しはh2でマークアップされます。ブログでは見出しに続けてfooterが配置され、更新日時とカテゴリをそこで示します。 FacebookのLikeボタンやはてなスターはその対象の最後にまとめて配置されます。つまり、それらが記事に対するものの場合はarticle要素内の最後になりますが、ページに対するものの場合はdiv#mainの最後になります。対してAdSenseの広告は常に最初のセクションの直後に挿入します。 ベース ブラウザーのデフォルト・スタイルシー
新はてブのUserCSSを書いた - いさぢちん日記
3カラムで横幅固定だと見にくいので。 /*新はてブレイアウト対策*/ .wrapper-container-inner { width:100%!important; padding-left:0!important; } .wrapper-container-inner.left-column-line { background-image : none!important; } #left-container { float:right!important; width:200px!important; } #center-container { width:auto!important; float:none!important; margin-right:200px!important; margin-left:0!important; } #right-container { d
新Googleリーダー用ユーザーCSS修正版 | 10press
昨日、 Google リーダーのデザインがまた微調整されたようですね。新しく歯車アイコンが追加され（個人的には元あった歯車アイコンに追加してほしかった歯車2つある意味ってなぁに）、リスト表示の行高さが3段階で選べるようになったよーということです。Gmail と同じですね、最初からこうしてほしかった！ ただ、以前書いた新Googleリーダー用userContent.css を適用してるとかなり無様な感じに…なのでサクサクッと書き直してみました。 Google リーダー本体の設定 「Compact」で最適化しています。 以前のものよりちょっとコードをスマートにしたつもりです。あと「Expand View」に関する記述は削ってます。 @-moz-document url-prefix(http://www.google.com/reader/view/), url-prefix(http://w
新Googleリーダー用userContent.css | 10press
本日 Google リーダーに新しいデザインが適用されました。配色もだいぶ変わったようですが余白がたっぷりとってあって一覧性に乏しいのが気になったので userContent.css で調整してみました。 userContent.css 適用後 CSS @-moz-document url-prefix("http://www.google.com/reader/view/"), url-prefix("https://www.google.com/reader/view/") { #top-bar { overflow: hidden; height: 30px!important; } .jfk-textinput { height: 20px!important; } .jfk-button { height: 22px!important; line-height: 22px!im
JamGraffiti: リニューアルしました
Random thoughts, note and graffiti that have piqued my creative interest. サイトを全部CMS化して管理しようと思い立ち、ついでなのでHTML5にしました。さようならxhtml1.1。こんにちはHTML5。CMSはいつも通りTextpatternです。 CSS3も使ってます。SafariとGoogleChromeではうっすらとアニメーションが適用されると思います。IEはver9以外は壊滅的なので、IE9でご覧になってくれると嬉しいです。 さて、この度HTML5で書くにあたり色々と調べてメモしながら作業をしたので、そのへんも書いていこうと思います。 参考書にしたのは、オライリーから出ている入門HTML5という本です。これは既に手元にあったので改めて読み返しました。ミツエーリンクスの矢倉さんが訳しています。 また、入門HT
トップページ
ナウでヤングなレンタルサーバーです。初心者にやさしくて、人気のブログも超カンタンに設置できます。おこづかいでＯＫの格安料金 なんと月額100円（税込105円）から！可愛いアドレスもたくさんで女性に大人気！充実のサポート体制で安心です。
hail2u.net - Weblog - FirefoxのuserContent.cssネタ
Firefox 1.5 Beta 1よりURLやドメインなどでCSSルールを切り分けることが可能になりました。これによりuserContent.cssがとてもいじりやすくなった(あるサイト向けにテキトウに書いても他のサイトに誤爆しなくなった)ので、userChrome.cssと同じくガリガリいじると楽しいようなそうでもないような感じです。 _blankなリンクのカーソルを変更 a[target="_blank"] { cursor: alias !important; } cursor: crosshair !important;とかやってる人が多いことと思われますが、1.5 Beta 1から先取りサポートされたaliasにするとより直観的に把握できるようになると思います。 View Page Sourceのフォントを固定する body#viewsource * { font-family
CSS3について知っておきたいことのまとめ
CSS3には興味深い様々なプロパティがありますが、これらを勉強するにあたって知っておきたいCSS3の基礎をまとめてみます。 過去の記事に手を加えたものや新たに書いたものなど幅広くまとめてみましたので、ぜひ抑えておいてください。 今回は結構ボリュームもあるので目次を作っています。 1. スタイルシートの構造 CSS3に限ったことではないですが、CSSの構造は下の図のように、セレクタ、プロパティ、値となっています。 もちろんプロパティと値は一対です。CSSといえば、プロパティのイメージが強いですが、セレクタも結構奥が深いです。 CSS3ではセレクタもプロパティも新たに追加されていますので、違いをちゃんと理解しておきましょう。 2. CSS3セレクタ CSSセレクタはスタイルを適用する対象を選択するものです。普段何気なく使っているclassやidなどもセレクタの１つです。 CSS3セレクタはW3
CSSセレクタ20個のおさらい
CSSセレクタって意外と分かっていなかったりするので勉強ついでにまとめてみました。比較的実用的かなと思うものを20個紹介していきます。いい復習になればと思います。 CSSセレクタはスタイルを適用する対象を指定するものです。普段何気なく使っているclassやidなどもセレクタの１つです。 属性や要素といった堅苦しい用語が出てきますので図で簡単に説明します。 私のように基礎から勉強していないと、要素や属性と聞いてもピンときませんが、知ってみるとなんてことはないですね。 また、IEが対応しきれていないCSS3のセレクタもありますが、IE6～8でもCSS3セレクタが利用できるツールの決定版「Selectivizr」 で紹介したようにCSS3セレクタはie対策も容易なのでぜひお試しください。 SelectivizrはCSSを外部ファイルで指定した方がいいのですが、今回のサンプルはCSSを外部ファイル
CSSだけで実現する、title属性値をポップアップするCSSの公開サンプル
サイト表紙 しらぎくのウェブサイト作成入門 CSSの小技 CSSだけで実現するポップアップメッセージ 公開サンプル 2 title属性値をポップアップするCSSの公開サンプル。 ここでは、CSSだけで実現するポップアップメッセージのデモンストレーションとして、メッセージをtitle属性値とする方法のサンプルです。 title属性値をポップアップするCSSの公開サンプル 目次。 ▲記事先頭 ▽次項目 サンプル 実際に使っているHTMLとCSS HTML文書 スタイルシート サンプル。 ▲記事先頭 △前項目 ▽次項目 ファイヤーフォックス, サファリ 3.0以降, インターネットエクスプローラ 8.0以降, オペラ 8.0以降など対応ブラウザで、以下のサンプルテキストの文字をポイントすると、その右下にメッセージが出て来る筈です。 サンプルテキスト インターネットエクスプローラ 7.0以前など、
Googleサイドバーの固定表示と自動開閉: べつになんでもないこと
Google検索のCSSがインスタントサーチの導入で変わったようで、サイドバーのカスタマイズの影響でGoogle.comの表示が崩れてしまうのでちょこっと修正。 Firefox 4.0β以降向けなので、3.6でも使えますが使いづらいかも。 Google のサイドバーをマウスオーバーで開閉する - Grieverがベースになってます。 userContent.cssに記述してますが、元がStylish用ですので「@namespace url(http://www.w3.org/1999/xhtml);」を先頭につければ使えるんじゃないかなと。 @-moz-document domain(www.google.co.jp), domain(www.google.com){ #center_col { margin-left:8px!important; border-left:none!imp
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Border Radius
SASSIENCE ～ 世界が嫉妬するCSSへ
Web制作 W3G
