面倒な作業も発狂しない！Web制作を超効率化するgulp.jsの始め方（2017年版）
面倒なWeb制作の作業を効率化できるタスクランナー。もう使っていますか？ 現在もっともポピュラーなタスクランナーであるgulp.jsの使い方を解説します。 開発者は、限りある大事な時間をコーディングに費やします。たとえ面倒な会議をさぼっても、仕事時間の大半は地味な作業に奪われています。 テンプレートとコンテンツファイルからHTMLを生成する 新しい画像と変更された画像を圧縮する SassをCSSコードにコンパイルする スクリプトからconsoleとdebuggerのステートメントを削除する ES6をブラウザーとの互換性が高いES5に変換する コードの埋め込みと検証 CSSとJavaScriptファイルの連結と縮小 開発サーバー、ステージングサーバー、運用サーバーにファイルを展開する なにか変更があるたびに、作業は繰り返されます。作業を繰り返すうちに、一番優秀なエンジニアでさえ画像のひとつや
レスポンシブの常識が変わる!? 君はエレメントクエリーを知っているか？
レスポンシブWebデザインで使うメディアクエリーを進歩させ、要素ごとに条件を設定できる「エレメントクエリー」。どこがどう便利なのか？ 専用ライブラリー「EQCSS」による使い方を紹介します。 CSSのメディアクエリー（Media Query）を使い、画面幅に基づいて要素の表示方法を変える方法はもうおなじみでしょう。エレメントクエリー（Element Query）はメディアクエリーと似ているものの、なんとビューポートではなくWebページ上の個々の要素にレスポンシブな条件を適用します。条件とは、たとえば、要素の幅、含まれる文字数、ユーザーのスクロール状況などで、要素に異なるスタイルルールを適用できるのです。 エレメントクエリーが必要とされる理由 最初に述べたように、エレメントクエリーはビューポートの幅と高さだけでなく、たくさんのプロパティに基づいて要素をスタイリングするのに役立ちます。ほかにも
Webサイトをもっと楽しく！モダンでスタイリッシュなGIFアニメの使い方5つ
スマホの普及、マイクロインタラクションの導入と合わせて、再評価されているGIFアニメを使ったUIデザイン。Webサイトを楽しくする活用法を5つ紹介。 ユーザーエクスペリエンスとは、「使いやすさ」だけではなく、製品やWebサイトをより心地よく、そして楽しく使えるようにすることです。Webサイトをおもしろくする方法には、注意を引くトランジション、インタラクティブ性、ビジュアル要素を取り入れる手法がありますが、GIFとCSSを組み合わせることで実現できます。 この記事では、邪魔になったり、大げさになったりすることなく、ユーザーエクスペリエンスの向上を目的としたモダンでスタイリッシュなGIFおよびCSSの使用法について例を挙げます。GIFはもはや、ネコの画像を見るためや、サボっている同僚をからかったりするためだけのものではありません。 デザインや開発しているWebサイトの訪問者を、GIFやCSSを
iOS風すりガラスだけじゃない！backdrop-filterのすごいCSS実装アイデア
iOSのすりガラスのような効果をWebでデザインで導入したい。そんなときに便利なbackdrop-filterプロパティを知っていますか？ ブラウザーの実装はまだイマイチですが、おもしろい使い方ができそうですよ。 W3CのFilter Effects Module Level 2で導入された、CSSのbackdrop-filterプロパティについて解説します。特に構文、ブラウザーの対応、応用方法を取り上げます。 デモを含め、記事中のすべての画像の出典はPixabay.comです。 Backdrop-filterは従来のfilterプロパティとは別物 CSSフィルターのことは、よく知っているでしょう。おさらいをするなら『Photoshopはもういらない？明度も彩度も超手軽に変えられるCSSフィルターがスゴい』がおすすめの記事です。 従来のfilterプロパティは指定した要素にぼかし（blur
2017年に学びたい！次世代CSSレイアウト「Grid Layout Module」の使い方
Flexboxを使ったCSSレイアウトが広まった2016年。2017年は一足早く、Grid Layout Moduleを使ったCSSレイアウトにも触れてみませんか？ この記事では、グリッドレイアウト（Grid Layout）モジュールを使ってWebページに要素を配置する、7つの方法を紹介します。 SitePointでは以前にも、『Flexboxよりも新しい！CSSレイアウトの最新仕様Grid Layout を先取りしよう』『An Introduction to the CSS Grid Layout Module』『CSSレイアウトの常識が変わる！Grid Layout Moduleの最新動向を追いかけろ』でグリッドレイアウトを取り上げています。 本記事ではCSSのグリッドを使って要素を配置する方法だけに的を絞ります。 グリッドレイアウトの貧弱なサポート状況への対策 以前の記事で述べたよう
まだ画像テキスト使ってるの？ アクセシビリティとSEO両立のベストプラクティス
かつて私たちは、画像テキストを表示するために「text-indent: -9999px;」なんてCSSを書いていました。でも、いまならもっといい方法があります。いまどきのベストな方法と、それが使えないときの解決方法を。 以前掲載された『いくつ覚えてる？いつか役に立つかもしれないCSS画像置換の手法と歴史』の中でBaljeet Rathiが紹介しているたくさんの画像置換テクニックは、どれを取っても見事に工夫されています。すべてのテクニックは、人と検索エンジンの両方に対するアクセシビリティを保ちつつ、テキストコンテンツをWeb上でいかに美しく芸術的に表現するか、という課題に焦点を当てていました。Webデザインの世界におけるこの目標を、今日手軽に使えるカスタムフォントやパワフルなCSSツールなしで達成するのはまさに偉業でした。 Rathiの記事にヒントを得て、次の課題を挙げてみました。 画像変換
10 Simple & Smart CSS Snippets
CSS is the underlying language that gives websites its look. Although CSS is a straightforward language and easy to learn, it can be difficult to harness in some cases. Nothing to fear, there are workarounds that you can find online, and here are but just 10 handy ones that you can use. If you want to wrap long text, auto adjust the width of your table columns, or create a simple loading state wit
Flexboxよりも新しい！CSSレイアウトの最新仕様Grid Layout を先取りしよう
CSSのレイアウトといえば、伝統的にはfloatプロパティ、最近ではFlexboxを使うのが常識。でも、仕様策定中の「Grid Layout Module」を使うと、もっと効率よくレイアウトができるようになりそうですよ。 複雑なWebサイトを作成する場合、グリッドは重要な役割を果たします。グリッドを利用することでWeb作成のスピードアップができるフレームワークが多いことからも、現代のWebデザインでグリッドが重要であることは明らかです。 標準化が進められている「CSS Grid Layout Module」の仕様を導入することで、グリッドシステムを利用するために別のスタイルシートを用意する必要がなくなります。もう1つメリットを挙げるとすれば、Webページで要素を配置するのにinlineやfloatのようなプロパティに頼る必要もありません。この記事では、グリッドレイアウトの基本を紹介し、簡単
「安倍マリオ」で話題に！世界中でマリオがいかに愛されているかがわかるCSSまとめ
リオオリンピックの閉会式で話題になったのが、突如土管から現れた、安倍晋三首相扮するマリオ。まさかの首相のコスプレでの登場に、国内だけでなく海外でも大ウケだったようです。 国内外でポケモンGOがブレイクしているタイミングなだけに「ポケモンじゃないのかよ」との突っ込みもありましたが、いち早く東京オリンピック・パラリンピック競技大会組織委員会へ取材したBuzzFeedの記事によると、 今回起用したスーパーマリオは、主役として登場するゲームソフトの累計販売本数が全世界で3億2000万本を超えています。それに比べると、ポケモンの世界での知名度は低いと判断し、また演出上の役割も検討した上で、今回は登場させないことになりました。 とのこと。マリオは知名度が世界的に高く、愛されているキャラクターがだったからこそ選ばれた、というわけですね。 僕らのマリオは世界中でいったいどれぐらい愛されているのか？ Web
全部知ってる？今後のサイト制作で押さえたいCSSの最新プロパティ9選
CSSの登場から20年。この間、CSSはものすごく進化していました。「それって昔のやり方ですね」なんて言われないように、今後のサイト制作でチェックしておきたい最新のプロパティ（と関数）が学べる記事を9つ、厳選して紹介します。まだまだドラフト段階の仕様もありますので、各自記事の解説をチェックしてください。 1.グリッドレイアウトが捗るGrid Layout Module 『CSSレイアウトの常識が変わる！Grid Layout Moduleが胸アツ』（WPJ） CSSのレイアウトといえば、伝統的にはfloatプロパティ、最近ではFlexboxをよく使いますよね。仕様策定中の「Grid Layout Module」なら、もっと効率が上がりそうです。 2.テキストの回り込みが簡単に！ CSS Shapesプロパティ 『CSS Shapesでテキストを回り込ませるレイアウトを表現』（Webクリエイ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
