タグ

cssに関するtyruのブックマーク (202)

  • perspective - CSS: カスケーディングスタイルシート | MDN

    CSS チュートリアル CSS の基 CSS の第一歩 CSS の第一歩の概要 CSS とは何か CSS 入門 CSS の全体像 CSS の働き 評価課題: 経歴ページのスタイル設定 CSS の構成要素 CSS の構成要素の概要 CSS セレクター Type, class, and ID selectors Attribute selectors Pseudo-classes and pseudo-elements Combinators カスケードと継承 Cascade layers ボックスモデル 背景と境界 書字方向の操作 内容のはみ出し CSS の値と単位 CSS における大きさの指定 画像、メディア、フォームの要素 表のスタイル付け CSS のデバッグ CSS の整理 評価課題: CSS の基的な理解度 評価課題: 素敵なレターヘッドの便箋の作成 評価課題: かっこいいボック

    perspective - CSS: カスケーディングスタイルシート | MDN
    tyru
    tyru 2018/07/20
  • perspectiveプロパティの意味と使い方

    perspectiveプロパティは、視点の距離を指定することでz軸に変形した要素の奥行きを表します。CSS3におけるperspectiveプロパティの意味と使い方、値の指定方法、サンプルコード、使用例について解説します。

    perspectiveプロパティの意味と使い方
    tyru
    tyru 2018/07/20
  • transform-styleプロパティの意味と使い方

    サンプルコード 以下の例では、親要素(class名にtransformedを適用)はy軸を中心に45度、子要素(class名にchildを適用)はx軸を中心に40度回転するように指定しています。 CSS div{ width: 150px; height: 150px; } .container { perspective: 500px; border: 1px solid black; } .transformed { transform-style: flat; transform: rotateY(50deg); background-color: rgba(255,0,0,0.8); } .child { transform-origin: top left; transform: rotateX(40deg); background-color: rgba(0,255,0,0.8

    transform-styleプロパティの意味と使い方
    tyru
    tyru 2018/07/20
  • Vue.jsとHTMLとCSSで3Dアクアリウムを作ってみた - Crieit

    ブラウザで見ることができる3Dアクアリウムを作ってみました。 この3Dの実装は基的にはHTMLCSSだけで出来ています。canvasも使っていません。Vue.jsも使っていますが、魚を泳がせたり視点を変更するための用途のため、3D描画自体にはあまり関係ありません。 記事の最後に操作できるCodePenを配置してあるので読むのが面倒な方はそちらを見てしまってください(大泣きしながら)。 作り方 HTML HTMLは単にそれぞれの素材を配置しているだけです。 <div id="app" @mousemove="onMouseMoved" @touchmove="onMouseMoved"> <div class="container" :style="rotation"> <img class="bg" src="bg.jpg"> <img class="water front" src=

    Vue.jsとHTMLとCSSで3Dアクアリウムを作ってみた - Crieit
    tyru
    tyru 2018/07/20
    CSS で 3D。transform-style: preserve-3d
  • box-shadowはもう古い?CSS新時代の「影の落とし方」

    長い間Webデザイナーが愛してやまないものの1つに*「box-shadow(ボックスシャドウ)」*があります。 Photoshopのような特殊なソフトウェアを使わなくとも、コードだけで影を落とすことができるという点で、Webデザイナーの中で大変重宝されていたプロパティです。 box-shadowの歴史は長く、2005年時点でW3C内でbox-shadowの草案が発表されました。影を落とす時に、影の長さや角度、色や透明度まで指定することができるので、この技術が登場した当初は感動した方も多いのではないのでしょうか。 しかしながら、box-shadowを使った影の落とし方は、登場から10年以上経過した現在、その使い所を考えていく必要があります。それはブラウザが様々なプロパティをサポートしたことが理由であり、影の落とし方を再考してみるのも大切です。 そこで稿では、CSS新時代の影の落とし方につい

    box-shadowはもう古い?CSS新時代の「影の落とし方」
    tyru
    tyru 2018/06/11
    べんり
  • CSS box alignment - CSS: Cascading Style Sheets | MDN

    tyru
    tyru 2018/06/08
  • Redirect

    tyru
    tyru 2018/04/24
    なんやこれ…すげえ。全 CSS らしい
  • 「出会えたことに感謝したいCSSベスト3」まとめ

    スダ氏 @sudarexyz 出会えたことに感謝したいCSSベスト3 1位 display: flex; 2位 box-sizing: border-box; 3位 height: 100vh; スダ氏 @sudarexyz justify-content: space-between; align-items: center; この辺も入れたかったけど全部FlexBox関係になっちゃうし、ランキングは今着手している案件に強く依存してる。 他の人のも見てみたい。 #出会えたことに感謝したいCSSベスト3

    「出会えたことに感謝したいCSSベスト3」まとめ
    tyru
    tyru 2018/04/17
    本当に役に立ったのだと flexbox, calc(), !important(すいません)。楽しいのは transition、:hover、:checked とか
  • Font Display プロパティを用いた FOIT/FOUT 最適化 | blog.jxck.io

    Update この検証から 2 年程のちに、 First Paint/First Contentful Paint を重視するため、全ての display プロパティは swap に統一した。 その他 WebFont に関連する検証は web font タグにまとまっている。 Intro Web Font 読み込み中の HTML 表示については、ブラウザデフォルトの挙動に依存していた。 フォントファイルサイズが大きい場合は、 FOIT/FOUT の問題が顕著になり、 JS を用いた回避策が利用されることも多かった。 これを解決するため、 CSS に font-display プロパティが作成され、実装が進んでいる。 各プロパティの違いと挙動、そしてサイトへの適用について解説する。 Loading Web Font Web Font は、特に日語のように文字数が多い場合、ファイルが大きく

    Font Display プロパティを用いた FOIT/FOUT 最適化 | blog.jxck.io
    tyru
    tyru 2017/12/15
  • これからのCSSはmargin禁止!?CSSグリッドレイアウトやコンポーネント指向なCSSについて、矢倉さんに聞いてきた!

    これからのCSSはmargin禁止!?CSSグリッドレイアウトやコンポーネント指向なCSSについて、矢倉さんに聞いてきた! 白石 俊平(HTML5 Experts.jp編集長) こんにちは、編集長の白石です。 この記事は、9月24日に開催されたHTML5 Conference 2017に登壇したエキスパートに、お話されたセッションのトピックを中心に語っていただこうとういものです。セッションの内容をより深く理解する手助けになるだけでなく、記事単体でも面白く読んでいただけることを目指しています。 今回お話を伺ったのは、ピクセルグリッドの矢倉眞隆さんです。 矢倉さんのセッション「まあまあ最近のCSSとつらくならないための書き方」に関するスライド資料は、こちらで公開されています。 インパクト大!CSSグリッドレイアウト概要 白石: では、まずは簡単に自己紹介をお願いできますか? 矢倉: 昨年(2

    これからのCSSはmargin禁止!?CSSグリッドレイアウトやコンポーネント指向なCSSについて、矢倉さんに聞いてきた!
    tyru
    tyru 2017/10/29
    「Can I Useには、Google Analyticsと連動させる機能がある」、コンポーネント作成の際の指針、メディアクエリとの相性、等
  • CSSのtext-overflowではみ出したテキストを「…」表示

    CSStext-overflowでellipsisを指定すると はみ出したテキストを、javascriptや、jsp、phpなどを使わなくても省略表示できます。 意外とIEでも6から対応しているので、仕事でも心置きなく使えます。 2014/05/10 制作日誌更新!ある日のランチ風景をレポート! 2014/05/08 movieに予告編xx版を追加しました 2014/05/05 制作日誌更新!主演のxxxxさんを直撃! text-overflowを有効にする4つの条件 text-overflowは、表示領域からテキストがはみ出した場合 末尾に省略記号の「…」を表示するかどうか指定するCSSプロパティです。 そのため、text-overflowが表示領域とはみ出しを認識できるよう 幅指定で「表示領域」をつくって 改行禁止やはみ出し禁止で「はみ出す」概念を準備しないと効果がありません。 幅指

    CSSのtext-overflowではみ出したテキストを「…」表示
    tyru
    tyru 2017/09/14
  • 謎のCSS総称フォントファミリーfangsongについて - 水底の血

    語向けフォントスタックの現状 - yuhei blog http://yuheiy.hatenablog.com/entry/2017/09/04/210650 上記ブログエントリーで、へーcss-fonts-4でsystem-uiなんて増えたんだ、ぐらいに意識が低いですが、 CSS Fonts Module Level 4 FPWD 2017-07-11 2.1.1. Generic font families https://www.w3.org/TR/2017/WD-css-fonts-4-20170711/#generic-font-families なんかボケッと眺めていると、上述のsystem-uiのほかに、emojiやmathといった(地味に何かに使えそうな)ものが加わっている。そして最後に、fangsongという総称フォントファミリーが記述されている。仕様にある説明とし

    謎のCSS総称フォントファミリーfangsongについて - 水底の血
    tyru
    tyru 2017/09/07
    「上述のsystem-uiのほかに、emojiやmathといった(地味に何かに使えそうな)ものが加わっている」
  • CSSの嫌なところを解決できる(かも)。そう、CSS Houdiniならね 20170825 we are_javascripters@10th

    20170825_we are_javascripters@10thで発表した内容です。 CSS Houdiniに関して調査したのでまとめました。 調査内容に少し不備があるかもしれないです。Read less

    CSSの嫌なところを解決できる(かも)。そう、CSS Houdiniならね 20170825 we are_javascripters@10th
    tyru
    tyru 2017/08/29
  • CSS3のブレンドモードを使えば、簡単にオーバーレイ等の描画モードを指定できる

    コーディング Kota Naito / 2017.07.20 CSS3のブレンドモードを使えば、簡単にオーバーレイ等の描画モードを指定できる PhotoshopやIllustratorなどのグラフィックツールに搭載されている、ブレンドモード(描画モード)と呼ばれる機能をご存知でしょうか。要素と要素を重ねあわせることで、様々な効果を作り出すことのできる機能なのですが、実はこのブレンドモード機能、CSSのみでも実装することができるんです。それを可能にするCSSプロパティがmix-blend-modeです。 非デザイナーだけど自社サイトの更新を任されているような方にとっては、大変便利なプロパティになるかと思います。オーバーレイ効果を使った簡単な合成画像を作るくらいであれば、わざわざ外注のデザイナーに任せなくても、自分でCSSを記述するだけで、簡単に合成画像を作れるはずです。 それでは、今回はこの

    CSS3のブレンドモードを使えば、簡単にオーバーレイ等の描画モードを指定できる
    tyru
    tyru 2017/07/21
  • 特徴で使い分けたいCSSレイアウト手法 - CSS Grid, Flexbox, floatの使い分け - ICS MEDIA

    ウェブページのレイアウトを作る手段には、CSSのGrid Layoutグリッド・レイアウト、Flexboxフレックス・ボックス、floatフロートなどがあります。 CSSのGrid Layoutはウェブページのレイアウト構築に役立ちます。従来floatやFlexboxでつくっていたようなレイアウトは、Grid Layoutで置き換えられるでしょう。しかし、すべてをGrid Layoutで置き換えるのが良いとはいえません。 float、Flexbox、Grid Layoutには、それぞれ特徴があるためです。特徴を使い分けていくことで、保守性の高いコーディングができるでしょう。記事では、float、Flexbox、Grid Layoutの特徴と使い分け方をサンプルを通して紹介します。 Grid Layoutの基については前回の記事『CSS Grid Layout入門』を参照ください。 この

    特徴で使い分けたいCSSレイアウト手法 - CSS Grid, Flexbox, floatの使い分け - ICS MEDIA
    tyru
    tyru 2017/07/10
    使い分け
  • PostCSSとstylelintの環境構築 - Qiita

    最近はSassからPostCSSへ移行する流れがあり、乗っかってみました。 ついでにstylelintCSSの構文チェックできる設定もしたのでまとめて紹介します。 PostCSSとは PostCSS自体を説明するには難しいですが目的としては と捉えてもらえば良いかと思います。 具体的に何ができるかというと 仕様策定中の次世代CSSの先取り ベンダープレフィックスの自動付与 独自拡張機能の追加 ファイルの結合・圧縮 などが挙げられます。 Sassとの比較 なぜSassからPostCSSへ移行する流れがあるかというと トランスパイル時間が短い 仕様策定中の次世代CSSを先取りできる 独自機能を追加できる などが挙げられます。 上記がメリットとならない場合は無理に導入する必要はないと思います。 例えば、すでにSassを導入していてスムーズに運用できているのであれば移行する必要はあまりなさそうで

    PostCSSとstylelintの環境構築 - Qiita
  • PostCSS まとめ - Qiita

    僕はPostCSSは開発当初から追いかけていて、GitHubでPostCSSチームのメンバーのひとりだったり、実際にPostCSSを使ってプラグインやツールをいくつか作ったり、ブログや雑誌で記事を書いたり、勉強会等で話したりしています。 記事では、自分が知っているPostCSSについての事柄を共有します。 PostCSSとは何か PostCSSとは、ロシア人の Andrey Sitnik という人が開発している、Node.js製の「CSSツールを作るためのフレームワーク」です。PostCSS製のツールとして、ベンダープリフィックスを自動で付与する「Autoprefixer」、未来のCSSの構文の一部を今のブラウザで解釈できるようにする「cssnext」、カスタマイズ性に富んでいるCSSリンターである「stylelint」などが有名です。 PostCSSは2018年2月、かなり広く使われて

    PostCSS まとめ - Qiita
  • そのベンダープレフィックス、いつまでつけてるの? - Qiita

    はじめに CSS3が格的に普及してきて使用する機会がどんどん増えていっているかと思います。 しかし、ブラウザのバージョンによってはベンダープレフィックスを付けないと効かないものもまだまだあります。 ベンダープレフィックスといえば、-webkit-、-moz-、-ms-、-o- などが思い浮かぶかと思いますが、ぶっちゃけるとほとんどのCSS3のプロパティはベンダープレフィックスなしでも大丈夫になってきました。 特にIE以外のブラウザというのは常に最新バージョンにアップデートされていくので、ベンダープレフィックスなしでどんどん対応していっています。 何でもかんでもベンダープレフィックスつけていませんか? とりあえず、すべてのブラウザに対応するようにベンダープレフィックスつけておけば安心なんて思わずに、必要のない記述はどんどん減らしていきましょう。 -o-* というベンダープレフィックスは既に

    そのベンダープレフィックス、いつまでつけてるの? - Qiita
    tyru
    tyru 2017/03/22
  • 使いそうで忘れそうなCSSプロパティ - Qiita

    Help us understand the problem. What is going on with this article?

    使いそうで忘れそうなCSSプロパティ - Qiita
    tyru
    tyru 2017/03/20
  • Animista - On-Demand CSS Animations Library

    AboutAnimista is a place where you can play with a collection of pre-made CSS animations, tweak them and get only those you will actually use. Animista started out as a small side-project of mine. As I was increasingly using CSS animations, I thought it would come in handy to have them organised in a meaningful and accessible way so that they can be easily reused on different projects. The idea wa

    Animista - On-Demand CSS Animations Library