[B! css] araproのブックマーク

[CSS]レスポンシブ対応の最新版！サイズが不明な要素を天地左右の中央に配置するスタイルシートのまとめ

div要素やp要素に画像やテキストなどを配置した高さや幅のサイズが分からない要素を外側の容器の高さが不明でも天地左右の中央、ビューポートの中央に配置するスタイルシートのテクニックを紹介します。 Centering horizontally and vertically in CSS float, transf orm, position, display:flex;などを使ったテクニックが紹介されており、ページの実装に合わせて、実装方法を決めるとよいでしょう。デモではsection要素がコンテナに、div要素が中央に配置されています。

arapro 2017/07/31

css

リンク

5000兆円欲しい！.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-

arapro 2017/07/20

css

リンク

CSSの引き出しを増やしておこう！最近見かけたスタイルシートのアイデア・テクニックのまとめ

最近のWebサイトやスマホアプリで見かけるテクニックをはじめ、Web制作者としてよい刺激になるスタイルシートを巧みに使ったさまざまなアイデアを紹介します。イラスト: Girls Design Materials CSSのみで実装されているのものもたくさんありますが、JavaScriptやSVGなどを必要に応じて使用されているものもあります。

arapro 2017/06/20

css

リンク

CSSアニメーションを使いこなすために知っておきたい5つのこと - Qiita

はじめに keyframesを使ったCSSアニメーションは描画パフォーマンスが良く、ヌルヌルな動きが簡単に実装できます。最近旧IEのサポートが切られたこともあり、今後は触る機会もより増えてくるかと思います。そこでCSSアニメーションをガリガリ使っていく上で、これは覚えておきたい！と思ったことをまとめてみました。何かの参考にでもなれば幸いです。基本的なプロパティや使い方などは省略しますサンプルコードではprefixを省略しています 5つとは単に私が思いついた数なので、深い意味はありません目次はじめに複雑なイージングはChrome Devtoolsで簡単に実装できるイージングはkeyframesの中で細かく再定義できるカンマ区切りでシーケンシャルに表現するコマ送りアニメーションにはsteps()が便利アニメーションのcallback（イベント）を取得する終わりに複雑な

arapro 2017/04/30

リンク

Autoprefixer CSS online

What is it Autoprefixer online — web repl for original Autoprefixer. It parses your CSS and adds vendor prefixes to CSS rules using values from Can I Use. It is recommended by Google and used by Twitter and Taobao. How does it work The Autoprefixer uses data on the popularity of browsers and support for vendor prefixes by browsers. Based on this information, it arranges and deletes the prefixes. I

arapro 2017/03/29

css

リンク

[コピペ推奨] 最高に楽をしたい人のためのCSSテクニックまとめ | Supership Tech Blog

こんにちは。Supership デザイナーのハガです。今回はcssのお話です。皆さんはcssで、あるデザインを実現しようとした時、あれってどうやるんだっけ？みたいな経験をしたことはありませんか？自分はよくあります。そんな時コピペするだけでokみたいなcssスニペット集があると嬉しいと思い、主に自分のためのメモ的な意味を多分に含みつつご紹介していきたいと思います。（今回紹介しているcss達は主にスマホのためのモダンなブラウザを対象としているため、ieのようなレガシーな感じはごめんなさい。） 10個のcssテクニックコアとなる部分はboldで表現しています。細字の部分はお好きに調整してください。 1.カルーセル<ul class="carousel"> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li>

arapro 2017/03/24

リンク

文字詰めできるCSSのfont-feature-settingsが凄い！日本語フォントこそ指定したい自動カーニング - ICS MEDIA

游ゴシックではプロポーショナルメトリクスは効果的 WindowsやmacOSに搭載されている游ゴシック体は、仮名が漢字に対してかなり小さめにデザインされています。游ゴシック体ではヒラギノ書体より字間が開いて見えてしまうため、プロポーショナルメトリクスを活用する効果は大きいです。 Webフォントにもプロポーショナルメトリクスは効果的デバイスフォントだけでなく、Webフォントでもプロポーショナルメトリクスに対応したOpenTypeフォントがたくさんあります。Webフォントに関しては記事「Webフォントサービスの徹底比較！和文フォントが使える5つのサービスの利点まとめ」を参考ください。 ▲左側は未指定（和文等幅）の状態でカタカナの開きが大きい。右側はプロポーショナル字形を適用した状態で、カタカナが詰まっている。対応環境：ほぼすべてのブラウザで利用可能これだけ便利なCSSですが、どれだけの

arapro 2016/12/01

リンク

[CSS]実はかなり便利！意外と見落とされがちなスタイルシートのテクニックのまとめ

Webはその進化が早いと言われ、中でもCSSは日々、新しいテクニックや驚くべき実装方法が発表されています。新しいものに目を向けることはもちろん大切です。しかし、すでに利用可能なもので見落としている有用なテクニックがあるかもしれません。有用なのに、意外と見落とされがちなCSSのテクニックを紹介します。 9 Underutilized Features in CSS 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 1. レスポンシブ対応に便利な「calc()」 2. 目からウロコの「@media」の使い方 3. カラー指定を変数でおこなえる「currentColor」 4. フォームにかなり便利「:valid, :invalid, :empty」 5. ナンバリングするためにol要素は必要ない「counter」 6. 中身が不明な

arapro 2016/10/26

リンク

CSShake

Classes The basic collection Bs Basic Shake Ss Slow Shake Ls Little Shake Hs Hard Shake ⇄ Fixed Horizontal ⇵ Fixed Vertical ↻ Fixed Rotation Os Opacity Shake ✌ Crazy Shake ℇ Constant Shake % Chunk Shake Launch the animations from the parent with class 'shake-trigger' (customizable) Install Get started... $ git clone https://github.com/elrumordelaluz/csshake.git or $ bower install csshake or $ npm

arapro 2016/10/04

リンク

プロが実践するモダン CSS の書き方入門テクニック20選まとめ

海外サイトTutorialzineで公開された「20 Protips For Writing Modern CSS」の著者 Danny Markov より許可をもらい、翻訳転載しています。この記事では、CSSスタイリングで実践したい、便利な20種類のテクニックをご紹介しています。CSSをはじめたばかりの初心者のひとにも合った内容も多く、あまり知られていない少しだけ高度で、より実践的なCSSテクニックまで学ぶことできます。これらのテクニックを利用することで、今後のウェブ制作をよりスムーズに、快適に行うことができるでしょう。コンテンツ目次 1. 縦方向のマージン幅に気をつけよう。 2. レイアウトに Flexbox を利用しよう。 3. CSS リセットをしよう。 4. Border-box をすべてに適用しよう。 5. イメージファイルは背景に適用しよう。 6. リストテーブル用ボーダー

arapro 2016/09/05

リンク

「うわっ、そのコード変態的すぎ…」と叫びたくなるCSSトリック10選

多少複雑なデザインでも、画像や JavaScript には頼らず、CSS で実現させる。そこにはもはや手軽さなどは存在しない。あるのは男のロマン。 https://speakerdeck.com/ixkaito/bian-tai-de-css-torituku ということで、「変態的CSSトリック」が流行っているようなので、JavaScriptや画像を使わない変態的なCSSテクニックを探してみました。何を持って変態的とするかは個人の性癖によるところが大きいので、あくまでも主観ですが。 CSS counterで数字を計算実はCSS 2からあるcounter系のプロパティ。順番に番号を振れる便利なプロパティですが、意外とマイナーな存在では？　次のデモは、リンクの数だけページネーション番号を自動的に付与するもの。うん、便利ですね。え、でもこれだとノーマルっぽい？　じゃあこちらでどうでしょう。

arapro 2016/09/01

css

リンク

flexboxのバグに立ち向かう（flexboxバグまとめ） - Qiita

注）本文中の「コンテナ」「アイテム」について本文中でいう「コンテナ」「アイテム」は、flexコンテナとflexアイテムのことを指しています。コンテナ display: flexや、wrap指定などをする複数のアイテムを含むアイテム flex: 1 0 0%などの指定をする 1. アイテム潰れる問題（Safari） Chrome Safari 潰れてますね。起きる条件 Safari なぜコンテンツの最小サイズを尊重してくれない模様どうすればいいのか flex-shrinkに0を指定 flex-basisにautoを指定（デフォ値なので、指定がなければそのままでOK） Safari10にて修正済み（つまり、SierraとiOS 10以降では対応不要） 2. align-it ems:center はみ出す問題 Chrome IE11 はみ出てますね。起きる条件 IE10-11 f

arapro 2016/08/15

リンク

手軽に実装！Webサイトにアニメーションを加えられるCSS＆JavaScriptライブラリー

2019年2月22日 CSS, JavaScript, jQuery 人間の目は動きを感知すると反射的に目が動き、意識をそちらに向けるそうです。そのため、アニメーションは要素をほんの少し動かすだけで注目を集められるという強い力を持っています。今回はそんなアニメーションを手軽に実装できるCSSやJavaScriptのライブラリーをいくつか紹介します。 ↑私が10年以上利用している会計ソフト！アニメーションを使う時に気をつけたい事アニメーションを使えば、前後の画面に繋がりを持たせたり、ユーザーに次の動きを予測させ、安心感を与えることができます。よく使われるものが、ふんわりと画面や要素を移り変えるフェードという効果です。目の前の物が一瞬で消え、パッと新しい物が現れる…なんて、現実世界ではありえませんよね。もちろん、単純に見ていて楽しい、かっこいい、なんていう刺激を与えられます。しかし、ユー

arapro 2016/07/13

リンク

[CSS]知ってると便利！「:target疑似クラス」を使ったスタイルシートのテクニックと注意点

:target疑似クラスは、ターゲットとなるアンカーリンク先の要素を表します。例えば、長い記事をユニークなidでセクションに分け、それぞれのセクションにアンカーリンクを設置します。:target疑似クラスを利用すると、ターゲットとなるセクションごとにスタイルを適用することができます。 :target疑似クラスを使ったスタイルシートのテクニックと注意点を紹介します。 The :target Trick :target以外の便利な疑似クラス・疑似要素については、下記のページを参考に。使い方をしっかりマスターしておきたい便利な5つの疑似クラスと疑似要素下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 :target疑似クラスを使って、コンテンツを表示・非表示 :target疑似クラスを使って、ナビゲーションをスライドアウト :target

arapro 2016/07/13

リンク

Webデザインの背景作りに活用したいパターンジェネレーター10選

Webデザインで背景を作成するときは、基本的にPhotoshopなどでデザインしたものから画像を書き出し、CSSで繰り返し表示をします。一方でPhotoshopを使わずにブラウザ上でコーディングしながらサイトを作るという方法も最近ではよくある話。そんなときに活用したいのが、Webサイトの背景を簡単に作れるパターンジェネレーターです。ブラウザ上でパターンをチェックしながら作成し、簡単に利用することができるので、背景作りに困ったらこちらで紹介するパターンジェネレーターを使ってみるのをオススメします。この記事ではWebサイトの背景作りにおすすめしたいパターンジェネレーターを紹介します。簡単に背景を作れるパターンジェネレーター patternify こちらはピクセルを埋めていくことでシンプルなパターンを作成するツール。モノクロだけでなくカラーパターンも作れます。作ったパターンはcssにコード

arapro 2016/04/18

リンク

Home - Microsoft Answers

arapro 2016/04/18

リンク

CSS Shapesでテキストを回り込ませるレイアウトを表現 | Webクリエイターボックス

2019年5月16日 CSS Webでのデザインはどうしても四角形のボックス型になりがち。印刷物だとテキストの配置ももっと自由にできますよね。今回はテキストを画像などの形にあわせて回りこませたり流しこんだりできちゃう CSS Shapes について紹介します！ ↑私が10年以上利用している会計ソフト！ CSS Shapesとは CSS Shapesを使えば、円形や多角形、画像に合わせて、そのまわりに float で横並びにしているテキストを回り込ませて配置できます。雑誌や印刷物の広告などでみかけるレイアウトのひとつですね！これがWebでも表現できるようになれば、デザインの幅がグンと広がるのではないでしょうか？通常、テキストと円形の要素を横に並べると、この図のように四角形をベースとした配置になり、円の右上・左上・左下・右下には空白ができます。そのスペースを shape-outside プロ