Bootstrap 4のさまざまなコンポーネント・レイアウトの実装方法がすぐ分かる便利なチートシートBootstrap 4のグリッドの作り方、カード型コンポーネント、ナビゲーション、カルーセル、フォームなどの実装コードとどのように実装されるかが一枚のページにまとめられた、Bootstrap 4のチートシートを紹介します。
CSSやJavaScriptの新しい動き、フロントエンドのWeb制作の現状とこれから必要とされるテクニックや考え方
ここ1, 2年で、フロントエンドの制作事情は大きく変化してきました。 スマホの登場によりレスポンシブ対応からモバイルファースト・モバイルオンリーへ、HTMLは構造化され、CSSはモジュール単位で実装され、JavaScriptは多くのプロジェクトでjQueryではなく新しいライブラリやフレームワークが採用されるようになりました。 フロントエンドのWeb制作の現在の状況とこれから必要とされるテクニックや考え方を紹介します。 What is the Future of Front End Web Development? 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 ユーザーの期待値はますます上昇 JavaScriptの新しい動き ページ制作ではなく、全体を構築する ネイティブとWebの境界線はあいまい URLは依然として重要 パフ
CSSの読み込みを遅延させるJavaScriptコード
JavaScriptで外部ファイルの読み込みを遅延させる PageSpeed Insightsでサイトの速度チェックをすると、次のような提案が出てくることがあります。 スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する これは、headで読み込んだJavaScriptやCSSのファイルがコンテンツの表示を遅らせているためです。 ファーストビューに影響が出ないCSSは、コンテンツの描画後に読み込ませた方が良いでしょう。 ということで、外部CSSを読み込むタイミングを遅らせて、コンテンツの表示を速くしました。 当サイトではメインのCSSをインライン化しているのですが、外部ファイルも読み込んでいます。 使っているのは、Google FontsとFont AwesomeのCSSです。 導入方法 あらかじめGoogle FontsとFont A
FLOCSSを使ってCSSファイルを20,000行から9,000行にした話 - Qiita
入社して僕が最初にアサインされたのがこのプロジェクト。 サービスをスタートさせたのは今年の２月。最初は外注でとりあえずサービスを作ることに集中していたらしい... その結果、どのスタイルがどこに作用するか全く分からないCSSの魔境でした。 これでは簡単なページを追加するにも一苦労。 そこで、20,000行あるCSSファイルのリファクタリングに踏み切りました。 当時の問題 スタートアップのサービスなのでもっと機能を追加したり、変更したりしたいと言う要望は日に日に大きくなっていました。 一方で、実際に機能を作ったとしてもそれを view に反映させるのも日に日に苦しくなっていました。 僕たちを苦しめていた理由は以下の通りです。 どこにスタイルが作用しているか分からないので、CSSを安易に変更ができない。 新しい部品を付け足す時にCSSの影響範囲を考慮しなくてはならず、プロダクトのUI変更が困難
見逃せない！2016年大注目のWebサービス17選
EvernoteやDropboxなど、無料でも非常に使い勝手のよいWebサービスは数多く存在します。 そして、そうした便利なWebサービスは、毎日のようにリリースされます。 今回は、Web担当者なら知っておきたい、今年大注目のWebサービスを国内外問わずご紹介します。 ホームページを運用する上で、便利なサービスがたくさんあるので、ぜひチェックしてみてください。 プロトタイピングツール Webサイトのレイアウトを行うときに、PowerPointやIllustratorを使うWeb担当者も多いでしょう。 最近ではワイヤーフレーム（どのサイズ感で何を配置するかの設計図）を作ったり、モックアップ（Webサイトそっくりのサンプル）を作ったりするのに、便利なプロトタイピングツールが多くリリースされています。 1.InVision InVisionは、Uber社やNETFLIX社も使っているコラボレーシ
Web開発を爆速にする！Sublime Text 用のすごい拡張プラグイン厳選15個まとめ
Sublime Text は現在もっとも人気のあるコードエディタのひとつです。そのスピードとシンプルさ、豊富なプラグインで多くのプログラマーに愛されています。最大限に Sublime Text を活用するために、今回は普段よく利用している拡張機能をまとめてご紹介します。 詳細は以下から。 Package Control まずはじめに Package Control をインストールしなければ始まりません。Sublime Text の拡張機能を管理するためのパッケージで、これなしで拡張機能のインストール、削除も大変な作業となってしまいます。今回紹介するプラグインをインストールする前に、まず最初に行いましょう。 詳しいインストール方法については、こちらのページを参考にどうぞ。 JavaScript & NodeJS Snippet より素早くJavaScriptを記述することができるスニペットの
Bootstrap を拡張パワーアップ！参考にしたい50個の無料プラグイン、コンポーネントまとめ
Webデザイン制作で人気の Bootstrap フレームワークには、役立つツールやコンポーネントがあらかじめパッケージされており、すぐにサイトやアプリの制作をはじめることができます。しかし、ときには必要な機能が十分に揃っていないケースがあるのも事実です。 この記事では、Bootstrap の機能を最大限に拡張できる、50種類のプラグインやアドオン、コンポーネントをまとめてアルファベット順にご紹介します。 ここでは、ボタンやパンくずリスト、カレンダー、ツリーメニュー、ビデオプレイヤー、WYSIWYGエディターなどウェブ制作に必要な機能をすべてまとめています。今後のプロジェクトに活用してみてはいかがでしょう。 制作に活用したいBootstrap 用プラグイン、アドオン、コンポーネント（アルファベット順） アクセシビリティ （英: Accessibility） Accessibility Plu
CSSコーディングテクニック : 詳細度、単位、flexbox、mixin | POSTD
(2016/7/15、記事を修正いたしました。) 最近、ビギナーからベテランのデベロッパに至るまで、CSSに手を焼く人を多く見かけます。そうした人たちの中には、CSSの機能を好まず、別の言語を使った方がいいのではないかと考えている人もいます。もともと、CSSのプロセッサもこうした考え方から生まれました。書くべきコードを少なくできることを期待して（ 以前の記事で ご紹介しているとおり、普通はそうではありません）CSSのフレームワークを使う人もいれば、CSSを完全に見限り、スタイルの指定にJavaScriptを使うという人もいます。 しかし、あなたが取り組んでいるパイプラインにCSSプロセッサをいつも取り入れる必要があるとは限りません。どんなプロジェクトであれ、開始の時点から、膨れ上がったフレームワークをデフォルトに取り込む必要はありません。また、CSSを使うところで、代わりにJavaScri
[CSS]否定疑似クラス「:not」の便利な使い方と使う時の注意点
例えばリストの各アイテムの区切りにボーダーをつける時、まずはli要素にボーダーを指定し、最後のli要素にだけボーダー無しを上書きで指定する、そんなスタイルシートも「:not」を使うと簡単に指定することができます。 否定疑似クラス「:not」の便利な使い方と使う時の注意点（特に優先順位）を紹介します。 On :not and Specificity 以下、各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 「:not」の便利な使い方 CSSセレクタの優先順位 101 「:not」を含む優先順位 「:not」を使う時の注意点 まずは、「:not」の各ブラウザのサポート状況。 2016年現在、どの環境でも特に問題なく、利用できると思います。 :not などセレクタの各ブラウザのサポート状況 「:not」の便利な使い方 否定疑似クラス「:not」は使い
![[CSS]否定疑似クラス「:not」の便利な使い方と使う時の注意点](https://cdn-ak-scissors.b.st-hatena.com/image/square/c7854364c5c81764331231720a32437f4c3a3926/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201601%2F2016032501.png)
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
