MTDDC Meetup HOKKAIDO 2018 http://mtddc2018.mt-ezo.net/ で発表したスライドです。

フロントエンドのデベロッパーがプロジェクトで使用しているCSS, JavaScriptのツールについての調査結果を紹介します。 SassやLESS、BootstrapやFoundation、AutoprefixerやModernizr、BEMやCSS-in-JS、CSS GridやFlexbox、NPMやGulp、jQueryやReactやVue.js、WebpackやESLintなど、実際にどのように使用されているかが分かります。 5,000人を超える現役デベロッパーを対象に調査が行われ、まさに現場の現在の状況がよく分かります。 The Front-End Tooling Survey 2018 by Ashley Nolan 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 Q1. フロントエンドの経験年数 Q2. CSSの知

Webサイトの構築を考える上で、ブラウザがどのようにしてレンダリングを行なっているかを理解することは重要です。 ブラウザレンダリングの流れを把握することで、自分の書いたCSSやJavaScriptがどのように読み込まれ、解釈されるかが理解できるようになります。 今回は普段デザインやコーディングをするときはなかなか意識しづらいレンダリングエンジンの流れを見ていきます。 レンダリングの流れ ブラウザのレンダリングは上図のような流れで行われます。 Loading, Scripting, Rendering, Paintingの４つの工程からなり、最終的に画面に描画されるまでをフレームと呼びます。 フレーム内の処理を詳しく見るとDownload, Parse, Scripting, Calculate Style, Layout, Paint, Rasterize, Composite Layer

Back to Basics CSSというイベントが先日行われた。主旨としては、SassやらCompassといったスタイルシートを記述するためのメタ言語なりフレームワークではなく、スタイルシート言語そのものの基礎に立ち返ろう、というものであったらしい。らしい、というのは筆者はこのイベントに参加しておらず、あくまで当日Twitterに流れてきたツイートと、イベントレポートでしか様子を伺い知ることができないからなのだけれども、このイベントで発表した人たちのスライドの中で、CSS3の日本語訳集やCSS 2.2日本語訳といった筆者の管理しているウェブページがほんのちょっぴり出てきたりする。 で、主に発表した人たちのエントリーを見るにつけ、ウェブ制作に携わる人が大多数のイベントであっても、そのイベントに参加する層はどうも日頃から仕様書を読まなかったり、縁遠かったりするという雰囲気……らしい。また、上

2021年12月18日 CSS, ダウンロード FlexboxとはFlexible Box Layout Moduleのことで、その名の通りフレキシブルで簡単にレイアウトが組めちゃう素敵ボックスです。現在ほとんどすべての最新ブラウザーでFlexboxをサポートしており、Flexboxを使ったレイアウト組みが今後のWebデザインのスタンダードとなるでしょう。Webクリエイターボックスでは以前からFlexboxの使い方について紹介してきたのですが、最近Flexboxが浸透してきたこともあってか各プロパティの使い方について質問される機会が増えてきたので、チートシートとしてまとめてみました。この記事ではなるべく画像メインでプロパティーの使い方を紹介したいと思います！ ↑私が10年以上利用している会計ソフト！ 動画で学ぶCSS Flexbox この記事はYouTube動画でも解説しています。動画派の

Reset CSSフレンズでは、内容の改善や頒布数の決定を目的にGoogle アナリティクスでアクセス情報を匿名のトラフィックデータという形で収集・解析しています。データの収集を無効化したい場合はこちらのリンクより無効にする事ができます。 第3章　Reset CSSでどのような宣言がされているか われわれはかしこいのでReset CSSでどのような宣言があるか教えるです。その前に教えてほしければ料理をよこすのです。 …満腹、満足です。解説が終わったらおかわりをよこすのです。 ブラウザがWeb上のページを読み込むときに既定で適用されるスタイルとして、ユーザーエージェントスタイルシートがあるです。ユーザーエージェントスタイルシートの内容はブラウザごとに次のURLで見られるのです。 Chrome: https://chromium.googlesource.com/chromium/blink/

WordやExcelなどをサイトにアップして、アイコンをつけることは多いと思います。 <a href="word.pdf" class="iconWord">PDFファイル</a>など、いちいちクラスをつけるのは面倒です。 そんな時は、属性セレクタで指定して自動でアイコンを表示させると便利です。 拡張子によって、アイコンを変更したい場合 拡張子がPDFの場合です。 属性セレクタで、拡張子.pdfを指定します。 a[href$=".pdf"]::before { padding-right: 10px; display: inline-block; content: url("icon_pdf.png"); vertical-align: middle; } PDFファイル（PDF:20KB） 実行結果 下記のようにPDFアイコンがつきます。 PDFファイル（PDF:20KB） 拡張子によっ

リスト要素に対して番号を振りたければ list-style-type: decimal を使えば良いんですが、テーブルだとそうもいかないです。しかし行番号を振るためだけに JavaScript は使いたくない。 そういうときは CSS Counters を使います。 <table> <thead> <tr> <th></th> <th>column1</th> <th>column2</th> </tr> </thead> <tbody> <tr> <td></td> <td>foo</td> <td></td> </tr> <tr> <td></td> <td>bar</td> <td></td> </tr> <tr> <td></td> <td>baz</td> <td></td> </tr> </tbody> </table>

追記 この記事を書いた当初はまだIE対応をしなければならないケースが多かったのですが、最近はもうIE対応は考えなくていいかなと思ったので今風の書き方を追記しました。 サムネイルの画像サイズがみんなバラバラ・・・ サムネイルの画像サイズがバラバラだと、どうしても表示に統一感がなくなってしまいますよね。Pinterestのような、サムネイルのバラバラ感を逆に活かしたレイアウトであればいいのですが、使い所が限られてきます。 かといって、複数個ならまだしも何百、何千とある画像をリサイズするのは手動でも自動でも大変…！というわけで、cssで中央部分をトリミングして同じサイズで表示してみましょう！ CSSで画像を中央でクロップして同じサイズで表示する方法 以下が実装用のコードです。「CSS」のタブをクリックして確認してみてくださいね。 方法1：object-fit版 「object-fit」というプロ

CSSで作成した背景 これらのパターン模様をCSSのみで作成しました linear-gradient と radial-gradient と repeating-linear-gradient CSS3で追加された線形グラデーション linear-gradient と円形グラデーション radial-gradient を使用すれば、さまざまなパターンを表現することが可能です。 これに background-size プロパティを組み合わせれば、CSSだけで背景画像を作成することができます。 CSS3をサポートするブラウザが増えてきている現在では、ほとんどのパターンがCSSだけで作成可能になっています。 また、 repeating-linear-gradient を使用すれば複雑なストライプ模様を簡単に作成できます。 作成方法の例についてはこちらに書きました。 CSSだけで複雑な背景画像を作

概要 ホバーしたら光る 一定の間隔で光る 原理 斜めに変形させた白い四角形（平行四辺形）を高速で横に動かし、画像の上を横切らせる。 四角形は画像を囲うdivのbefore 擬似要素に設定。 div自体にはdisplay: inline-block とoverflow: hiddenをかけることで、画像の表示領域から外れた部分の白い四角形は見えなくする。 備考 ホバー時に光る ホバー時にtransitionを設定することで、ホバーした時のみアニメーションする（サンプル一番左） ホバー擬似要素を使わず、クラス自体にtransitionを設定すると、ホバーが外れた時にも逆方向に戻るアニメーションをしてしまう（サンプル中央） 自動アニメーション サンプル一番右。 無限アニメーション。 間隔を空けてアニメーションさせるようにしている。 animation: bright 3s ← アニメーションの実

Flexboxの基本原則は、CSSでのレイアウトを柔軟かつ直観的にすることです。 Flexboxでどのようにレイアウトをつくるのか、Flexboxで最もよく使う5つのプロパティがどのように機能するのかをアニメーションで紹介します。 How Flexbox works 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 Flexboxの基本「display: flex;」 flexコンテナの主軸の方向「flex-direction」 flexコンテナの主軸に沿って配置「justify-content」 flexコンテナの交差軸に沿って配置「align-items」 flexアイテムの整列「align-self」 最後に Flexboxの基本「display: flex;」 まずは、div要素を配置した例を見てください。 「displa

レスポンシブデザインでページを作っていると、表組みの <table> タグがスマホの小さい画面だと、ちょっと見にくかったりします。じゃあ <table> やめるかーと思っても意味合い的に表だから <table> 使いたいよというわけでCSSでどうにかしてみました。 PCだと、こういう見た目です。HTMLとCSSはこちら。まぁ、なんてことないただの表です。 <table> <thead> <tr> <th>商品名</th> <th>価格</th> <th>個数</th> <th>小計</th> </tr> </thead> <tbody> <tr> <td>ねこねこニャンニャン丸 限定プレミアムわんこエディション</td> <td>980円</td> <td>2個</td> <td>1,960円</td> </tr> <tr> <td>あたまおっぱいおへそ飛んでチーングッズ</td> <td

CSSのグラデーション指定、どうしてますか？ Photoshopなどでオブジェクトのグラデーションが指定してあったら CSSをコピー という機能でそのままCSSが生成できたり、 Ultimate CSS Gradient Generator みたいなサイトでCSSを生成させてそれを貼り付けたりする方法もありますが、できれば理屈や理論をある程度理解したうえで使いこなしてみたいものです。 意外と知らないことが多かったり、「なんとなく思った通りになった」程度で止まっている人も少なくはないのではないかと思いますので、おさらいも兼ねて見てみましょう。 1. gradient指定の理屈を知ろう 1: gradient指定には以下の４種類があります。 線形グラデーション linear-gradient() 円形グラデーション radial-gradient() 反復線形グラデーション repeating

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

HTMLとCSSでグリッド システムを実装する際、何から始めればいいのか、どういうことを考え、決めて、どんな手順で進めるのか。 カラムの幅のつくり方、溝はmarginとpaddingのどちらがよいか、レスポンシブはどう対応するのかなど、グリッド システムを実装するテクニックを詳しく解説します。 かなり長いので、時間のある時に読んでいただければと思います。 How to build a responsive grid system 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 グリッドの実装に必要な準備 グリッド システムの構築 Step 1: グリッドを作成するための仕様を選択 Step 2: border-boxにbox-sizingを指定 Step 3: グリッドのコンテナを作成 Step 4: カラムの幅を計算 Step

TeXやMicrosoft Word、あるいはその他の汎用的なテキスト処理環境では簡単に実現できるような見た目に自分の文書を似せようと頑張る（文字どおり）無数の人たちに対して、 “悪いけど、うまくいかないよ” と繰り返し言い続けるのは、実際のところ、この1年間、私にとっては継続的な楽しみだった。- Marc Andreessen 1994年 Tim Berners-LeeによってHTMLが発表された1991年には、ページのスタイルを設定する方法はありませんでした。HTMLタグがどのように処理されるかはブラウザ次第で、多くの場合、ユーザの恣意的な入力が大きく影響しました。そうした事情から、ページがどのようなスタイルで処理されるかを”提案”するような標準的な方法を求める声が上がるようになりました。 しかし、CSSが導入されるのは5年先で、完全に実用化されるには10年の歳月を待たねばなりません。

ページのレイアウト、アニメーションをはじめ、エフェクトやフィルターなど、ここ数年でCSSでできる表現の幅がかなり広がりました。 Web制作に携わる人がチェックしておきたい、これからどんどん取り入れていきたいCSSのライブラリを紹介します。 Driveaway -GitHub デモページ レスポンシブ対応のMasonryレイアウトをスクリプト無し、CSSで簡単に実装できます。CSSアニメーションを使ったインタラクションも豊富に用意されており、パネルが回転する「Flip」、パネルにフォーカスがあたる「Focus」、鼓動のように動く「Pulse」など、楽しませてくれます。