CSS設計で本当に難しいのは「ルールを理解すること」ではなく「ルール通りに自分でコードを書くこと」だと思います。 実際にコードを書いていると「あれ、ここってどうすればいいんだろう？」「こういう場合はどうすべき？」といったことが頻発し、結局よくわからないまま勘でゴリ押すということがよくあります。 本書はそんな人へ向けて、FLOCSSをベースにしつつオリジナル要素を加えてより体系的にまとめた設計「PDFLOCSS（ピーディーフロックス、Page Divided FLOCSS）」を紹介します。 「CSS設計のルールはなんとなくわかるけど、いざ自分でコードを書こうとすると手が止まってしまう」という人に読んでもらいたい一冊です。 （追記：おかげさまでCSS設計のドキュメントとして採用している制作会社様も増えているみたいです！ありがとうございます🙏）

PHPカンファレンス 2021 1週間前イベント 〜 帰ってきたPHP勉強会@東京 の発表資料です。 https://phpcon.connpass.com/event/224128/

Webディレクター解体アドベントカレンダー初日の記事です。今日はWebディレクターという職種を定義するために作ったRPG風のスキルツリーとその活用方法を紹介します。あとは関連する他の開発メンバーとお互いの担当範囲を明確にする方法や、スキルツリーをスキルアップに役立てる方法について書きます。 曖昧な仕事 Webディレクターという職種に期待される仕事の内容は、開発に関わる他の職種と比べても非常に曖昧です。そもそも何ですか、ディレクションって。英語を直訳すると方向とか指示とかそういう意味ですけど、概念的でふわっとしています。 ディレクションという仕事に含まれる範囲も様々です。受託でホームページ制作を請け負って進行管理をメインに行うWebディレクターもいれば、既存自社サービスの売上増に責任を負う人も、新サービスの立ち上げに挑戦する人もいて、同じディレクターという名前でもやっている仕事が全然違います

CSS section divider descriptionWith this CSS Section Separator Generator, you can choose between 6 different dividers. Each of them can be customized by using the controls in the preview field. The tool includes a skewed divider, a semi-circle divider, a wave divider, a spikes divider, a triangle divider and a curved divider. Most of these dividers are pure CSS and using the ::before and ::after p

サービス終了のお知らせ 技術ブログサービス Qrunch（クランチ）は、10月31日を持ちましてサービスを終了いたしました。 11月30日 午後23時59分までは、以下からログインすることにより過去に投稿したコンテンツをエクスポートすることが可能です。 詳細はこちらをご覧ください。

Webパフォーマンス向上施策のために、今更ながら超速本1を読んだので、今までの自分の知見と合わせてまとめてみます。 なるべく柔らかく、改善施策ってまず何をどうすればいいの？という疑問を持った人に向けて書いています。 ▪️格言 そもそもWebは速い。遅くしているのは我々です。大抵は技術の問題ではなくて、人の問題。 引用元： テクニックではなく、今、本気で取り組むべきWebパフォーマンス （html5jパフォーマンス部 部長 竹洞さん） 心得 パフォーマンス向上に対する施策は大別すると以下の２通り 軽量化 （単純にやりとりするデータ容量を小さくすること） 圧縮 削除 最適化 （その時に最も適している実装・実行をとること） 経路・順番の変更 非同期 もっとも遅くしている原因を探して、それを対策するのが原則。「対効果」が絶対的正義である。手段から入るのは愚策。まず先に原因を知ることが重要。 ▪️1

ベイジで社内のワークフローを整理しだしたのは確か2014年頃です。その頃はまだ4～5人しか社員がいない状態で、タスクの粒度も粗く、いくつかのタスクは各人の能力に委ねたものでした。しかし10人を超えて関わる人が増えたあたりから、仕事の進め方も徐々に変わり、ワークフローの綻びも色々と出始めてきました。そこで今年の春に、全社員参加のもと、これまでの進め方の問題点を話し合ったうえで、ワークフローの大幅な刷新を行いました。本エントリーはそのご紹介です。 刷新にあたって、受注から納品までをサブタスクを含めて約140に分解しました。また、各タスクで用いられるドキュメントもできるだけフォーマット化し、効率よくドキュメントワークができるようにしました。 合わせて、タスク毎の職能の再定義を行いました。プロデューサー、ディレクターといった業務範囲が曖昧な職能は、より厳密な職能の定義を試みました。例えばディレクタ

注1）その後300万PV/月に達しました 注2）すでにサルワカの運営から身を退いています サルワカというWebメディアを運営してきた。僕を中心に、数人のライターが記事を書いている。それぞれが別の本業を持っている。あくまでも気ままに更新するメディアだ。 サルワカを始めたのは2016年の12月。 その1年後には200万ページビュー/月を超え、1年半後の今では、250万ページビュー/月を超えた。 ページビュー（PV）はサイトの価値を示す１つの指標にしか過ぎないが、個人運営のメディアでここまで到達できたのは嬉しい。 最近は本業の方が充実してきて、僕はほとんど記事を書けていない。記事執筆に時間をかけたい思いはあるが、それがいつになるかは分からない。 ただ、せっかくある程度メディアを成長させることができたのだから、この経験を共有しないのも勿体無い気がする。 そこで、サルワカというメディアをどのような考

Photo by Marcy Leigh こんにちは。谷口です。 現在、Webデザイナーとして働いている皆様はどんな書籍を読んでいますか？ 最近は、基礎的なデザインの勉強をしてきた方だけでなく、もともとITエンジニアとしてWebサービスの開発をする中で、Webデザインもすることになったという方も多くいらっしゃるかと思います。 今回は、Webデザインの仕事をしている方々が、デザインをするに当たってジャンルごとに役立つ書籍を17冊ご紹介いたします。 目次 ・IA、UI、UX ・レイアウト ・配色 ・HTML/CSS ・CMS組込み ・デザイン技法 ■IA、UI、UX ◆1.IAシンキング Web制作者・担当者のためのIA思考術 IAシンキング Web制作者・担当者のためのIA思考術 作者: 坂本貴史,宮崎綾子,長谷川恭久出版社/メーカー: ワークスコーポレーション発売日: 2011/03/29

先日、PageSpeed Insightsというツールを知りました。 PageSpeed Insightsとは、ウェブページのコンテンツを解析し、ページの読み込み時間を短くするための方法を提案してくれるGoogle Developersのツールです。 早速、僕のブログも試してみたところ、速度がさんざんな結果になりました。 photo by DAVID MELCHOR DIAZ PageSpeed Insightsでのテスト結果 モバイルのテスト結果、43点。 パソコンのテスト結果、61点。 「これはいけませんぞ！」と思いましたが、とりあえず、いきなり全ての問題を一度に解決するのは不可能なので、まずはパソコンの方から修正していくことにしました。 パソコンの修正提案の概要 PageSpeed Insightsでは、サイトの表示スピードが高速になるように修正箇所を提案してくれます。 当ブログが今

この記事について 「GoogleAnalyticsの設定、どうしたらいいんだっけ...」と迷ったときのためのレファレンスです。 新規のサイトを立ち上げる時・GAの再設計がしたくなった時に参照してください。 のちのちアクセス解析しつつ改善していくために、できるだけ汎用的にデータを拾っておく 可能な限り、非コーダーができる作業で完結させる というのをテーマにまとめました。 STEP 0: GTM・GAのアカウントを取得 Googleのアカウントがあれば、驚くほど簡単に取得できます。 GoogleAnalyticsのアカウントを作る GoogleTagManagerのアカウントを作る 基本的には、GoogleTagManager（以下、GTM）経由でGoogleAnalytics（以下、GA）を導入します。GTMの使い勝手がよいのはもちろん、GAをカスタマイズしたくなったときに、コーダーの手を借

これからのCSSはmargin禁止！？CSSグリッドレイアウトやコンポーネント指向なCSSについて、矢倉さんに聞いてきた！ 白石 俊平（HTML5 Experts.jp編集長） こんにちは、編集長の白石です。 この記事は、9月24日に開催されたHTML5 Conference 2017に登壇したエキスパートに、お話されたセッションのトピックを中心に語っていただこうとういものです。セッションの内容をより深く理解する手助けになるだけでなく、本記事単体でも面白く読んでいただけることを目指しています。 今回お話を伺ったのは、ピクセルグリッドの矢倉眞隆さんです。 矢倉さんのセッション「まあまあ最近のCSSとつらくならないための書き方」に関するスライド資料は、こちらで公開されています。 インパクト大！CSSグリッドレイアウト概要 白石: では、まずは簡単に自己紹介をお願いできますか？ 矢倉: 昨年（2

原文："Building a large-scale design system: How we created a design system for the U.S. government" by Maya Benari, October 3, 2017 現在、ほぼ30,000の米国連邦政府のウェブサイトがありますが、それらウェブサイトの間に一貫性はほとんどありません。テクノロジーの分野で働く数十万人の政府機関の職員がいますが、彼らの携わるウェブサイトの構築や管理方法に共通点はありません。 その結果、政府はユーザーが十分に満足できないサービスに多くのリソースを費やしています。連邦政府のウェブサイトは行政が提供するサービスの正面玄関です。アメリカ政府と何らかの接触をはかるときユーザーが最初に出会う場所です。米連邦政府一般調達局のFederal Front Doorイニシアチブの調査からウ

Webサイトを公開した時に、サイトのパフォーマンス、SEO、セキュリティ、アクセシビリティ、コンテンツ、機能性の面から確認しておきたい項目がまとめられたチェックリストを紹介します。 2017年、最近のWebのテクノロジーや制作事情をふまえたものとなっており、ひと昔前とはいろいろ変化しています。 イラスト: Girls Design Materials 「Web Launch Checklist」は2017年最近のWeb制作事情をふまえて、サイト公開時の確認事項をまとめたものです。 確認項目は6つにカテゴリ分けされており、それぞれ最新の動向が取り入れられたものとなっています。 Web Launch Checklist Web Launch Checklist -GitHub そのまま利用してもよし、また編集して自分用のリストを作成することもできます。 パフォーマンスで確認したい項目 SEOで

女性向けの商品、サービスを取り扱う企業や子供向け商品を取り扱う企業などでは、可愛らしい商品や店舗の内部を公開する為にはホームページが必要です。見やすく、綺麗な子供向けの綺麗なサイトを作りたいと考えている人は多いのではにでしょうか。そこで日本全国の可愛いいホームページを厳選して集めてみました。ひとつでもお気に入りがあるのではないでしょうか。

この文脈では、「編集内容のキャンセル」という処理を続行しても良いかをユーザーに確認しています。続行に同意したい多くのユーザーは直感的に同じ表記の「キャンセル」を押したくなるでしょう。しかしそれでは編集のキャンセルが実行されません。 このキャンセルボタンが意味するのは、「『編集内容をキャンセルする』のキャンセル」なのです。つまり、ユーザーが望み通りに編集内容を破棄するためには、反対側のOKボタンを選ぶべきなのです。このような「キャンセルのキャンセル」は二重否定で意味がややこしくなるので避けなければなりません。 ここで「キャンセルのキャンセル」にならなければ良いということで、次のようにボタン名を変えてみました。 これでもう迷うことは無くなりましたか……？ 私はこの修正は誤りだと判断します。「はい」「いいえ」は結果を予想しにくい表現なので、ダイアログのアクションボタンに用いることはあまり適切では

なぜ女子大生は「スタバの写真」をSNS（インスタ）にシェアしてしまうのか？ 100人に聞いてわかったスタバの「SNS上での価値の高さ」と5つの理由。 今回は「なぜスタバの写真をSNS（インスタ）にあげてしまうのか？」について、首都圏100人の女子大生にアンケートした結果をまとめました。 ※全体を正確に調査したものではありません、あくまで参考までにご覧ください。 結果１）87％が「インスタをつかっている」 まず一つめのアンケートは「どのくらいの人が、インスタをつかっているか？」を聞いてみました。 結果としては「つかっている 87％」「つかっていない 12％」「以前つかってた 1％」となりました。※3択にて実施 もう「おしゃれな人」だけじゃない。広がるインスタのユーザー層。 あまりに「インスタをつかっている人」が多かったので、すこし話も聞いてみたところ、以下のような意見があがりました。 ・もう

追記 (2018.12.30) PHP5.6, PHP7.1 に加えて、PHP7.2, PHP7.3 にも対応しました！ また、PHP から memcached につなぐサンプルを追加しました。 はじめに こんにちは。小西です。開発環境の構築って面倒ですよねー。 今回、PHP, MySQL, PHP-FPM, nginx, memcached のローカル開発環境を、Docker を使ってコマンド一発で作られるようにしたところ、あまりに簡単で驚いたので、その方法をご紹介します。 ソースコードをgithubにおいておきます ので、すぐに起動できます！ 開発環境構築のめんどくささ 僕はPHP+MySQL+nginx+PHP-FPMの環境をよく使うのですが、こういった構成をそれぞれのマシンで再現するのって結構面倒なんですよね。1プロジェクトならまだいいですが、大体プロジェクトによってそれぞれのバー