実装がどんどん簡単になっている！スクロールに連動するCSSアニメーションを与えるスクリプト -Delighters
コンテンツが横からスライドしたり、カードが追従するように表示されたり、スクロールに連動するCSSアニメーションを簡単に実装できるスクリプトを紹介します。 汎用性に非常に優れており、デスクトップ・タブレット・スマホを完全にサポートしています。また、他のスクリプトやスタイルシートに依存はなく、React、VueJS、Angular、jQueryなどと一緒に利用することもできます。 Delighters Delighters -GitHub Delightersの特徴 Delightersのデモ Delightersの使い方 Delightersの特徴 DelightersはCSSアニメーションを加えて、ユーザーがスクロールするのを楽しませるスクリプトです。 超軽量 1.43kBの超軽量スクリプトで、他のスクリプトやスタイルシートに依存はありません。 フレームワークにとらわれない React、V
いまさら聞けないCSSレイアウトの定番手法 Flexbox再入門
floatレイアウトはすでに過去のもの。Webサイトの要素の位置を操作するならFlexboxが定番となりました。出遅れたWeb制作者のために基本を解説します。 テーブルタグが唯一のWebページをレイアウトする手法だった頃を覚えていますか？ 表形式のデータを表示するための機能をレイアウトに無理やり使っていたので、タグ名の意味と用途が異なるひどい状態でした。新しい「道具」が必要になり、「正しい」レイアウト方法としてfloatと絶対位置指定による手法が登場しました。 しかしテーブルタグ同様、floatと絶対位置指定の目的はWebサイトを整形することではありません。 主要ブラウザーがCSSで機能する頼れるレイアウトエンジン、CSSグリッドレイアウトをサポートしました。非対応のブラウザーに対する互換措置をすれば十分使えます。 互換性確保の方法は、Flexboxベースのレイアウト（W3Cが好む言い方だ
Bootstrapはすでに下火に——海外の開発者1600人に聞いたCSS開発のいま
WPJが提携するWeb開発者向けメディア「SitePoint」ではCSS開発者を対象にした大規模なアンケート調査を実施しました。その結果から、いま何を学ぶべきかが見えてきました。 CSS開発の現場で実践されている習慣、CSSに関する知識の量、理解度などの情報を集める目的で実施した「究極のCSS調査」には、6週間で1600名以上からの回答が寄せられました。このほど集計が完了したので、結果を発表します！ フォローアップコメントと考察、昨年の結果との比較、コメント欄に寄せられた質問の回答も掲載します。 アンケートの結果は以下を参照してください。 結果は上下の矢印でめくりながら見られます。 調査の目的 まず、読者からは調査の目的とフィードバックで得られることについて、質問がありました。私がSitePointのエディターとしてもっとも優先しているのは、読者を理解することです。いろいろな技術に関して、
「変態的CSS」の作者Kiteさんにいま気になる技術を聞いてきた
デザインとエンジニアリング、デザインとビジネスなど、クリエイターにも従来の仕事の範囲を超えた知識と発想が求められる時代。連続インタビュー企画「Borderline」では、ブログ「テクニカルクリエイター.com」を運営する小島芳樹さんが、注目のクリエイターが日々どんなことを考えているのか？ オン／オフの両面からお話を伺います。 第6回は、Kiteさんこと株式会社キテレツのCEO古賀海人さん。音楽からWebの世界へ飛び込んだ異色のキャリアについて聞いた前編に続き、後編では昨年話題になった「変態的CSS」のこと、いま注目している技術についてお話いただきました。 変態的なCSSはどうやって生まれる？ 小島 ここからは、Kiteさんが今後、どんなことをやっていきたいかを。去年、WPJで『「うわっ、そのコード変態的すぎ…」と叫びたくなるCSSトリック10選』という記事が話題になりましたが、Kiteさん
Minify Resources (HTML, CSS, and JavaScript) | PageSpeed Insights | Google for Developers
Stay organized with collections Save and categorize content based on your preferences. This rules triggers when PageSpeed Insights detects that the size of one of your resources could be reduced through minification. Overview Minification refers to the process of removing unnecessary or redundant data without affecting how the resource is processed by the browser - e.g. code comments and formattin
CSSが苦手な人、CSSを書く時間がない人に最適！見栄えのよいページを簡単に作成できるスタイルシート -sakura
CSSの知識は必要なく、そして時間もない時に、簡単にいい感じのデザインになるCSSのフレームワークを紹介します。 CSSが苦手な人に、バックエンドで作業する用の即席プロトタイプにも最適です。 既存のHTMLに一行、もしくは二行追加するだけで簡単に利用できます。 sakura sakura -GitHub sakuraの特徴 sakuraのデモ sakuraの使い方 sakuraの特徴 かなり古くさいデザインのページでも、モダンなページでも、わずか数秒で見栄えのよいページにすることができます。 使い方は簡単。外部ファイルを加えるだけで、既存のHTMLでさえも見栄えのよいデザインを適用できます。 即席のプロトタイプにも最適。特にバックエンドで作業する時に、簡単にスタイルを適用できます。 友達や叔母さんなど、CSSが難しいという人にも美しいブログが構築できます。 他のすべてのCSSフレームワーク
知っておくとかなり便利！Chromeのデベロッパーツールであまり知られていない実用的な機能とテクニックのまとめ
Chromeのデベロッパーツールは、Web制作に欠かせないといっても過言ではありません。DOMインスペクター、スタイルパネル、JavaScriptコンソールなど基本的な機能だけでも便利ですが、さらに便利になる機能も数多くあります。 デベロッパーツールを使って、Webページやアプリの制作・デバッグのワークフローが大きく改善される実用的で便利な機能とテクニックを紹介します。 Mastering Chrome Developer Tools: Next Level Front-End Development Techniques 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 01. ダークテーマ 02. 要素をすばやく選択できる選択モード 03. グローバル変数として格納 04. アニメーション用のツール 05. 要素の疑似状態をシ
日本語対応！CSS Flexboxのチートシートを作ったので配布します | Webクリエイターボックス
日本語対応！CSS Flexboxのチートシートを作ったので配布しますFlexboxとはFlexible Box Layout Moduleのことで、その名の通りフレキシブルで簡単にレイアウトが組めちゃう素敵ボックスです。現在ほとんどすべての最新ブラウザーでFlexboxをサポートしており、Flexboxを使ったレイアウト組みが今後のWebデザインのスタンダードとなるでしょう。 Web クリエイターボックスでは以前から Flexbox の使い方について紹介してきたのですが、最近 Flexbox が浸透してきたこともあってか各プロパティの使い方について質問される機会が増えてきたので、チートシートとしてまとめてみました。この記事ではなるべく画像メインでプロパティーの使い方を紹介したいと思います！ 動画で学ぶ CSS Flexbox この記事は YouTube 動画でも解説しています。動画派の方
Awesome JavaScript : 素晴らしい JavaScript ライブラリ・リソースの数々 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 元記事: Awesome JavaScript Awesome List in Qiita Awesome Ruby Awesome Java Awesome Node.js Awesome Python Awesome Go Awesome Selenium Awesome Appium パッケージマネージャ JavaScript ライブラリをホストし, それらを取得してパッケージ化するためのツールを提供します npm - npm は JavaScript のためのパッケージマネージャです. Bower - Web のためのパッケージ
PostCSS まとめ - Qiita
僕はPostCSSは開発当初から追いかけていて、GitHubでPostCSSチームのメンバーのひとりだったり、実際にPostCSSを使ってプラグインやツールをいくつか作ったり、ブログや雑誌で記事を書いたり、勉強会等で話したりしています。 本記事では、自分が知っているPostCSSについての事柄を共有します。 PostCSSとは何か PostCSSとは、ロシア人の Andrey Sitnik という人が開発している、Node.js製の「CSSツールを作るためのフレームワーク」です。PostCSS製のツールとして、ベンダープリフィックスを自動で付与する「Autoprefixer」、未来のCSSの構文の一部を今のブラウザで解釈できるようにする「cssnext」、カスタマイズ性に富んでいるCSSリンターである「stylelint」などが有名です。 PostCSSは2018年2月、かなり広く使われて
Web開発者、アプリ開発者に捧ぐReactの提唱する"learn once, write anywhere"はどこまで本当なのか？ - Qiita
最初に この記事は React Native Advent Calendar 2016 23日目です。 釣りなタイトル失礼します。 以前、FacebookまじでReact Nativeやるってよ！でFacebookにとどまらず、Instagram, airbnbのアプリがReact Native製に置き換わっていることを投稿しました。 個人的に大きいニュースだと思ってます。 なぜなら安定稼働しているiOS/Androidのナレッジとチームを棄ててまでも、乗り換えを選択する理由がReact Nativeにはあると言ってるものだからです。 様々な理由があると思いますが、大きな要因は"learn once, write anywhere"でレバレッジが効いていて、 優秀なWeb技術者(React)がアプリ開発に渡りやすかった ナレッジがたまり易いチーム構造に変えることができた ため、置き換えコス
npm-scripts で作るフロントエンド環境の構築 | mediba Creator × Engineer Blog
制作部の金森です。 フロントエンドエンジニアとして働き初めて丸7ヶ月が経過しました。 この記事は mediba Advent Calendar 2016 の 16日目です。 フロントエンド開発の現場においてタスクランナーを使わない日はないほど重要なツールになっています。 みなさんはタスクランナーに何を使っていますか？ 最新のフロントエンドツール使用調査結果からThe State of Front-End Tooling 2016 - Results に拠ると、 タスクランナーを使用しない人は 19.5% から 10.97% に減っているGrunt を好む人は 27.5% から 11.75% に減っているgulp を好む人が 43.69% と一番多いnpm-scripts を好む人は 22.8% 増え 25.95% にという結果が出ており、gulp が一番支持されているものの npm-scr
なぜ Bootstrap をやめたのか
Mimizuku Advent Calendar 7日目の記事です（そろそろ誰か参加しても良いのよ…）。今日から数日は CSS に関連する話を書いていきたいと思います。今日は CSS フレームワークの選定について。 Habakiri では Bootstrap を使用していました。デファクトスタンダードといってもいいくらい普及していますし、自分自身も慣れていたためです。 実際に使ってみて、はじめのうちは良かったのですが、だんだんとストレスに感じる部分がでてきました。スタイルの指定が濃すぎるなと感じるようになってきたのです。例えば Bootstrap で主要なボタンを配置する場合、<a class="btn btn-primary">ボタン</a>という感じになりますが、この場合、青くて枠線付きのボタンが配置されることになります。管理画面とかならそのままでも良い場面も少なくないかもしれませんが
Mimizukuの基本設計
Mimizuku Advent Calendar 5日目の記事です。土曜日に SaCSS に登壇させていただきまして Mimizuku Advent Calendar の紹介もしてきましたがどうでしょうか。いまだ参加者は僕だけです。 ということで今回は Mimizuku の基本設計について書きます。 メインテンプレート といっても何について書けば良いのかあまりピンときていないので（自分でテーマ決めたのに…）、特徴的な部分について書こうと思います。 Mimizuku はsingle.phpやpage.phpなどのメインとなるテンプレートには HTML を書かずコントローラーとして使い、HTML は別途用意したレイアウトファイル、ビューファイルに記述するようにしています。これについては2日めの記事「WordPress のテンプレートをレイアウトファイルとビューファイルに分離するメリット」に詳し
脱Bootstrap！軽量シンプルな最新CSSフレームワーク「Cutestrap」に惚れた！
もはやBootstrapがデファクトになっているCSSフレームワーク界に、ちょっとかわいい期待の新星が登場。 軽くてシンプル、すぐに使えるCutestrapのチュートリアルをいち早くお届けします。 Cutestrapは最新のCSSフレームワークです。この記事ではCutestrapの機能を紹介し、Cutestrapを使って次のような簡単な1ページのHTMLテンプレートを試しに構築してみます。 Cutestrapの特長 たいていの優れたWeb開発ボイラープレートやフレームワークと同様、Cutestrapは開発時間を短縮し、繰り返しタスクを削減します。ドキュメントページのキャッチコピーによると、Tyler ChildsのCutestrapは「小粋（sassy）でしっかり主張するCSSフレームワーク。Bootstrapの小さなかわいい（tiny）交代選手」とのことです。Webサイトとアプリのクイッ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
わかばちゃんと学ぶ Webサイト制作の基本 : 湊川 あい : 本 : Amazon.co.jp
Ringing-web.com
使いやすいWordPressのためのCSSのつくりかた