開発部で週1で新しいことをやってみる『Dev実験室』の取り組み AtomicDesignを知る デザインシステムを知る CSS設計どうするのが良い？ って話をする
俺流レスポンシブコーディングの覚書。「人には人のレスポンシブ」があるのでこれが正解だってわけではないのですが、レスポンシブコーディングで悩んでいる人にとって参考になる記事になってくれたら嬉しいです。 ブレイクポイントは特定のデバイスの画面サイズを基準にしない 以前アンケートを取った時にデバイスのサイズを意識して決める人が半数以上を占めていた。 アンケート結果を抜きにしても「2021 年のブレイクポイント決定版はこれだ！」的な記事がバズっているのを定期的に目撃し、主流のデバイスのサイズを比較するアプローチがほとんどであるが、僕はデバイスの端末のサイズを基準にブレイクポイントを決めることには否定的である。 主流のデバイスのサイズなんてものは時間が経てば変化する。 昨年 iPhone 12 が発表された時に従来の画面サイズとは違うバリエーションになることが分かるやいなやタイムラインが慌てふためい
『HTML5&CSS3デザイン 現場の新標準ガイド【第2版】』はHTMLとCSSをリファレンス的にまとめた書籍です。第１版を出してから３年が経ち、その間の変化を反映させて最新の状態に改定しました。 Web制作の変化 ３年の間にWeb制作の現場は大きく変化しました。 第１版を出した時点ではマイナーな存在だった「フレキシブルボックス（Flexbox）」や「CSSグリッド（CSS Grid）」も、今ではWebデザインのコントロールに欠かせないメジャーな機能となっています。フィルタやブレンドといった便利な機能も幅広く活用されるようになってきました。 あれもこれもフロート（float）でコントロールしていたことを考えると、たった３年の間にWeb制作の効率が大幅に向上したと言えるでしょう。 第２版には、 フレキシブルボックスの「ギャップ（gap）」CSSグリッドの「サブグリッド（subgrid）」スク
マイグレーションコード自作して File-Based Routing に自動移行！！ ~250 ページの歴史的経緯を添えて~
Webページを実装する際、そのページを表示するブラウザが各HTML要素にデフォルトでどのようなスタイルが適用されているか知っておくのは大切なことです。 Chrome, Safari, Firefox, Edge 各ブラウザごとのデフォルトのスタイルシート、user agent stylesheetを紹介します。 例えば、p要素にはdisplay: block;が定義されており各ブラウザでmarginの数値が異なります。また、h1要素は単独で使用した場合とsection要素などの子要素で使用した場合ではmarginの数値が異なります。 /* * The default style sheet used to render HTML. * * Copyright (C) 2000 Lars Knoll (knoll@kde.org) * Copyright (C) 2003, 2004, 20
.sampleTable { border: none; table-layout: fixed; width: 400px; height: 400px; } .sampleTable td { position: relative; border: 1px #666 solid; } .sampleTable td::before { display: block; position: absolute; width: 20px; height: 20px; background: #f00; content: ""; } .cell01::before { bottom: 0; left: 0; } .cell02::before { top: 0; right: 0; } .cell03::before { top: 40px; right: 80px; } .cell04::be
2018年7月23日 著 復権、といっても昔から日の目を見ないまま現在に至っている気がしなくもないですけどね。ただ自分のなかではユーザースタイルシートってある意味、Webの媒体特性そのものであり、Webらしさの象徴であり、なぜWebが本質的にアクセシブルかを体現する存在であって、復権できるならして欲しい。なぜ唐突にこんな話を切り出したかといえば先週、WAI Interest Groupのメーリングリスト（w3c-wai-ig@w3.org）でUser Stylesheets are Assistive Technologyっていう興味深い投稿があって、そのなかで I use Safari because the browser will host user stylesheets. It is too bad that other browsers decided to stop supp
ある要素がマウスオーバーされたことを伝える。それ以上の役割を:hoverに紐付くスタイルに持たせるべきではない。マウスオーバーするまでその要素のインタラクションがわからないデザインにしてはいけないのだ。 マウスオーバーするまでその要素がリンクであるという確信が持てないデザインによく遭遇する。それが本当にリンクであるか確かめるためには、わざわざマウスカーソルを移動させて試してみるしかない。スマホではタップだ。もし、ただのテキストだと期待して誤操作すれば、ページを戻る操作も必要になるかもしれない。 :hoverのスタイルを指定できることを拠り所にしてしまい、通常状態ではその振る舞いを期待させられる見た目になっていないことがよくある。しかし、マウスオーバーするということはインタラクションコストが掛かるということだ。また、:hoverによって何かしらの手掛かりが得られるかもしれないということにすら
WebKit公式サイトを含め、多くのWebサイトで解説されている「iPhone X対応のWebページの作り方」はiOS 11.11系まで、またはiOS 11.12以上のどちらか一方にしか対応していないため、その両方に対応する書き方について解説します。 この記事の内容は「スマートフォン時代のWebコーディングスクール」の授業資料の一部です。 iPhone X対応していないWebページはどう見えるのか 縦持ちでは特に問題ありませんが、横持ちの場合画面の左右に空白ができてしまいます。 たとえば、このブログの記事ページを横持ちで観ると以下の画像のように見えます。 このブログの場合、bodyの背景色は濃い茶色、ページ全体を包んでいるwrapper要素に背景画像が設定されています。 iPhone Xのセーフエリアについて iPhone Xのディスプレイを横向きにした時、センサーハウジングや角丸の部分を
長い間Webデザイナーが愛してやまないものの1つに*「box-shadow（ボックスシャドウ）」*があります。 Photoshopのような特殊なソフトウェアを使わなくとも、コードだけで影を落とすことができるという点で、Webデザイナーの中で大変重宝されていたプロパティです。 box-shadowの歴史は長く、2005年時点でW3C内でbox-shadowの草案が発表されました。影を落とす時に、影の長さや角度、色や透明度まで指定することができるので、この技術が登場した当初は感動した方も多いのではないのでしょうか。 しかしながら、box-shadowを使った影の落とし方は、登場から10年以上経過した現在、その使い所を考えていく必要があります。それはブラウザが様々なプロパティをサポートしたことが理由であり、影の落とし方を再考してみるのも大切です。 そこで本稿では、CSS新時代の影の落とし方につい
これからのCSSはmargin禁止！？CSSグリッドレイアウトやコンポーネント指向なCSSについて、矢倉さんに聞いてきた！ 白石 俊平（HTML5 Experts.jp編集長） こんにちは、編集長の白石です。 この記事は、9月24日に開催されたHTML5 Conference 2017に登壇したエキスパートに、お話されたセッションのトピックを中心に語っていただこうとういものです。セッションの内容をより深く理解する手助けになるだけでなく、本記事単体でも面白く読んでいただけることを目指しています。 今回お話を伺ったのは、ピクセルグリッドの矢倉眞隆さんです。 矢倉さんのセッション「まあまあ最近のCSSとつらくならないための書き方」に関するスライド資料は、こちらで公開されています。 インパクト大！CSSグリッドレイアウト概要 白石: では、まずは簡単に自己紹介をお願いできますか？ 矢倉: 昨年（2
マイクロソフト、Google、W3C、Mozillaらが協力。それぞれのWebブラウザのドキュメントをMozillaサイトに一本化。あちこちのWebサイトを見て回らなくても済むように Mozillaは、マイクロソフト、Google、W3C、サムスンなどと協力して、それぞれのブラウザなどに対応した技術解説のドキュメントを一本化し、Mozilla Developer Networkの「MDN web docs」にまとめて掲載する取り組みを開始したと発表しました。 Webブラウザに関するHTMLやCSS、APIなどの機能の解説は、そのWebブラウザを開発するベンダのWebサイト、例えばマイクロソフトならMSDN（Microsoft Develpers Network）、GoogleならChromeのWebサイト、MozillaならMDN（Mozilla Developer Network）のWe
GitHubで公開されているフロントエンドチェックリストというドキュメントが、網羅されている内容が幅広く便利そうだったので、日本語に翻訳しました。 日本語版は、以下のGitHubリポジトリにあります。GitHub側と自動的に連携するようにしておりますので、誤訳や誤りなどがあれば GitHub のプルリクエストまたは Issue で報告していただけると幸いです。 https://github.com/miya0001/Front-End-Checklist 日本語版への貢献方法 最終更新日時: 2017-11-19 03:50:47+09:00 (未翻訳) Front-End Checklist The Front-End Checklist is an exhaustive list of all elements you need to have / to test before lau
SVGのマスクテクニックを使えばなかなかたいしたことができることをご存じでしょうか。このやり方はここ数年に広まったものですが、最近になるまでWeb開発のメインストリームに入ってきませんでした。 本記事では、Webを捜して集めたクリッピングマスク・SVG/canvasを使ったマスクのデモを紹介しています。これらの例を見れば、Webにおいてマスクがどれほど活用できるものか、それらが開発者に何を与えてくれるかを実感してもらえると思います。 （画像をクリックするとCodepenに飛びます。） １．テキスト・マスキング 動くテキスト・マスキングの見事な例です。HTMLのページ・テキストを使用しており、テキスト部分を所望のものに変えるだけでどんなものにも応用できます。 この仕掛けの種は、CSSのバックグラウンド・クリップ（background-clip）のようなプロパティにあります。クリアーな背景の使
Flexboxと仕事でのWeb制作FlexboxというCSSプロパティについて、すでに実際にバリバリ使ってるよという方も、聞いたことはあるけど使うまでに至っていないという方もいらっしゃるでしょう。 Flexboxがどんなものなのか、ということはこの記事では扱いません（こちらの記事やこちらの記事などがとても参考になりました。） 今回は、とても便利そうなFlexboxですが、Web制作の仕事で実際に使用するかどうかについて考えてみました。 Web制作の仕事では、対応ブラウザ（見え方を保証するインターネットブラウザ）を気にして制作します。 なぜなら、対応ブラウザによって、制作方法・記述方法がかなり変わってくるからです。 FlexboxはIE9では全く対応しておらず、IE10、Android4.2以前の標準ブラウザではFlexboxの記述方法がかなり違う、というのが考慮するポイントです。 Web制
WPJが提携するWeb開発者向けメディア「SitePoint」ではCSS開発者を対象にした大規模なアンケート調査を実施しました。その結果から、いま何を学ぶべきかが見えてきました。 CSS開発の現場で実践されている習慣、CSSに関する知識の量、理解度などの情報を集める目的で実施した「究極のCSS調査」には、6週間で1600名以上からの回答が寄せられました。このほど集計が完了したので、結果を発表します！ フォローアップコメントと考察、昨年の結果との比較、コメント欄に寄せられた質問の回答も掲載します。 アンケートの結果は以下を参照してください。 結果は上下の矢印でめくりながら見られます。 調査の目的 まず、読者からは調査の目的とフィードバックで得られることについて、質問がありました。私がSitePointのエディターとしてもっとも優先しているのは、読者を理解することです。いろいろな技術に関して、
この春、CSSコーディングの仕事を始めた新人さんへ、「きれいなCSS」を書くためのガイドラインをお届け。 きれいなCSSを書くためにはいくつかルールがあります。ルールに従うとレイアウトの崩れを最大限防げるだけでなく、軽量で再利用可能なCSSを書けるメリットもあります。ここで紹介するルールは次のとおりです。 グローバルセレクターや要素セレクターを避ける 詳細度が高すぎるセレクターは使わない セマンティックなクラス名を使う マークアップ構造とCSSを密結合しすぎない ルールを1つずつ説明していきます。 グローバルセレクターを避ける グローバルセレクターには全称セレクター（*）、p、button、h1といった要素セレクター、[type=checkbox]といった属性セレクターが含まれます。これらのセレクターに適用されるスタイル宣言は、サイト全体にわたって該当する要素すべてに適用されます。以下に例
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
