CSSコーダーにとっての2018年のコーディング事情。アンケート結果から分析するイマドキのウェブ制作 - ICS MEDIA
CSSコーダーにとっての2018年のコーディング事情。アンケート結果から分析するイマドキのウェブ制作 ウェブ業界の当たり前だと思っていることでも、同業他社の人には違う常識があるかもしれません。自分が業界多数の傾向と違うところはどこなのか・・・ この連載ではアンケートデータから国内のウェブ業界の傾向を分析します。 連載第4回目となる本記事ではウェブ業界の「CSSコーダーにとっての2018年のコーディング事情」と題してアンケート結果を紹介します。アンケートは筆者のTwitterから実施していたものです。 CSSのベンダープレフィックスは今も付けてますか？ ブラウザのサポートが拡大し、多くのCSSプロパティでベンダープレフィックスの記載が不要になってきました。みなさんは今もベンダープレフィックスを書いているのでしょうか？ 309票の回答があり「ごく一部のものに付けてる」が38%、「なるべく付けて
AMPの対応方法まとめ
Googleが「Accelerated Mobile Pages(モバイル環境でのページ表示を高速化しよう)」という目的で始めたAMPプロジェクト。AMPに対応したウェブページを作成する方法を、初心者の私が勉強をしながらまとめていきます。 Q&A対応するとどうなるの？カルーセルに掲載されるモバイルでのGoogleの検索結果にカルーセル形式で表示されます。ただし、AMPに対応した全てのページがカルーセルで表示されるとは限りません。 AMPのマークが付くモバイルでのGoogleの検索結果に雷のマークが付きます。そして検索結果からのアクセスは全てAMPのページになります。開発者もユーザーも、通常のページかAMPのページかを選択することができません。 アクセスは増える？増えると思います。AMPに対応するとカルーセルに表示されるかもしれません。カルーセルは確かに検索結果ページの上部にありますが、その
Good to great UI animation tips
Let’s see some examples of UI animations going from good to great. With a little bit of tweaking here and there, you can elevate your UI patterns with animation. The interactions listed show continuity between states, denote a relationship between shared elements, and call the user’s attention to something they should notice and act upon. To create these animations, I followed the guidelines from
もし、HTMLのテキスト周りでデザイナーからこんなお願いをされたら... - Qiita
HTMLのテキストはPhotoshopのように融通が効かないから、デザイナーからの細かいお願いはだいたい断っている...なんてことありませんか？ モダンブラウザは色んなプロパティが対応してきているので、できることも増えています。 今回は、知っているといざというとき便利なテキスト周りのCSSを集めてみました。 「日本語、文字詰めできないかな？ほら、このカタカナとかキモい。。」 「Webで文字詰めだと？無理なんだよあきらめな！」なんていう時代はもうとうに過ぎ去っています。OpenTypeのフォントであれば、日本語でもちゃんと文字詰めできるんです。 .class { -moz-font-feature-settings: "palt"; -webkit-font-feature-settings: "palt"; font-feature-settings: "palt"; } ↓こんなかんじで
野放しは危険！デザイナーに潜む4つのモンスター
身近にいるかもしれないモンスター達 「モンスターペアレント」なんて言葉が流行した時期がありましたが、そのデザイナー版もありそうです。一見、平穏そうな装いをしたデザイナーの中に潜む恐ろしいモンスター達。彼らがデザインの行程を台無しにしたり、品質を落としてしまう場合があります。 今回紹介するモンスター達は web やアプリのようなデジタルプロダクトをデザインしている人たち向け。特にデザイナーとしてキャリアを始めた頃に陥りやすいモンスターたちです。 俺一番モンスター 問題解決することがデザイナーの仕事ですが、自分が考えた解決案が絶対正しいとは限りません。誰でも自分が考えたアイデアを大事にしたいですが、過保護になるとかえって視野が狭くなります。デザインに関わる様々な手法がありますが、それが解決を導き出す唯一の方法ではありません。課題解決ができるのはデザイナーだけではないわけですから、「自分が絶対正
細かすぎるけど伝わってほしい私的BEMプラクティス30（ぐらい）
BEMのいいところは、それが何者なのかが明白ということに尽きる。とある要素を見たときに、そのスタイルがどこに書かれているのか、何を表しているのかがクラス名を見ればわかる。手を入れる際も、どこに追記すればよいのか、どれくらいの影響を及ぼすのかの大部分が推測できる。 レスポンシブ・デザインと相性がいいとか、流行りのコンポーネント指向と相性がいいなど、BEMの良さは他にもいくつか挙げられるけど、決定的なのは明瞭さであると思う。 BEMを使いはじめてかれこれ３，４年くらい経った。その間に色々な命名規則や設計思想が登場してきたけれども、今のところは浮気する程の魅力を他に感じることもなくBEM一筋でやってきている。ただし実践するにつけて、より明瞭で破綻しづらい設計を実現するために、様々な制約やガイドを設けてやってきたので、「もともとのBEM」からは多少なり離れているかもしれない。 ただし、それはBEM
フロントエンドチェックリスト（日本語訳） - Qiita
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
納品ファイルをまとめるのが簡単に！更新分の抽出、ファイルリストの生成もできるWin, Mac対応の国産無料アプリ
まさに、Web制作者のためのアプリです。 納品ファイルをまとめる際に、更新した差分のファイルだけをディレクトリ構造を保持したまま抽出し、ファイルリストと共に納品ファイルセットを作成できるWin, Mac対応のアプリを紹介します。 ディレクトリの枝葉に点在する更新ファイルでも、1クリックでまとめることができます。 バージョン管理のないプロジェクトでは、特に重宝すると思います。 Scone Diff Scone Diffの特徴 Scone Diffのダウンロード・インストール Scone Diffの使い方 Scone Diffの高度な使い方 Scone Diffの特徴 Scone DiffはWindows、macOS対応の国産アプリで、無料版と有料版がリリースされています。無料版でも十分な機能が備わっています。 Web制作のファイル納品時、必要なファイルだけをまとめて納品できます。 必要なファ
Webサイト開発にCSS in JavaScriptを使うのはやめよう | POSTD
9つのおとぎ話 CSSは迷走しています。JavaScriptでドキュメントをスタイリングしているプロジェクトでは、多くの場合誤った理由からその方式を選択しています。本稿では、よくある誤解（神話）を列挙し、そうした問題に対するCSSソリューションを紹介します。 本稿は、特定のプロジェクトや人物への攻撃を意図するものではありません。ここでは、“CSS in JavaScript”(CSS in JS)を styled-components を使用することと定義します。これは、Reactのコンポーネントをスタイリングする最近のトレンドとなっています。 styled-components の作者である Max Stoiber と Glen Maddern 、また彼らに協力した人々は皆、卓越したアイデアと善意にあふれる優秀な人々です。 完全な透明性のために断っておくと、私は react-css-mo
2016年を振り返って、 HTML, CSS, JavaScript の書き方を変えたところ
2016年のブラウザ事情の進展に伴い、実務で HTML, CSS, JavaScript の書き方が変化した部分を列挙してみます。あくまで代表的なもののみです。 ブラウザのサポートバージョン変化環境面の変化まとめ ブラウザのサポートバージョン変化§ IE 8 サポート終了§ 2016年1月に IE 8 のサポートが終了しました。 html5shiv.js の読み込みが不要になったSVGが（PNGによる代替画像を用意することなく）使えるようになったvideo要素、audio要素が使えるようになった::before, ::after 擬似要素をダブルコロンで書けるようになった:not 擬似クラスが使えるようになり、例えば一行テキストエリアのセレクターが input:not([type]), input[type="text"] で正確に表せるようになったaddEventListener(),
複雑化するWEB制作業界についてのこれまでとこれから目指す人達へ | バンクーバーのうぇぶ屋
さて、Frogの皆と一緒に書いているFrog Advent Calendar 2016、最終日という事で久しぶりにガッツリ頑張って書こうと思います。 Frogや僕のブログに限らず、WEB制作に携わる人であれば一度は「私もWEB制作者になりたい」と考える人から相談を受ける事って多いんじゃないでしょうか。 ある人は茨の道と言い、ある人はちょっと頑張ればなれると言い、また時代によっても相当意見が別れ、前線で活躍される皆さんも３年前に聞かれるのと、今聞かれるのとではまた意見も変わってくるんじゃないでしょうか。 というわけで、今日は僕がこれまで耳にしてきたWEB屋な皆さんのお話を元に、昨今どれだけWEB制作者のスキルセットや求められる物が変わってきているのかをざっくりとだけまとめてみようかなと思います。 北米圏で就職するときなんかはジュニアとシニアの枠に別れると思いますが、そういった区分を一度無視し
これ知ってる？WEBの人なら押さえておきたいツール＆サービス50選 - 死ぬまでWEB屋
公開前に知人に見せたら、読むのに20分もかかったわ！！ と、お叱りを受けましたｗ オススメのツールやWEBサービスということで50ほど紹介していますが、僕の使用感のほかに、ところどころ経験談的なものが入っています。そのあたり、読むのがめんどうな方は読み飛ばしていただければ幸いです。 2万文字近くあるので、お時間ある際にゆるりと読んでいただければと思います。 それではお楽しみ下さい！ サイト解析に使えるツール・サービス import.io Juicer Ptengine GTmetrix CLOUD FLARE wayback timemachine シミラーウェブ Open Site Explorer サクラサクLABO aguse Built with ディレクションに使えるツール・サービス ウェブチェッカー Cat Mdes maindmaister ひとりブレスト 関連キーワード取得
Web制作に使える、意外と知らないダミーやテスト系ツール
作成：2016/03/14 更新：2016/06/29 Webサービス > 世界的に有名なダミーテキストといえばlorem ipsum（ロレム イプサム）ですが、その他、サイト制作に使えるテストデータやファイル系のダミー系ツールなどをご紹介します。 エンジニア速報は Twitter の@commteで配信しています。 WordPressテーマユニットテストデータ WordPress開発を行うときや公開前など、記事に流せるダミーデータが欲しい。そんなときはWPユニットテストデータ。長めのタイトル・マークアップ（見出し・引用・テーブル）タグ、画像の配置サイズのテストなど、レイアウトや機能に悪影響が出ないようにするために役に立つデータです。 GitHub - jawordpressorg/theme-test-data-ja: Japanese test data for WordPress 適
ダミーテキスト生成
「すぐ使えるダミーテキスト」が暗号化通信（https）に対応しました。 2018年6月現在、移行のテスト中でどちらでもアクセスできます。 【2018年6月12日更新】移行テストが完了し、https に強制転送されるようになりました。
より良いCSSを書くための様々なCSS設計まとめ
CSSは誰でも簡単に自由に書けるのですが、好きなように書いていると「ここを変更したら、違うところが崩れた」といったようにすぐに破綻してしまいます。 さらに、複数人で書いている場合は、各々が好きなように書いて読むだけでも苦痛なCSSが出来上がってしまいます。 そこで、これらの問題を解決するために考えられたのが「CSS設計」です。 今回は記事が長くなり過ぎるので、CSS設計の概要のみを説明し、参考となる公式ドキュメントへのリンクを記載しました。 CSS設計とは CSS設計は、CSSを記述する時のルールとなるものです。プロジェクト毎に適したCSS設計を採用することで、「良いCSS」にすることができます。 最近では、命名規則はBEMで、構成はSMACCSのように各CSS設計の概念を取り込んだオリジナルの規約をつくるといったことも多いようです。 「良いCSS」とは 「良いCSS」の定義として、おそら
SVG画像を canvgでCanvas に変換してみる - はしくれエンジニアもどきのメモ
SVG画像を canvgでCanvas に変換してみる SVG画像を canvgでCanvas で扱えるように変換してみたのでメモ。 canvg とは SVGコードをCanvas用のコードへ変換してくれるJavaScriptライブラリです。 MITライセンスで、GitHubにも挙がってます。 gabelerner/canvg · GitHub 今回使用したのは、こちらのcanvasgで作られているWebサービスです。 SVGコードを貼り付けると、Canvasでpreview し、かつCanvas用のコードを返してくれます。 Professor Cloud 類似ツール SVGのようなベクターデータをCanvas コードに変換してれる類似ツールはいくつかあるので、 まとめておきます。 Drawscript Illustrator のプラグイン。 Creativei Cloud 利用できる環境で
クラウドソーシングを使ってWebサービスを作った話 - toyoshiの日記
私が（ほとんど）プログラムなしでクラウドソーシングを使ってWebサービスを作った話を紹介します。 以前「土日で作るWebサービス入門 - toyoshi」という記事を書きましたが、今回書いたコードは20行ぐらいなので、さらに短い時間でWebサービス（というより便利サイト？）を作ることができました。 はじめに 私はWebサービスが好きで、会社を立ち上げて、請求管理サービスMisocaというのを運営しています。 サービスは順調にユーザー数を伸ばしていて嬉しいのですが、問題は私がコードを書かなくなったということです。Webサービスが好きで会社を立ち上げたのに、開発以外の仕事が忙しくてコードは他の人たちが書くようになってしまいました。 でもコードは書きたい！Webサービスを作りたい！でも仕事以外のことをしすぎて会社の成長が遅れてはだめだ。 そういった事情から、だったらせめてプログラムをせずに自分は
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Pingendo
Font−familyのベストな書き方 2015年版 | それからデザイン スタッフブログ
【SEO対策】国産より圧倒的に高性能！海外で人気の無料SEO解析ツール10選
