みかづきブログ その3

本ブログは更新を終了しました。通算140万ユーザーの方に観覧頂くことができました。長い間、ありがとうございました。

👆

引越し先はこちらです!

CSS

input type="number"の右のボタンをカスタムする 💻

CSS

input type="number"の右のボタンがspin buttonということを知りました。 そしてwebkit限定ですが、CSSである程度カスタムできることを知ったので、早速カスタムしてみました。 本当のスピンボタンは透明にしつつ、大きくしておいて、その上に当たり判定のな…

IE11で動的に属性セレクタを変更した際にスタイルが反映されない

CSS

2020.06.04 追記 blog.kimizuka.orgsetAttributeをつかって更新するとスタイルが反映されることに気づきました! -- その昔、Androidではまったことがありましたが、まさかIE11でも動的に属性セレクタを変更した際にスタイルが反映されないとは思いもしませ…

node-sassをつかってscssをcssにコンパイルする

自分の関わった過去のプロジェクトを見返すと、grantを使っていたり、gulpをつかっていたり、webpackを使っていたりして、ウェブフロントエンドの開発環境の移り変わりの早さを感じます。正直最近は環境構築が面倒なので、JavaScriptもHTMLも生で書いてしま…

CSSでテキストのアンチエイリアスの感じを調整する

CSS

-webkit-font-smoothing、-moz-osx-font-smoothingとかってなんだろうとおもって調べてみたのですが、mozillaのページにすべてが載ってました。developer.mozilla.org 一部を翻訳して抜粋すると、 WebKitは、同様のプロパティを実装していますが、異なる値:…

Airbnb JavaScript Style Guide と Airbnb CSS / Sass Styleguide

これからしばらくの間は、おとなしくこれらに従って生きていこうと思いました。 JavaScript github.com CSS github.com JavaScriptの、 オブジェクトを1行で書くときはブレースとキー、バリューとブレースの間にスペースを開ける ダブルコートをシングルコー…

CSSでポヨンとしたボタンをつくりました。

CSS

DEMO See the Pen Sphere Button by kimmy (@kimmy) on CodePen. HTML <div id="nav" data-current-index="0"> <div class="nav-dot" data-index="0"></div> <div class="nav-dot" data-index="1"></div> <div class="nav-dot" data-index="2"></div> <div class="nav-dot" data-index="3"></div> </div> SCSS %select { wi…

夏なのでCSSで蚊取り線香をつくって蚊が寄ってこないページをつくりました。

See the Pen mosquito coil with mosquito sound by kimmy (@kimmy) on CodePen.まず、CSSで蚊取り線香をつくりました。夏なのでCSSで蚊取り線香をつくってみました。https://t.co/wH0siWKl8e— 君塚史高 (@ki_230) 2017年7月27日 半円を互い違いに組み合わせ…

CSSでiPhone本体の素材をつくる その2

CSS

kimizuka.hatenablog.com以前、CSSでiPhone5をつくったことがありましたが、 流石に古くなってきたので、iPhone7につくりかえてみました。以前のコードと比べると、要素数が少なくなっていて成長を感じますね。 (before、after、box-shadowをつかうようにな…

iOS11向けにウェブARコンテンツをつくってみました。(マーカーレスの超簡易版) 🏃

追記:(2017/06/09 00:16) 本記事内に掲載している動画キャプチャが、 Apple.Incの開発者利用規約(APPLE BETA SOFTWARE PROGRAM AGREEMENT APPLE INC.)に抵触しているというご指摘をいただきました。 掲載内容を不適切と判断し、該当箇所を削除させてい…

pタグ内の改行コードを改行する(Reactで改行を反映したいときなど) 😎

kimizuka.hatenablog.com JavaScript <p className="txt">{ this.props.txt }</p> みたいな感じで、this.props.txtに、 ふるいけや\nかわずとびこむ\nみずのおとという感じで改行コード入りのテキストを渡したい時、 CSS .txt { white-space: pre-wrap; } とCSS側を工夫することで一…

webpackを導入してPostCSSをCSSに変換してCSSファイルを書き出せるようにする。 😎 (フロントエンドエンジニアがさくらVPS で Ubuntu + Nginx + Node.js + Express + webpackの環境を整えるまでの道のり - その5)

春ですね。^ ^なにか新しいことをはじめたくなりますね。^ ^前回はwebpackをつかってJavaScriptでimportをつかえるようにしました。 今回は、webpackでPostCSSをつかえるようにします。kimizuka.hatenablog.comkimizuka.hatenablog.comkimizuka.hatenabl…

CSSでロングシャドウをつくってその影で影時計をつくりました。 😎

最近、家に時計がないことに気づきました。時計機能のついたものはたくさんあるので、時間がわからなくて困ることは無いんですが、 世の中から時計という装置がどんどん減ってきてるのではないかと思いました。反面、ありとあらゆるものに時計機能が付随して…

テキストの縦位置・横位置をセンタリングしたいという想い(display: flex; align-items: center; justify-content: center;) 😇

CSS

いままで、display: table-cell とか text-align: center とか line-height(1行のときのみ)とか色々頑張ってきたけど、今後はflexboxをつかうと決意した。 なんていったって、いままでの試行錯誤と違って専用のプロバティだし。 CSS .box { display: flex;…

CSSアニメーションで画面がちらつく場合は -webkit-backface-visibility: hidden; で解決する場合がある

CSS

大体1年前の記事で取り上げたUIをブラッシュアップしている時に気づきました。kimizuka.hatenablog.com 解決前DEMO カードをドラッグした時に、テキストが点滅するんです。 本当は制作当初から気になっていたんですが、原因もよくわからないし放置していまし…

フラットデザイン、マテリアルデザインを目コピーする(スライダーUI編)

年末にアドベントカレンダーで こちらの記事 を執筆させていただいたのですが、それからというものアプリっぽいUIをCSSでつくることにハマっています。techblog.kayac.com 以前から、トグルボタンとか、kimizuka.hatenablog.comドロワーメニューとか、kimizu…

iTunesのようにスクロールできるUIをつくる

overflow: scroll をつかってiTunesのようにスクロールできるUIをつくってみました。 本当のiTunesにはスクロールバーがついているのですが、なんとなく無い方がかっこいい気がして消しています。 基本的にはCSSのみでつくっているのですが、左右に薄くはい…

CSSのみでドロワーメニューをつくったぞい

CSS

DEMO See the Pen Drawer Menu made from CSS only by kimmy (@kimmy) on CodePen.チェックボックス、隣接セレクタ、checked擬似クラス、target擬似クラスを活用してJavaScript無しでの動作を実現しています。 HTML <input id="btnMenu" type="checkbox" class="btn"/> <nav id="menu"><a href="#a" class="btn">MENU_A</a><a href="#b" class="btn">MENU_B</a></nav>

iPhoneのSafariのデフォルトの挙動(ボタンをタップした際の色、テキスト選択、長押しで開くメニュー)をリセットしたいという想い

結論 * { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-touch-callout: none; -webkit-user-select: none; } でOK。こちらのページ で検証しました。(iOS10.1のiPhone6を使用して確認)http://jsrun.it/kimmy/ITBo ボタンをタップした際に薄暗…

CSSだけでトグルボタンをつくる

CSS

input要素をCSSでトグルボタン風に仕上げてみました。 DEMO See the Pen Toggle Button made from CSS only by kimmy (@kimmy) on CodePen. HTML <input type="checkbox" class="btn center"/> SCSS $white: #f8f8f2; $green: #a6e22e; body { background: $white; } .center { position: absolute; top:…

Compassのみ(他のタスクランナーをつかわず)でAutoprefixerをつかいたいという想い

CSS

GruntとかGulpでは良くAutoprefixerをつかっていたのですが、AutoprefixerのためだけにGruntとかGulpを導入するのもなかなか面倒なので、なんとかCompassでつかえないものかと悩んでいたのですが、つかえました。 必要なgemをインストール autoprefixer-rail…

flexboxをつかってコンテンツを均等に並べる

CSS

DEMO See the Pen flexbox by kimmy (@kimmy) on CodePen. 子要素の数に依存せずに、コンテンツ幅を均等にして並べたいことがあると思います。 そんな時に便利なのがflexboxです。 +ボタンを押していただくとわかりますが、子要素を増やすと自動でコンテンツ…

border-radiusを若干楕円にする

CSS

/ で区切って数値を複数渡すことで楕円を描画できます。 CSS .box { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; border-radius: 20px / 30px; width: 200px; height: 150px; background: #3e3e3e; } HTML <div class="box"></div> DEMO

今日のCSSアニメーション その8

CSS

蝶を目指しました。 DEMO HTML <div class="arc"> <div class="box"> <div class="butterfly"> <div class="head"></div> <div class="body"> <div class="wing l"></div> <div class="wing r"></div> </div> </div> </div> </div> SCSS %block { display: block; position: absolute; border: solid rgba(0, 0, 0, 0); width: 0; he…

border-image + drop-shadow でおしゃれな枠線を実装する

CSS

デザイナーから、大きさが可変のイメージをおしゃれな枠線で囲んだデザインが上がってきたので、border-image + drop-shadow で実装することにしました。 border-imageの実装 このような9分割できる素材を用意しましょう。 (ぼかしはCSSでいれようと思って…

white-space: pre-line をつかって改行を反映する

CSS

developer.mozilla.orgwhite-space を pre-line に設定すると改行が反映されることを教えてもらいました。 状況によっては便利に使えそうです。 HTLM <p> ふるいけや かわずとびこむ みずのおと </p> CSS p { white-space: pre-line; } DEMO

CSSでおしゃれな切り替えボタンをつくる その2

CSS

アニメーションをつけてみました。 DEMO See the Pen Button by kimmy (@kimmy) on CodePen. HTML <ul data-color="red" class="colors"> <li data-color="red" class="btn color"></li> <li data-color="blue" class="btn color"></li> <li data-color="green" class="btn color"></li> <li data-color="yellow" class="btn color"></li> <…</ul>

CSSでおしゃれな切り替えボタンをつくる

CSS

アニメーションをつけてみました。 DEMO See the Pen Button by kimmy (@kimmy) on CodePen. HTML <div class="box"> <ul data-index="0" data-length="2" class="btns"> <li data-index="0" class="btn">LEFT</li> <li data-index="1" class="btn">RIGHT</li> </ul> <ul data-index="0" data-length="3" class="btns"> </ul></div>

単位が%のときのSassでの割り算の書き方

CSS

結論 .hoge { width: (100% / 5); } という感じで括弧をつけて書きましょう。 あらすじ ものすごく初歩的なことなんですが、 .hoge { width: 100% / 5; } とか .hoge { width: 100 / 5 + %; } とかと書いてエラーになりました。よくよく考えると / は 通常の…

今日のCSSアニメーション その7

CSS

同じ色の円が場所によって違う色に見えるというデモです。 なにかにつかえるかもしれませんし、つかえないかもしれません。See the Pen SAME COLOR by kimmy (@kimmy) on CodePen.

visibilityはCSSアニメーションで制御可能なのでjQueryのfadeInみたいな感じのアニメーションをつくりたかったら、displayじゃなくてvisibilityをつかえば良いという事実

CSS

CSSアニメーションにて displayにtransitionを設定することができないため、display: none; から display: block; にするようなアニメーションを実現するときに困っていたのですが、visibilityにすれば解決するという画期的(?)な解決策を教えてもらいまし…