水平線を引くアニメーションの実装をいくつかやってみます。 左から右へ線を引く まずはベタ塗りの線を引いてみます。 HTML <div id="horizon1"></div> CSS #horizon1 { position: absolute; top: 100px; left: 0; width: 0; height: 5px; background: #E74C3C; } JavaScript $(function() { winW = $(window).width(); spped = 3000; $('#horizon1').animate({ width: winW }, spped); }); 線の塗りは背景色で、widthを0から画面幅に広げてアニメーションしています。 左から右へ線を引くデモページ1 ベタ塗りではなく画像で線を引いてみます。 HTML <div id="
昨日に引き続き、CSSの小ネタを紹介します。「CSSでボーダーをボックスに沿って走らせる」とか、よく分からないタイトルですが、簡単にいうとボーダーをボックスに沿って移動させる方法で、四角いボックスの外周を回り続けるエフェクトの実装方法になります。 正確には、CSSでいうところのborderプロパティではなくて、1pxの高さ(または幅)を持った要素をCSSのアニメーションで動かしています。 四角いボックスの外周を回り続けるエフェクトとは 言葉では説明しづらいので、以下の奴がそうです。DEMOというテキスト部分をマウスホバーすると、2本の線が現れて外周を回りだします。 DEMO ヒーローイメージとゴーストボタンを使いたかったという理由だけで、デモも作ってみました。ただの自己満足。 これのやり方 個人的になかなか面白い効果だなと思っているのですが、全てCSSで比較的簡単に実装できます(正方形の場
Pure CSS transition effects for off-canvas views You have probably all seen the "drawer menu/off-canvas" navigation style made popular by Facebook a few years back. There are a lot of great javascript plugins that offers this functionality, but I thought it would be cool to try and do this with the new cool features of css. No javascript required. Demo Download v1.0.2 Documentation
更新日: 2018年10月11日公開日: 2015年10月28日これ全部CSS!?驚くほど自由自在なCSSアニメーション20選 "CodeCampus"はオンラインプログラミングスクール No.1のCodeCampが運営するプログラミング未経験の方のための学習メディアです CodeCampとは?(受講生体験記) 「エンジニアは女性のキャリアとして魅力的」未経験からの転職体験記リモートワーク×多拠点居住の新しい生き方を実現する。元バレエダンサーの挑戦普通の文系大学生/営業職が、エンジニアへ転職し起業するまで成長の記録 CSSアニメーションの基礎知識 改めてCSSアニメーションとは 2011年6月にFirefox5がCSSアニメーションに対応したことを皮切りに、GoogleChrome、Safari、iOS、Androidなど次々に各ブラウザがCSSアニメーションに対応するようになりました。C
下記のキャプチャ画像は、写真でもイラストでもありません。 肌の質感も髪も目も鼻も口も全部CSSで実装されたポートレートを紹介します。 眉毛とか、瞳とか、かなりのクオリティ。唇や歯もかなりリアルです。 <pic> <face> <i></i> </face> <eyeleft> <i> <i></i> <i></i> <i> <i> <i> <i></i> <i></i> <i></i> <i></i> <i></i> <i></i> <i></i> </i> <i></i> <i></i> </i> <i></i> </i> <i></i> <i></i> <i></i> <i></i> <i></i> <i></i> <i></i> <i></i> <i></i> <i></i> <i></i> <i></i> <i></i> <i></i> <i></i> <i></i> <i></i
別に style タグやインラインスタイルに書いてもいいけど。 ということで、SVG ってあるじゃないですか。 いわゆるひとつの、Scalable Vector Graphics。 一般的に広く使われている JPEG や PNG のようなラスタイメージとは違ってベクタ形式なので、拡大縮小しても綺麗に表示できるっていうアレですね。 SVG は XML――すなわちテキストで記述されているので、ラスタイメージのように画像自体の縦横に比例してファイルサイズが際限なく大きくなってしまうようなことが起こり難く、ファイルサイズを比較的小さく保ち易いという利点もあります。 ※テキストだけに、http での転送時は gzip 圧縮も利きますし。 綺麗な上にファイルサイズも小さいときては、最近の Web ブラウザは基本的に対応していることもあり、そろそろ積極的に使っていこうと考えている方も多いのではないかと思
私は毎年Twitterで「SassなどのCSSプリプロセッサを使用していますか?」というアンケートをとっています。その際、「まだSassを使っていない方がいるのか」と驚く方がいる一方で、「なぜSassが必要なのかわからない」、あるいは「Sassを使ったけど必要性がわからないので使うのをやめた」という返信をいただくことがあります。 私自身、はじめてSassを知った時にはその必要性がよくわからず、すぐに自分の仕事に取り入れることができなかったのでそういう方の気持ちはよくわかります。 そこでこの記事では、私が最初にSassを必要ないと思ったのになぜ今はSassを使用しているのか、なぜ必要だと思ったのかということについてお話ししたいと思います。 Sassとは何か この記事を読んでいる方はすでにご存知の方も多いと思いますが、SassとはCSS拡張メタ言語と呼ばれるCSSを便利に記述するための言語のひ
HTMLのテキストはPhotoshopのように融通が効かないから、デザイナーからの細かいお願いはだいたい断っている...なんてことありませんか? モダンブラウザは色んなプロパティが対応してきているので、できることも増えています。 今回は、知っているといざというとき便利なテキスト周りのCSSを集めてみました。 「日本語、文字詰めできないかな?ほら、このカタカナとかキモい。。」 「Webで文字詰めだと?無理なんだよあきらめな!」なんていう時代はもうとうに過ぎ去っています。OpenTypeのフォントであれば、日本語でもちゃんと文字詰めできるんです。 .class { -moz-font-feature-settings: "palt"; -webkit-font-feature-settings: "palt"; font-feature-settings: "palt"; } ↓こんなかんじで
いきなり結論を書くと、idやclassはスタイルのためのものなので、テストでそれを使うのはやめましょう。そして、カスタムデータ属性を使いましょう。(idやclassはスタイルのためだけではないという意見はごもっともです!しかし、主にとしてスタイルに使われるということでご了承頂いて以下の駄文に付き合って頂けると幸いです🙇) 先に断っておくと主にreactについての話で、JSXを前提とします。(手法はReactに限りませんが理由は後述) 2020/03/23 追記 この記事は1年以上前に書かれた記事なのでテストフレームワークとしてenzymeを使っていますが、現時点ではTesting Libraryの使用をオススメします。data-testid に対応するクエリを備えています。 React Testing Library · Testing Library はじめに ご存知の通り、ロジックと
チェックボックスやラジオボタンのスタイルを苦手にしている人も少なくないと思います。シンプルなHTMLにclassを加えるだけで、さまざまなデザインのチェックボックスとラジオボタンが実装できるスタイルシートを紹介します。 角を丸くしたり、カラーをつけたり、といったシンプルなものだけでなく、アニメーションを使ったものもclassを加えるだけで簡単に実装できます。
これからのCSSはmargin禁止!?CSSグリッドレイアウトやコンポーネント指向なCSSについて、矢倉さんに聞いてきた! 白石 俊平(HTML5 Experts.jp編集長) こんにちは、編集長の白石です。 この記事は、9月24日に開催されたHTML5 Conference 2017に登壇したエキスパートに、お話されたセッションのトピックを中心に語っていただこうとういものです。セッションの内容をより深く理解する手助けになるだけでなく、本記事単体でも面白く読んでいただけることを目指しています。 今回お話を伺ったのは、ピクセルグリッドの矢倉眞隆さんです。 矢倉さんのセッション「まあまあ最近のCSSとつらくならないための書き方」に関するスライド資料は、こちらで公開されています。 インパクト大!CSSグリッドレイアウト概要 白石: では、まずは簡単に自己紹介をお願いできますか? 矢倉: 昨年(2
2017年10月11日 CSS, Webデザイン Webデザイン・制作を教えている時に、担当していた生徒さんからこんな悲痛なメッセージをいただきました。「Webサイトのデザインを出してみたものの、本気を出して作ってくださいと言われてしまいました…」。デザインを見てみると、とても美しく整ったものだったのですが、「テンプレートとしてありがち」なレイアウトに見えました。この辺を指摘されたのかな、と。自分でコーディングをすることを考えると、どうしても自分の力で実現できそうなデザインにしてしまうんですね。私も駆け出しの頃はよくありました。そこで今回はちょっとした工夫で少し差がつくCSSの小技をいくつか紹介します。簡単にできるとわかれば、デザインに反映できそうですね! ↑私が10年以上利用している会計ソフト! 1. 要素を斜めに配置 通常CSSでレイアウトを組んでいくと、垂直平行のボックスが並んでいく
About HTML Preprocessors HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug. Learn more · Versions Adding Classes In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-
Winでは基本的にフォントレンダリングをCSSで制御することは出来ません。また、スマートフォンのブラウザもほとんど制御できず、基本的にグレースケールで表示されることが多いようでした。 MacではSafariのみがグレースケールですね、これが原因で「Safariで文字が細く見えてしまう」現象が起こっています。 デバイスのdpiによる見え方 このまま各ブラウザでアンチエイリアスを揃える設定しても良いのですが、1x, 2xの解像度による見え方を見ていきましょう。(今回はThunderbolt Display = 109ppi, MBP Retina Display = 220ppiで検証・比較。実際に表示した画面をスマホのカメラで加工が無いようにして撮りました。) 109ppi(Thunderbolt Display) 220ppi(MBP Retina Display) 以下のことがわかります
PC 版の Google Chrome や Safari で見たときにユーザビリティーが落ちるから。 以上。 で終わってしまうと記事にならないので、ちゃんと説明しておく。 そもそも -webkit-text-size-adjust とは何か iPhone や Android のブラウザーは、縦向き (Portrate mode) と横向き (Landscape mode) の文字サイズを自動調整する機能がある。 これを制御するのが CSS の -webkit-text-size-adjust である。 文字サイズ自動調整の具体例 次のような HTML をスマートフォンで表示してみる。 <!DOCTYPE html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-
CSS Flexboxとは水平または垂直に要素を配置し、柔軟なレイアウトを実現できるCSSのレイアウトモジュールです。複雑なレイアウトでも今までより少ないコードで、よりシンプルなプロセスで実装することができます。 CSS Flexboxの基礎知識、Flexboxの各プロパティがどのように機能するのか、Flexboxでどのようにレイアウトを実装するかを視覚的に解説します。 【アップデート: 2022年6月16日】 IEがサポート終了したことにあわせて、修正しました。 【アップデート: 2021年8月1日】 Flexboxの解説を2021年の現状にあわせて、修正しました。 【アップデート: 2020年8月23日】 Flexboxの解説を2020年の現状にあわせて、修正しました。 【アップデート: 2019年3月27日】 Flexboxの解説を2019年の現状にあわせて、修正しました。 【アップ
img:after { content: attr(alt); } としても何も表示されないのは、仕様的に正しい挙動です 公開日: 2011年5月11日 タグ: css お分かりの方には何てことないというか今さらな話ですが、割と出来なくて悩んでる方が多いように見受けられたので。Twitter のツイートを検索してみてもたまに話題に上がってるっぽいし。 「画像にキャプションを表示する」などの名目でこの img:after { content: attr(alt) } のような[1] CSS 例を挙げているところがいくつかあるのですが、実際にこのような CSS を書いても alt 属性値が画像の後ろに表示される事はありません。Opera では表示されるようですが(あと私の記憶にはないのですが、どうやら古い Mozilla もこのような実装になっていたみたい[2]です)他のモダンブラウザでは基本
CSS おれおれ Advent Calendar 2012 – 05日目 横幅いっぱいに広げようとしてwidth:100%を指定したら横スクロールバーが出ちゃった、という経験ありませんか? その原因と仕組み、回避策についてお話しします。 わりとFAQな感じ。これは是非覚えておいてもらいたいです。というか知っておいてください。 はみ出した例 position:absoluteないしposition:fixedを使った際にこうなっちゃう事が多いと思います。 上部から出てきたメッセージ欄、横にはみ出てますね。 でも指定はちゃんとwidth:100%です。「幅いっぱい」を指定しているのに、どうしてはみ出てしまったんでしょうか。 「幅」が意味するところ 実はCSSの仕様が定めるところの「幅」というのが、我々が視覚的に認知している「幅」と異なっているのが原因です。 CSSではこんなものを定めています。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く