CSS
Can I use... Support tables for HTML5, CSS3, etc 困ったもんだぜ。 ちなみplaceholderのstyleを変えるのは以下のようにする。 ::-webkit-input-placeholder { color: #999; } :-moz-placeholder { color: #999; } ::-moz-placeholder { color: #999; } :-…
/*! 消えないコメント */ 「!」をつける。ラウドコメントというらしい。へえー。
width/2だけネガティブマージンは面倒 position:absoluteして左右中央配置するのは、left50%にして、width/2だけネガティブマージンというやり方しか知らなかった。widthを知るのは面倒だ。だから調べてみた。そしたら別のやり方があった。
オリジナルテーマを作る Lessで編集できる このへんを見てると、作り方が載っていました。ただせっかくLessでBoilerplateを編集できるのだから、Gruntでタスク管理して楽チン編集したいと思いました。 デザインテーマ制作の手引き - はてなブログ ヘルプ htt…
compassのimage-urlの設定に「../img」という相対パスを設定したかったのでやってみました。 image-url compassにはimage-urlという便利な機能があります。・参考 Compassの画像の関数(Image Helpers)| Web制作者のためのSassの教科書 - 公式サポートサイ…
document.getElementsByClassName("testBtn")[0].disabled = true; buttonタグで作成されたボタンを無効にするには、上のように書きます。disabled属性をtrueにすると無効になります。
真木よう子の写真の一部をdivで隠してみました。写真の印象がかなり変わって面白かったのでもっとシンプルなものもつくってみることにしました。
真木よう子Viewer ver1.01 先日のエントリに引き続き「真木よう子Viewer」を作っていました。AngularJSの恩恵を十分に受けていないようなペラ一枚のページになっています・・・。
「真木よう子Viewer」とは? demo Yoko Maki Viewer
demo scaleの使い方 scaleX(数値) scaleX()関数では、X方向の縮尺比率を指定します。Y方向とZ方向の比率は1となります。[sx,1,1] ・参考 transform:scale()-CSS3リファレンス 負の値を入れる -webkit-transform:scaleX(-1); こうすることでX軸方向に-1倍さ…
デモ 電子決済サービスを行っているCoineyさんの採用ページがかっこよかったです。特に社員紹介のところの、マウスホバーエフェクトが目に留まりました。早速参考にして実装することにしました。 ・参考 http://coiney.com/jobs 水色のメニューが現れる div{…
PhotoshopにあるようなブレンドモードをCSSで実装できると知って、試してみることにしました。 CSS Blend Modes could be the next big thing in Web Design | by Bennett Feely | Medium http://codepen.io/bennettfeely/pen/uLKrG Blend Modeを使うための…
nko nko 「○んこ」から連想する言葉をTwitterに投稿するWebサービスをつくった。GitHub - naoyashiga/nko at gh-pages GitHub Pagesに公開させた。コードはここに公開してある。サービスを作る上でやったことを以下にメモしておく。 Tweetボタンの設定 Tweet…
デモ Christmas Experiments このページのアニメーションがかっこよくて、ホバーしたらドアのように開くのをCSSで書いてみた。 アニメーションの回転軸をずらす -webkit-transform-origin: left 50%; -moz-transform-origin: left 50%; transform-origin: le…
CSSにおける「>」の意味 親要素A > 子要素 { プロパティ: 値; } 子要素から指定した親要素が「親要素A」だったときのみを対象とするセレクタ。 子孫セレクタのときとは違うという注意が必要。子孫セレクタは孫要素まで考慮するので、親要素直下になくても(子…
demo 以下の参考サイト見て、Youtubeのローディングデモを自分でもつくってみようと思った。自分でつくるといっても、ほとんど書き写しただけだが。下のデモでは影をつけたり、アニメーションのボタンをjsで操作する際にライブラリを使ったりしている。自分…
デモ 画像を円に切り抜く 画像が正方形の場合 img{ border-radius:50%; } 素直にborder-radiusで画像の50%の大きさをしてすればいい。 img{ width:100px; height:100px; border-radius:300px; } pxで指定するのなら、幅よりも大きめの値を設定すればいい。・…
ちょっと迷ったのでメモ 文章が短い時 <p>おはよう。</p> <p>こんにちは。</p> 上の文章の行間を開けたい時は、pタグのスタイルでmarginを調整すれば良い。 *{ margin:0; padding:0; border:0; } p{ margin-top:10px; } 文章が長い時 <p class="test2">ある日の暮方の事である。一人の下人げ</p>…
demo transitionとは? css3のtrasitionは状態変化にアニメーションをつけることができる。Test1にhoverすると、boxの大きさと色が変わるようになっている。 displayはtransitionできない 便利なtransitionだが、displayプロパティには設定できないようだ。基…
デモ CSS Shapeって何? テキストがCSSで作った図形に沿って回り込みができる技術。これを駆使すれば、より柔軟にレイアウトを作成することが出来る。 CSS Shapeの導入方法 Chrome Canaryの設定で「試験運用版のウェブ プラットフォームの機能を有効にする」…
はてな記法で「*」を使うと、自動的に見出しタグである「h3」を使用することができる。現在、このブログで使っているテーマではh3は太字で大きく表示されるだけなので、少しCSSを書いてデザインを加えることにした。 変更後のh3タグ 書いたコードはこちら。 …
改行されない理由は2つある。 日本語ではなく、英語だから 半角スペースや「/」がないから 対処法は以下の通り。 p{ word-wrap:break-word; } これにより、ブロック要素の端で改行される。
今更だがSublimeText2にCSS Snipetを入れてみた aniと入力すると以下のようなコードが自動的に入力されたからたまげた。 -webkit-animation: name duration ease|linear|ease-in|ease-out|ease-in-out|cubic-bezier(<number>,<number>,<number>,<number>) delay infinite|<number> normal|alternate; </number></number></number></number></number>…