not good but great

プログラミング、アート、映画・本の感想について書きます。

CSS

placeholderはIE9では効かない

Can I use... Support tables for HTML5, CSS3, etc 困ったもんだぜ。 ちなみplaceholderのstyleを変えるのは以下のようにする。 ::-webkit-input-placeholder { color: #999; } :-moz-placeholder { color: #999; } ::-moz-placeholder { color: #999; } :-…

SCSSでコンパイル後にコメントを残す

CSS

/*! 消えないコメント */ 「!」をつける。ラウドコメントというらしい。へえー。

position:absolute、margin:0 autoして左右中央配置する

CSS

width/2だけネガティブマージンは面倒 position:absoluteして左右中央配置するのは、left50%にして、width/2だけネガティブマージンというやり方しか知らなかった。widthを知るのは面倒だ。だから調べてみた。そしたら別のやり方があった。

オリジナルはてなブログテーマをGruntでLessを自動コンパイルして作るための環境設定

オリジナルテーマを作る Lessで編集できる このへんを見てると、作り方が載っていました。ただせっかくLessでBoilerplateを編集できるのだから、Gruntでタスク管理して楽チン編集したいと思いました。 デザインテーマ制作の手引き - はてなブログ ヘルプ htt…

compassのimage-urlの設定に「../img」という相対パスを設定する

compassのimage-urlの設定に「../img」という相対パスを設定したかったのでやってみました。 image-url compassにはimage-urlという便利な機能があります。・参考 Compassの画像の関数(Image Helpers)| Web制作者のためのSassの教科書 - 公式サポートサイ…

javascriptでbuttonタグで作成されたボタンを無効にする

document.getElementsByClassName("testBtn")[0].disabled = true; buttonタグで作成されたボタンを無効にするには、上のように書きます。disabled属性をtrueにすると無効になります。

女性の顔をdivで隠してみたらアートっぽくなった

CSS

真木よう子の写真の一部をdivで隠してみました。写真の印象がかなり変わって面白かったのでもっとシンプルなものもつくってみることにしました。

display:flexがモバイルで効かないときはdisplay:boxで代用する

真木よう子Viewer ver1.01 先日のエントリに引き続き「真木よう子Viewer」を作っていました。AngularJSの恩恵を十分に受けていないようなペラ一枚のページになっています・・・。

AngularJSを使って「真木よう子Viewer」を作り始めた

「真木よう子Viewer」とは? demo Yoko Maki Viewer

CSSのscaleに負の値を入力して、水平・垂直反転させる

CSS

demo scaleの使い方 scaleX(数値) scaleX()関数では、X方向の縮尺比率を指定します。Y方向とZ方向の比率は1となります。[sx,1,1] ・参考 transform:scale()-CSS3リファレンス 負の値を入れる -webkit-transform:scaleX(-1); こうすることでX軸方向に-1倍さ…

Coineyさんの採用ページがかっこよかったので、エフェクトを真似してみた

CSS

デモ 電子決済サービスを行っているCoineyさんの採用ページがかっこよかったです。特に社員紹介のところの、マウスホバーエフェクトが目に留まりました。早速参考にして実装することにしました。 ・参考 http://coiney.com/jobs 水色のメニューが現れる div{…

CSS Blende Modeを試してみた

CSS

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を使うための…

「○んこ」から連想する言葉を投稿するWebサービスをつくった

nko nko 「○んこ」から連想する言葉をTwitterに投稿するWebサービスをつくった。GitHub - naoyashiga/nko at gh-pages GitHub Pagesに公開させた。コードはここに公開してある。サービスを作る上でやったことを以下にメモしておく。 Tweetボタンの設定 Tweet…

CSSでホバーするとドアのように開くアニメーションを実装する

CSS

デモ Christmas Experiments このページのアニメーションがかっこよくて、ホバーしたらドアのように開くのをCSSで書いてみた。 アニメーションの回転軸をずらす -webkit-transform-origin: left 50%; -moz-transform-origin: left 50%; transform-origin: le…

CSS子供セレクタ「>」の使い方、子孫セレクタとの違い

CSS

CSSにおける「>」の意味 親要素A > 子要素 { プロパティ: 値; } 子要素から指定した親要素が「親要素A」だったときのみを対象とするセレクタ。 子孫セレクタのときとは違うという注意が必要。子孫セレクタは孫要素まで考慮するので、親要素直下になくても(子…

Youtubeのローディングアニメーションもどきを作ってみた

demo 以下の参考サイト見て、Youtubeのローディングデモを自分でもつくってみようと思った。自分でつくるといっても、ほとんど書き写しただけだが。下のデモでは影をつけたり、アニメーションのボタンをjsで操作する際にライブラリを使ったりしている。自分…

CSSで長方形の画像を円で切り抜く

CSS

デモ 画像を円に切り抜く 画像が正方形の場合 img{ border-radius:50%; } 素直にborder-radiusで画像の50%の大きさをしてすればいい。 img{ width:100px; height:100px; border-radius:300px; } pxで指定するのなら、幅よりも大きめの値を設定すればいい。・…

CSSの「line-height」で行間を調整する

CSS

ちょっと迷ったのでメモ 文章が短い時 <p>おはよう。</p> <p>こんにちは。</p> 上の文章の行間を開けたい時は、pタグのスタイルでmarginを調整すれば良い。 *{ margin:0; padding:0; border:0; } p{ margin-top:10px; } 文章が長い時 <p class="test2">ある日の暮方の事である。一人の下人げ</p>…

css3のtransitionはdisplayプロパティに適応されない

CSS

demo transitionとは? css3のtrasitionは状態変化にアニメーションをつけることができる。Test1にhoverすると、boxの大きさと色が変わるようになっている。 displayはtransitionできない 便利なtransitionだが、displayプロパティには設定できないようだ。基…

CSS ShapeとExclusion(IEなので未確認)を使ってみた

CSS

デモ CSS Shapeって何? テキストがCSSで作った図形に沿って回り込みができる技術。これを駆使すれば、より柔軟にレイアウトを作成することが出来る。 CSS Shapeの導入方法 Chrome Canaryの設定で「試験運用版のウェブ プラットフォームの機能を有効にする」…

はてなブログの<h3>タグのデザインをCSSでちょっとだけ変更させてみた

はてな記法で「*」を使うと、自動的に見出しタグである「h3」を使用することができる。現在、このブログで使っているテーマではh3は太字で大きく表示されるだけなので、少しCSSを書いてデザインを加えることにした。 変更後のh3タグ 書いたコードはこちら。 …

pタグ内で英文が改行されないときの対処法

CSS

改行されない理由は2つある。 日本語ではなく、英語だから 半角スペースや「/」がないから 対処法は以下の通り。 p{ word-wrap:break-word; } これにより、ブロック要素の端で改行される。

animationしたあとそのままの状態を維持

CSS

今更だが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>…