[B! CSS] IndigoHawkのブックマーク

IndigoHawk id:IndigoHawk

CSSに関するIndigoHawkのブックマーク (43)

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

CSS

SCSS

あとで読む
リンク
LINE風の吹き出し会話が簡単にできるCSSを作ってみた（はてなブログ） - 夜中に前へ
こんばんは、夜中たわしです。今回は主にはてなブロガー向けの記事です。前回の記事のためにLINE風の表現ができるCSSを作ったんですが、それのやり方が知りたいという熱い声︵1件︶があったので、公開することにしました。他のサービスでも使用可能ですが、はてなブログ向けの導入方法として紹介します。紹介するCSSでできることできないこと制作背景・前置き注意事項 CSSにコードを追加︵その1︶ CSSにコードを追加︵その2︶会話形式CSSを導入している場合使用方法おわりに紹介するCSSでできることこれから紹介するCSSでできる表現はこんな感じですなるほどしいたけ　しいたけそのしいたけの人は一体？わかりませんなんか料理が出てきたこのようにLINEのグループ会話、に近い表現ができます。補足‥このしいたけは私が撮影したものです一応、画像じゃないですよ。テキスト部分など
IndigoHawk 2017/04/24
CSS

アイコン

あとで読む

Webデザイン

line
リンク
Griddy - CSS Grid System Education Tool
Learn the CSS Grid Spec
IndigoHawk 2017/04/19
CSS

あとで読む

Webサービス

レイアウト
リンク
これはすごい！メディアクエリなしでレスポンシブを実装するCSSトリック5選
メディアクエリーのようにビューポートではなく、コンテナの幅に応じてレイアウトを柔軟に調整するテクニックを紹介。calc関数を上手に活用した、マニアックなCSSトリックたちです。はじめに、タイトルとは裏腹にこの記事は、メディアクエリ不要論を唱えたり、メディアクエリを批判したりするものではないことを伝えておきます。メディアクエリはとても使い勝手が良いので、私はいつもいろいろなことに使っています。とはいえ、メディアクエリでレスポンシブWebデザインにおける課題すべてを解決できるわけではありません。要素の配置はビューポートではなくコンテナの寸法に基づいて変更するのが望ましい場合がよくあります。この課題を解決するためにエレメントクエリのコンセプトが誕生しました。とはいえエレメントクエリは実際まだ納得のいくものになっていないので、Mat Marquisはこのコンセプトにおける課題を示し、改良してc
IndigoHawk 2017/03/29
CSS

レスポンシブ

テクニック
リンク
よこ並びのCSS。
スマホサイトが優勢な昨今、要素をよこ並びにする機会は減ってきているのかもしれないけれど、大きい画面で見るサイトでは、ナビゲーションやタブや、商品一覧など、よこ並びにレイアウトする機会はまだまだあるんじゃないでしょうか。そんな﹁よこ並びにするためのCSS﹂も、やり方はさまざま。お馴染みのやつから、新参者まで、順番に見ていくことにします:)。よこ並び？そう、よこ並び。例えばボタンを横一列に並べたり。商品の情報なんかだと、横に3つずつ並べて改行して、多段に並べる場合もありますね。偏︵ひとえ︶に﹁よこ並び﹂と言えど、CSSにはそのやり方がたくさんあるんです:o。導入この記事で紹介するよこ並びの方法は以下の通り。 CSSの歴史的な背景から、最初はfloatプロパティを使った方法を紹介します。 float︵フロート︶要素を左右へ寄せるためのプロパティ。後続する文章︵テキスト︶などのインラ
IndigoHawk 2017/02/16
レイアウト

あとで読む

CSS3

web制作

webデザイン

css
リンク
イマドキのコーダー環境構築2016
CSS Nite LP47 Coder's High 2016 http://cssnite.jp/lp/lp47 「イマドキのコーダー環境構築」で発表したスライドです。 ※スライド上のURLリンクは効かないので、下部文字起こしから飛んでください。Read less
IndigoHawk 2016/11/02
イマドキ

CSS

gulp

sass

web制作
リンク
Stylus
Stylus Expressive, dynamic, and robust CSSAn expressive, robust, feature-rich CSS language built for Node.js
IndigoHawk 2016/10/24
CSS

node.js

Stylus
リンク
コーダー白書2016 集計データを公開いたします｜コーディング専門プロダクション FLAT
CSS Nite LP47「Coder’s High 2016」で発表した「コーダー白書2016」のアンケート結果を公開いたします。コーダー白書2016 業務でHTMLコーディングをしている方を対象にしたアンケートを実施し、 CSS Nite参加者、ネットからの投票で401名の方にご協力いただきました。コーダー白書全結果 http://wd-flat.com/coder/enquete2016.pdf 更新履歴 2016/10/02 追加加筆 70〜77ページ男性女性・職種・働き方・年代別の平均年収を追加しました。コーダー白書アンケート項目回答者属性性別 / 業務 / 年齢 / コーディング歴 / 働き方 / メイン業務 / スマートフォン機種技術全体編経験がある技術 / 使用している技術 / 使用したい技術 / バージョン管理技術コーディング編メインエディタ
IndigoHawk 2016/10/06
コーディング

CSS

event

あとで読む

技術
リンク
20160930 フロントエンド高速化業務編 (社内勉強会)
スタートアップやプロダクトの成功に必要な「アイデア×プロダクト×実行×チーム×運」の 5 つの項目について解説した概要のスライドです。急成長するプロダクトの初期に役立てていただければと思います。プロダクトマネージャーやスタートアップの CEO の方向けにどうぞ。 ※ Japan Product Manager Conference 2016 の登壇資料です
IndigoHawk 2016/10/06
フロントエンド

高速化

javascript

jquery

web制作

CSS
リンク
9,000名を超す世界のWebデベロッパーが回答した【CSS】の「いま」と「これから」
先日9,000名を超すWeb開発者からアンケート回答を得た調査﹁State of Javascript 2016[原文‥英語]﹂の結果が公表されました。その名の通りこの調査結果はJavascriptまわりのフレームワークやAPIなどに関するアンケート調査なのですが、最近ますますJavaScriptとセットで使われることが多くなった﹁CSS﹂に関する調査項目もありました。ここではその﹁CSS﹂に関する調査結果をピックアップしてご紹介します。この手の調査で9,000人超もの母集団があるアンケート調査というのも珍しいので、ぜひご参考ください。 CSSのフレームワークやプリプロセッサの使用状況上表を簡単に説明しておくと、︵色︶‥ピンク﹁使ったことがあり、今後も使うつもり﹂、薄いピンク﹁使ったことがあるが使うつもりはない﹂、水色﹁聞いたことがあり学ぼうと思っている﹂、薄い水色﹁聞いたことがな
IndigoHawk 2016/10/05
CSS

Webデザイン

フロントエンジニア

デベロッパー
リンク
変態的 CSS トリック
多少複雑なデザインでも、画像や JavaScript には頼らず、CSS で実現させる。そこにはもはや手軽さなどは存在しない。あるのは男のロマン。
IndigoHawk 2016/08/29
HENTAI CSS TERMINATED

CSS

web

web制作

プログラミング
リンク
HTML5/CSS3とjQueryでマテリアルデザインなタブを作る | ITハット
HTML5/CSS3とjQueryでマテリアルデザインなタブを作るだいぶ前にGoogleがマテリアルデザインを発表しましたよね。フラットデザインに階層を追加した真新しいデザインです。ですが、僕はまだ案件でマテリアルデザインを一度も使ったことがありません。なんとなくですが使いづらいですよね。アプリとかなら利用しやすそうですが。そこで、今回はマテリアルデザインを使ったタブを作ったので紹介します。タブ機能を作るデモ
IndigoHawk 2016/06/17
マテリアルデザイン

CSS

タブ

*あとで読む
リンク
Hamburgers
Table of Contents Usage Sass Customization Accessibility Browser Support Usage Using Hamburgers for your site is easy (well, that was my intention anyway). Download and include the CSS in the <head> of your site: <link href="dist/hamburgers.css" rel="stylesheet"> Add the base hamburger markup: <button class="hamburger" type="button"> <span class="hamburger-box"> <span class="hamburger-inner"></spa
IndigoHawk 2016/05/17
あとで読む

CSS

ハンバーガー

メニュー
リンク
最適なCSSの横並びはどっち!? Flexboxとfloatのパフォーマンス比較 - ICS MEDIA
ボックス要素の横並びをCSSで行う場合、皆さんはどうしていますか？　従来知られているfloatプロパティを使った方法の他に、CSS3から﹁Flexbox﹂を使用する方法も選択肢として加わりました。では、Flexboxとfloatはどちらの方が処理速度が早いのでしょうか？本記事ではこの2つをパフォーマンス面から比較し、最適なボックスレイアウト手法について検証します。 Flexboxとは？ Flexbox(CSS Flexible Box Layout Module)は、floatに代わる新しいボックスレイアウト方法。横並びはもちろん、ボックスを均等位置に配置したり、整列や中央揃えなど、柔軟なレイアウトが可能です。今やすべてのモダンブラウザーで使用することができ︵※1︶、Bootstrap4の新たなレイアウト方法として採用される︵※2︶等、次世代の標準となっていくであろう技術です。 ※1
IndigoHawk 2016/04/05
CSS

レイアウト

あとで読む
リンク
Ettrics. A full-stack creative agency.
We collaborate with early stage founders and industry leaders to design and develop scala ble web experiences, systems, campaigns and integrations.
IndigoHawk 2016/01/28
CSS

transform

JavaScript
リンク
CSSの素晴らしいアイデアが満載！2015年スタイルシートのテクニックのまとめ
今年もCSSの進化がすごいです！次のプロジェクトに使ってみたくなるようなワクワクする素晴らしいアイデア満載のスタイルシートのテクニックを紹介します。 CSSアニメーションはより洗練され、単に要素を動かして楽しむだけでなく、意味のある動きとしてより効果的に利用されるものが目立ちました。まずは、アニメーションの表現もここまでできるのかと驚いた﹁Marvel Logoanimation﹂から。 ※一部は、実際に動作するデモのコードを埋め込んでいます︵全部をコードにしたらページが重すぎました︶。
IndigoHawk 2015/12/11
アイデア

テクニック

アニメーション

CSS3

CSS
リンク
http://www.smaroomch.net/web-design-10/
IndigoHawk 2015/11/26
薄い

webデザイン

html

あとで読む

design

CSS
リンク
Bootstrap Studio - The Revolutionary Web Design Tool
A powerful desktop app for creating responsive websites using the Bootstrap framework. Run Browser Demo Bootstrap Studio is a powerful desktop app for designing and prototyping websites. It comes with a large number of built-in components, which you can drag and drop to assem ble responsive web pages. The app is built on top of the hugely popular Bootstrap framework, and exports clean and semantic
IndigoHawk 2015/11/06
webdesign

CSS

web制作

ライブラリ

bootstrap
リンク
USWDS: The United States Web Design System
Official websites use .gov A .gov website belongs to an official government organization in the United States. Secure .gov websites use HTTPS A lock ( Locked padlock icon ) or https:// means you’ve safely connected to the .gov website. Share sensitive information only on official, secure websites.
IndigoHawk 2015/10/02
design

webデザイン

webdesign

css
リンク
[CSS]スニペットに登録しておくべし！繊細で美しいグラデーションをコピペで利用できる -GRADIENTS
aqua .bg-aqua-gradient { background: rgba(127,219,255,1); background: -webkit-linear-gradient(top, rgba(127,219,255,1) 0%, rgba(82,140,163,1) 100%); background: linear-gradient(to bottom, rgba(127,219,255,1) 0%, rgba(82,140,163,1) 100%); } blue .bg-blue-gradient { background: rgba(0,116,217,1); background: -webkit-linear-gradient(top, rgba(0,116,217,1) 0%, rgba(0,65,122,1) 100%); background: linea
IndigoHawk 2015/10/01
グラデーション

CSS

webデザイン
リンク
1 2 3 次のページ