みかづきブログ その3

3ヶ月つづけてみました。

CSS

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にすれば解決するという画期的(?)な解決策を教えてもらいまし…

IE10ではmain要素がblock要素にならない

CSS

あんまりmain要素をつかうことがなかったので知りませんでしたが、先日教えてもらいました。 IE10ではmain要素がblock要素として扱われないため、 main { display: block; } という感じで書いておく必要があるとのことです。困りますね。 DEMO main要素 disp…

IE10のselect要素のfocusにbackground-colorを設定するとが2回クリックしないと開かなくなる

CSS

マークアップをしていると、Android、IEの不思議な挙動を見つけることが多々あります。 こういったバグを見つけることを昆虫採集と呼んで日々ポジティブにデバッグをしているのですが、ひさしぶりにレアな昆虫(バグ)を見つけたのでテンション高くまとめて…

CSSで円のセンターにテキストを配置する

CSS

昔一度投稿した気がしなくもないんですが、見つからなかったので投稿しておきます。 テキストをDOMに対し上下左右中央寄せしたい場合はわりと頻繁に出てきますが、そのDOMが円だった際の対策です。円の外接四角形に対しテキストを上下左右中央寄せすると行数…

CSSでページの背景をほんのりおしゃれにする方法まとめ(コピペでつかえるよ)

CSS

HTMLで高速でモックをつくってみせるとき、背景が単色だとちょっと見栄えが良くない時ってありますよね。 そんなときにほんのりおしゃれに見える背景のつくりかたをいくつかご紹介しましょう。※ Chromeでしか動作確認してませんこちらのDEMOの背景をCSSだけ…

iPhoneアプリのアイコンにつくバッジの大きさと位置を目視で調べました

chibadge.kimizuka.fmかつてchibadge(チバッジ)のアプリアイコンをつくったとき、 デザイン 実機に移してバッジをつけて確認 調整 2に戻る という感じでデザインを調整していました。 それがとてもめんどうなので、バッジのついた状態をプレビューするツー…