こんにちは、デザイナーのTantanです。 IllustraotrやPhotoshopのペンツールできれいな曲線を描く方法がわからない、ベジェ曲線って全然コントロールできなくてわからん！という方のために基本のキホンを「例え」で解説したいと思います。 ベジェ曲線の操作感は独特ですので、具体的な操作を学ぶ前にイメージを掴むと習得が早いと思います。 下敷きを思い浮かべてください 小学生の頃使ったようなプラスチックの下敷きありますよね。ノートに挟んで使うペラペラのやつ。 みなさん一度は曲げたりひねったり、静電気で髪を逆立てて遊んだりしたことがあるのではないでしょうか。 あれを�両手に持ってクネクネ曲げる感触を思い出してください。 手首で向きをコントロール イラレのベジェ曲線は、下敷きの両端を持ってカーブを作るような感覚です。 手首を曲げて、指先の向かう方向を変えることで、下敷きの曲がり具合が調整で

31. 利用者のリテラシー 支援技術 CSS コンテンツ JavaScript HTML UA OS ハードウェア 31 それぞれのレイヤーでアクセシビリティ的なケアが必要な分野 • 利用者のリテラシー • 支援技術 • CSS • コンテンツ （テキスト／画像／音声／映像） • HTML • JavaScript等プログラム • ユーザーエージェント • OS • ハードウェア 教育／啓蒙 etc. スクリーンリーダー／ズーム／翻訳 etc. UIデザイン／コントラスト／表示順序／背景画像 etc. コントラスト／代替コンテンツ／表現 etc. 文書構造／要素の意味／フォームコントロール etc. キーボード操作／フォーカス制御／DOM追加位置 etc. UIデザイン／代替コンテンツへのアクセス／ スタイル（色／サイズ／速度 etc.）変更／ 文書構造とmeta情報／API etc. U

CSS ProtipsというTIPS集があって、これ一応日本語訳が既にあるんだけど、露骨に機械翻訳で何言ってるのか全くわからないので全編日本語訳した。 あれ、あんまり変わってない気がしてきたぞ。 CSSの便利な小技・テクニックのまとめ Awesome CSSのプロフェッショナルになりたい人のためのTips集を紹介するよ。 CSS以外のAwesomeリストを探したいときは@sindresorhusをフォローしよう。 目次 テクニック サポート 翻訳 手伝いたい テクニック CSSリセット 異なるブラウザ間でスタイルの一貫性を保つには、CSSリセットが役に立つぞ。 NormalizeのようなCSSリセットのライブラリを使用するか、もっと簡単には以下のように書ける。

久しぶりにJavaScriptを勉強しようと思ったら、すっかり浦島太郎状態だった……なんて人も多いのでは？  モダンなJavaScriptの知識をコンパクトにまとめました。 JavaScriptを取り巻く環境がどんどん変化しています。新たなツールやフレームワークが生み出されているだけでなく、言語そのものがES2015（ES6）の登場で大きく変わりました。JavaScript開発の学習がいかに難しいか愚痴をこぼす記事がたくさんありますが、無理もないことです。 本記事ではモダンJavaScriptを紹介します。JavaScriptの進展を解説し、フロントエンドWebアプリケーションを作るために使われているツールや手法の全体像を確認します。JavaScriptを学び始めたばかりの人や、以前は使っていて数年間離れたため変化を知りたい人はぜひ読んでください。 Node.jsについて Node.jsは

1月19日 Bing 認識してない方も多いかと思いますが、2016年１月に、Microsoft が提供する検索エンジンであるbingのロゴが変更されました。 表記が、bingからBingへと変更され、色については黄色から緑へとダイナミックにアップデートされています。 小文字のbを形どっているであろう、シンボルマークについても、切れ込み部分など、若干変更されています。 2月3日 Uber 日本ではあまり普及していないUberですが、海外旅行好きな方なら一度は利用したことがあるかと思います。 そのUberのブランドリニューアルについては、「Bit」と「Atom」をコンセプトに展開しているそうです。公式BLOGや各メディアで、検討の過程が紹介されていて楽しく読んだ記憶があります。 個人的には、2016年の中でもインパクトが大きかったリニューアルです。 4月1日 オイシックス クリエイティブディレ

イベント名: セキュリティとUXの◯◯な関係 講演タイトル: セキュリティの都市伝説を暴く 2017年6月9日 ヤフー株式会社 コワーキングスペース LODGE https://connpass.com/event/55559/

検索ボックスは入力フィールドと送信ボタンの組み合わせです。検索ボックスにデザインは必要ないと考える人もいるかもしれません。たしかに、たった２つの単純な要素でしかありません。しかし、コンテンツが多いサイトでは、検索ボックスは往々にしてもっとも頻繁に使用される要素なのです。 複雑なサイトに遭遇したとき、ユーザーは労力を使わずに素早く最終目的地まで辿り着けるように、すぐに検索ボックスを探します。ですから、検索ボックスのデザインやユーザビリティは重要なのです。 この記事では、ユーザーが目的地に辿り着くための時間を節約するために、検索ボックスをどのように改善できるかを見ていきます。

このページにあるスクリプトはアップデートを行っていません。最新のスクリプトファイルは 新しいダウンロードページ https://onthehead.com/ais/item020/ からダウンロードください。 Rotate Items by Dialog は、選択したオブジェクトをダイアログで正しく回転・リフレクトするスクリプトです。 Illustrator のバグによって、オブジェクトが歪んでしまう のを回避するために作成したものです。 Rotate Items ９つの基準点 回転・リフレクトするときの基準点を指定できます。 commandF1キーでフォーカスし、QWEASDZXCキーで基準点の変更が可能です。 個別に変形 チェックを入れると、複数選択したオブジェクトをそれぞれで、チェックを外せば、複数選択したオブジェクト全体で回転・リフレクトします。 commandF5キーでチェックを

リフレクトダイアログ リフレクトの軸: 水平/垂直 個別に変形ダイアログ/変形効果ダイアログ 垂直軸にリフレクト/水平軸にリフレクト 変形パネルオプション 水平方向に反転/垂直方向に反転 といった具合に並びも名称もバラバラです。普段使い慣れてるツールであれば感覚で使い分けることができますが、たまにしか使わないツールだと混乱が生じます。理論的に違いを出しているのかもしれませんが… Adobe様。わかりづらいので呼称を統一してください。 ということで、以降この投稿では、選択したオブジェクトを 「反時計回りに回転する」ことを「左回転」 「時計回りに回転する」ことを「右回転」 「鏡に映して左右を入れ替える」ことを「左右リフレクト」 「鏡に映して上下を入れ替える」ことを「上下リフレクト」 と呼ぶことにするんでよろしく。 2. オブジェクトを回転・リフレクトする方法 まずは、回転・リフレクトする手法を

夜遅く仕事や学校から帰ってきたときや、料理のやる気が出ないとき、時間がないときのための簡単レシピ集です。混ぜるだけや電子レンジでチンするだけで出来上がるようなズボラ飯の作り方を中心に紹介していきます。 簡単レシピの探し方 料理に必要なHPとは、その料理を作るのに必要なエネルギーのことです。このパーセンテージが低いほど「料理を作るのが楽」ということを表しています。 作るのにそこそこ体力が必要です。それでも、比較的カンタンなレシピが中心です。複雑なレシピや作るのに何時間もかかるようなものはありません。 体力が尽きかけているときでも作れる料理です。必要な食材も少なめです。 「今すぐベッドに飛び込んで寝たい…！」という力が尽きてしまったときのための超カンタンなズボラ飯です。ヘロヘロになりながらも作ることができます。 ズボラ飯でも美味しい

Nickはロシアのセントピーターズバーグ出身のソフトウェアデベロッパー/ブロガーです。彼による他の記事はこちらをご参照ください。 機能的で楽しいアニメーションは、現代のWebデザインにおいて不可欠な要素の１つです。現代のWebサイトでは、細かなインタラクションのデザインが根本的な違いをもたらします。 アニメーションはユーザーに現状を伝えたり、注意をうながしたり、ユーザーの行動の結果を伝えたり、ユーザーのふるまいに影響を与えることもできます。 より良いUXを築くため、サイトにアニメーションを追加する例をいくつか説明していきます。 進捗 ローディングアニメーション Webアニメーションにもっとも共通する用途の１つは、ページの読み込み（ローディング）時にユーザーの気を紛らせることです。 ローディングアニメーションはユーザーの感覚時間に影響し、実際より待ち時間を短く感じさせることができます。 待ち

Winでは基本的にフォントレンダリングをCSSで制御することは出来ません。また、スマートフォンのブラウザもほとんど制御できず、基本的にグレースケールで表示されることが多いようでした。 MacではSafariのみがグレースケールですね、これが原因で「Safariで文字が細く見えてしまう」現象が起こっています。 デバイスのdpiによる見え方 このまま各ブラウザでアンチエイリアスを揃える設定しても良いのですが、1x, 2xの解像度による見え方を見ていきましょう。(今回はThunderbolt Display = 109ppi, MBP Retina Display = 220ppiで検証・比較。実際に表示した画面をスマホのカメラで加工が無いようにして撮りました。) 109ppi(Thunderbolt Display) 220ppi(MBP Retina Display) 以下のことがわかります

マテリアルデザインでは、Googleにより作り方のガイドラインがしっかりと決められています。しかし、ルールがかなり多いため、どうしても間違った表現をしてしまいがちです。今回はマテリアルデザインでやってしまいがちな間違いを淡々と紹介していきます。WEB制作、アプリ制作時のチェックリストとしてご活用ください。 Google I/O 2018でのガイドラインのアップデートを反映しました。 重要なルール 1 マテリアルから文字をはみ出してはいけない

インフラストラクチャー部長の星 (@kani_b) です。 2017年1月5日をもって、クックパッド における全ページで HTTPS が使われるようになりました。 完全 HTTPS 化をするにあたり、その理由や具体的な進め方について紹介します。 以前 SRE Tech Talks #2 にて一部発表した内容も含みますので、ご興味のある方はあわせてスライドもご覧ください。 完全 HTTPS 化に踏み切った理由 以前のクックパッドは、ログインや登録情報の参照など、いわゆる個人情報や認証情報を扱う箇所のみに HTTPS が使われていました。 このように「必要な箇所にのみ HTTPS を使う」構成は、ある程度歴史のある Web サービスにおいてよく使われている構成です。 この状態から、完全 HTTPS 化に踏み切った理由を説明します。 サービスをよりセキュアにするため HTTPS の利用を考えるに

アニメで使われているフォントです。@anime_font

この記事は、加筆して「CSS Grid Layoutをガッツリ使った所感 - ICS MEDIA」に引っ越しました。 引越し先の記事では CSS Grid Layoutを使ってよかったこと 逆に苦労したこと、解決できなかったこと IE 11対応には工夫が必要 Autoprefixerの最新版を使えば、IE 11向けのコードに変換してくれる という内容をまとめています。 ※Google検索で辿り着いた方がリンク切れだと申し訳ないので、投稿は残しておきます。

レスポンシブWebデザインとは、画面の横幅に応じてWebサイトの表示を変化させ、最適化するデザイン手法です。 レイアウトが「シングルカラム」から「マルチカラム」に変化したり、ナビゲーションメニューが「ハンバーガーメニュー(三←こういうの)」から「横並び」に切り替わったりすることで、スマートフォンから、タブレット・PCまで、画面の横幅に合わせて、Webサイトを最も見易い形で表示します。 そして、そのデザインが変わる境目を「ブレイクポイント」と言います。 ブレイクポイントは、画面のピクセル数（CSSピクセル ※）で表されます。 ※ CSSピクセルについては記事：高解像度ディスプレイとデバイスピクセル比 さて、このブレイクポイントですが、特に、「何ピクセルにすべき」「何箇所設定すべき」といった決まりがありません。 Web制作者も「この辺りに設定すれば大体スマートフォンとタブレットの境目になるので

Dismiss Document your code Every project on GitHub comes with a version-controlled wiki to give your documentation the high level of care it deserves. It’s easy to create well-maintained, Markdown or rich text documentation alongside your code. Sign up for free See pricing for teams and enterprises 「FEのためのJS基礎」シリーズについて 「JS基礎シリーズ」は、フロントエンドエンジニア向けのJavaScript（以下JS）の中でも、特に実践に必要となる情報のみを個人的にまとめたシリーズです。

SnippetsLabにいつも使う関数まとめるついでにQiitaにもメモっとく。 汎用関数 Htmlタグを除去 /** * Htmlタグを除去 * @param {string} str Htmlタグが含まれた文字列(<h1>サンプル文字列</h1>) * @returns {string} Htmlタグ除去された文字列(サンプル文字列) */ const removeHtmlTag = function (str) { return String(str).replace(/<("[^"]*"|'[^']*'|[^'">])*>/g, ''); }; /** * URLをパースしてGET値のオブジェクトにする * @returns {{}} GET値のオブジェクトです。 */ const purseQuery = function () { const result = {}; cons

知らないうちにWindowsユーザーにストレスを与えていることが…… 持っているだけでスタイリッシュに見えるMac。でも，Windowsを使っている人は 「Mac使ってる人って，送られてくるファイルが開けなかったり，文字化けしてたり，ムダな手間を増やしてくるだけで最悪だよね（笑⁠）⁠」 と思っているかもしれない――そんな心あたりはないでしょうか？ Macで圧縮されたファイルをWindowsで見ようとすると，次の画像のように，ファイル名が文字化けするうえ，意味のわからないフォルダもついでに現れることがあります。 ファイル名を変更すれば中身を見れないわけでもないですし，余分なフォルダは無視すればいいわけですが，いちいち面倒です。 Windows側で「Explzh」という圧縮・解凍ソフトを入れておくと，文字化けせずにちゃんと解凍してくれるのですが，「⁠なんで，わざわざこっちでひと手間かけないとい

Macで作業するときに知っておくと素早く作業できる10個のTIPSと、素早く作業する以外のTIPSを3個まとめました。 主に macOS Sierra 向です。 MacからiPhoneに素早くたくさん単語登録 #MacTips iPhoneの日本語入力にたくさんの単語登録をするのは面倒だが、実はMacで単語登録したものを同期できる。 ［システム環境設定＞iCloud＞iCloud Drive］にチェックを入れ［システム環境設定＞キーボード＞ユーザ辞書］で登録するだけ。 — なつき@スマフォコーディング講座まもなく (@Stocker_jp) 2016年12月7日 素早くテキスト読み上げ ［システム環境設定＞アクセシビリティ＞キーを押した時に選択しているテキストを読み上げる］にチェックを入れると、opt+escで簡単にテキストの読み上げができる。 私は速度を速めにして原稿内容のチェックに使っ

アプリやWebのUI制作では、もうSketchに完全移行したという方も多いのではないでしょうか。VASILYで開発・運用しているファッションサービス「IQON」でも、昨年の夏頃から徐々に移行を開始し、現在はほぼすべてのUI制作をSketchで行えるようになりました。 そこで今回は、Sketch移行を進めた際の「デザインのコンポーネント化」のポイントや、その恩恵をお話したいと思います。 デザインデータの属人化、という問題IQONは2010年にサービスを開始・運用してきたため、デザインデータの量がかなり多く、最新のデータがどこにあるのか分かりづらかったり、デザインデータのつくり方が「属人化」していたことが問題となっていました。 サービスの成長にともない2015年頃から徐々にデザイナーが増えてきましたが、新しいデザイナーが入った際すんなり作業を開始することが難しかったり、急対応が必要な際に作業し

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

即時関数は関数式で関数を作ったら、即時に実行する関数のことです1。JavaScriptでは有名なテクニックの一つですが、他の言語ではほとんど見かけません。まず始めに、なぜ即時関数が必要だったのかを説明し、そこからいかにして即時関数を取り除くかを考えます。 JavaScriptに即時関数が必要な理由 ES52以前のJavaScriptには次のような問題がありました。 グローバルスコープか関数スコープの変数しかない。 モジュールベースではない。 厳格モードへの切り替えが単なる文字列に過ぎない。 これを踏まえて、即時関数を使わざるを得ないところを見ていきます。 1. スクリプト全体を即時関数で囲む どんなプログラミング言語であれ、一つのファイルに全てを書いていくことは現実的ではありません。いずれJavaScriptを複数のファイルに分割して書いていく必要があるでしょう。そのとき、グローバル汚染が

ウェブページのレイアウトを作る手段には、CSSのGrid Layoutグリッド・レイアウト、Flexboxフレックス・ボックス、floatフロートなどがあります。 CSSのGrid Layoutはウェブページのレイアウト構築に役立ちます。従来floatやFlexboxでつくっていたようなレイアウトは、Grid Layoutで置き換えられるでしょう。しかし、すべてをGrid Layoutで置き換えるのが良いとはいえません。 float、Flexbox、Grid Layoutには、それぞれ特徴があるためです。特徴を使い分けていくことで、保守性の高いコーディングができるでしょう。本記事では、float、Flexbox、Grid Layoutの特徴と使い分け方をサンプルを通して紹介します。 Grid Layoutの基本については前回の記事『CSS Grid Layout入門』を参照ください。 この

Original：HAS VISUAL DESIGN FALLEN FLAT? （2015-01-20）by Emmet Connolly 2013年から2014年の劇的なUIフラット化により無数のピクセルが流れ落ちていった それはビジュアルデザインにおいて非常に大きな変化だった。Microsoftの急進的でモダンなMetro UIはその前兆だった。iOS7のリリースよって大衆化し、UIのトレンドは2極化した。Google Material Designによって、おおかた完成した。 フラットデザイン（未完成であるけれど便利な表現）はスキューモーフィズム（同前）を駆逐するだけでなく、それの墓の上で踊り、すべてのべべル、影、墓石のテクスチャさえ消し去ってしまった。 上図のようなデザインである。 発展、変化、流行は避けられないものだ。このような最新スタイルもまた、いつの日か廃れていくだろう。未来

モリサワは7月28日、2017年秋にリリースする新書体を発表した。新たに発表したフォントは、98の言語と海外の表記ルールに対応する「Citrine」（シトリン）のほか、縦書きの際文字のつながりによって形が変化する「みちくさ」など17書体。 「みちくさ」には、連綿体（文字を続けて書く書体）や代替字形（前後関係に依存する書体）が用意されており、OpenType機能によって文脈を考慮した書体を呼び出すという仕組みだ。

バーチー / GMO PEPABO inc. 2017.08.28 第9回ペパボテックカンファレンス ～ Vue.js 特集 ～ https://pepabo.connpass.com/event/63559/

始めの一歩としての色共有 ひとりのデザイナーに頼らず、チームで運用できる体制を作るためにも デザインシステム は有用なツールです。しかし、様々な UI コンポーネントと決まりごとが揃ったものを作るのは骨が折れる作業です。デザイナー（もしくはエンジニア）が独自で作って「さぁ使いましょう」と公開しても、使ってもらえるとは限りません。また、デザインシステムをどこで共有して、どのように使われるのかも考慮しなければならず、他社の真似事では済まないこともあります。 作る前から課題が山積みでなかなか手が出せないかもしれませんが、何か始めなければゴールに辿り着くことはありません。そんな現場でデザインシステムを作る場合、色から始めることをオススメしています。 色なんて単純なところは出来ていると思う方は多いと思います。デザイナーであればパレットにしてまとめているでしょうし、エンジニアであれば色は変数にして整理

ブログ書くぞーー！！ と取り急ぎのブログを立ち上げた のが 1 ヶ月前。 月日が経つのって早いですね（思わず目が遠くなる）。 その内ビルド方法を忘れて記事の更新できなくなりそうな未来が見えるわぁ…と思っていたら、 テンション上がるプロトタイピングツール「STUDIO」を見つけたので、 勢いに任せてその感想を書き散らしてみようと思います。 目次 作成したデモ プロトタイピングツールの使い所 STUDIO の感想 あとはこれができれば最高！！な要望 敢えての懸念点 まとめ 作成したデモ 百聞は一見に如かず。とにかくどんなプロトタイプが作れるのか見たい！！という方は、 以下からデモで作成したプロトタイプのライブプレビューがご覧いただけます。 iPhone 版 ※ 1 ページのみ Web 版 ※ 1 ページのみ sizucca.com（iPhone 版） ※ グローバルナビゲーション部分は遷移可能

💀 Webフォントの問題点 Webフォントに限らず、ブラウザでテキストを表示する過程には、フォントの読み込み作業が存在します。また、フォントを読み終えるまではテキストを表示させない機能1がブラウザには組み込まれています。 ローカル環境下のフォントであれば読み込みに時間はあまりかからないので問題ありませんが、webフォントの場合はローカルフォントと比べると読み込みに多くの時間を要してしまいます。 この機能の影響で、ページのロードをしてからテキストが表示されるまでの間、ユーザーはテキストを読むことができない為、不満や苛立ちを覚え、体験価値の低下やページの離脱を引き起こすと考えられます。 ⚔️ 'font-display'プロパティでこの問題に立ち向かう font-displayというCSSプロパティを用いることで、webフォントを読み終えるまではローカルフォントを代替的にロードし、テキストの

アニメーション（英: Animation）は、ウェブデザイン制作で必要とされる人気トレンドのひとつです。かろうじて気付くような控えめなローディングから、映画のような体験を提供するページ遷移まで、あらゆるデザインに採用されています。 ウェブサイトへのアニメーション実装を検討しているデザイナーには、無料プラグインが豊富に用意されています。デザイン的要素の強いものから、ユーザーエクスペリンスを向上させるものまで、さまざまなアニメーションを作成できます。 今回は、ウェブデザイナーが確認しておきたい、アニメーション用プラグインとライブラリ75個をまとめてご紹介します。利用するケースやアイデアに応じて、これらの素材を活用してみましょう。 ウェブデザイナーが試したい、ウェブアニメーション無料プラグイン、ライブラリまとめ 01. Animate.CSS Animate.CSS は、クロスブラウザ対応の基本

2017年9月14日 CSS 要素を横並びにする時に便利なFlexbox（フレックスボックス）。みなさん、使いこなせていますか？今回はFlexboxを使ったちょっとした小技や、ハマりがちなポイントとその回避例を紹介します！ ↑私が10年以上利用している会計ソフト！ 画像とテキストを互い違いに表示 See the Pen Flexbox – row-reverse tip by Mana (@manabox) on CodePen. まずは画像とテキストが入るボックスを作成。それらを囲む .box という div を用意しました。 HTML <div class="box"> <img src="images/iphone1.jpg" alt=""> <div class="box-text"> <h2>見出しが入ります</h2> <p>テキストが入ります</p> </div> </div>

フォント素人のWebエンジニアが、「フォントおじさん」に聞いてみた！Webフォントの最近の事情とか 白石 俊平（HTML5 Experts.jp編集長） こんにちは、編集長の白石です。 この記事は、9月24日に開催されるHTML5 Conference 2017に登壇するエキスパートに、予定しているセッションのトピックを中心に、いろいろ伺ったものです。セッションの内容をより深く理解する手助けになるだけでなく、本記事単体でも面白く読んでいただけることを目指しています。 今回お話を伺ったのは、ソフトバンク・テクノロジーの関口浩之さんです。 関口さんのセッションは「Webフォント最新事情2017～導入事例も一挙紹介～」（ルームE 11:20-12:00）です。（現在HTML5 Conferenceは定員オーバーの状態ですが、無料イベントということもあってキャンセルも多めに出るらしいので、あきらめ

以下はWhat the f*ck JavaScript?というリポジトリの日本語訳です。 What the f*ck JavaScript? JavaScriptは素晴らしい言語です。 単純な構文、大きなエコシステム、そして最も重要なところはコミュニティです。 同時に、JavaScriptは非常にトリッキーで面倒な言語でもあります。 幾つかの仕様は我々の仕事を地獄に変え、他の幾つかは笑える仕様です。 WTFJSの大元のアイデアはBrian Lerouxによるものです。 以下のリストは2012年のdotJSにおける彼のトーク、WTFJSに触発されています。 Node Packaged Manuscript 以下の内容はnpmでインストールできます。

私はWeb制作が初めての方向け講座だけでなく現役の制作者の方向けに様々なWeb講座をしていますが、現役のWeb制作者の方でもHTMLに関して意外と知られていないんだなと思うことがいくつかあります。 特に、HTML5以前の古いHTMLの使い方のまま覚えている方が多いように思われますので、この記事ではそれを中心に取り上げてみました。 なお、この記事はHTML 5.1およびWHATWG HTML Standardの仕様書を参考に書いています。 width=”100%” のように数値以外の文字列を “” に入れるのはNG たとえばimg要素などで、ブラウザの幅いっぱいに画像を表示したいという場合、昔はimg要素に width=”100%” のような属性をつけることがありましたが、HTML5からはwidthなどの属性値に数値以外を含めることができなくなっています。（つまり%などの単位を含めることがで

『Soldi』は、複数の企業と提携し情報を提供しており、当サイトを経由して商品への申込みがあった場合には、各企業から報酬を受け取ることがあります。ただし当サイト内のランキングや商品の評価に関して、提携の有無や支払いの有無が影響を及ぼすことはございません。また当サイトで得た収益は、サイトを訪れる皆様により役立つコンテンツを提供するために、情報の品質向上・ランキング精度の向上等に還元しております。 名古屋の事業会社でデザイナーをやっているAkitaと申します。 プロのデザイナーとして、デザインで気にしているところは沢山ありますが、中でも一番こだわっているのは「フォント」です。 「フォントの選び方でデザイナーの実力が分かる」というのは、私が最初にデザインを教わった先輩の言葉でした。 世の中にはどんどんクオリティが高く、美しいフォントが登場しています。 広告・パッケージではやはり有償フォントが目立

WordPressは「テーマ」をインストールして、ページの見た目や機能を変更することができます。WordPressは世界中にユーザーがいるので、たくさんのテーマが配布されていますが、テーマを選ぶ時、まずは見た目の美しさや機能性に目が行きます。そこでぜひ注目してほしいのはライセンスの違いです。大きく分けると、WordPress.org掲載テーマをはじめとする「ライセンスが100％GPLのテーマ」、「それ以外のライセンスのテーマ」の二つに分けられます。今回は、わたしのようなユーザでも「100％GPL」テーマについて知った方がいい理由について書きます。 ライセンスってなに？ 誰かが作ったものには「著作権」があり、他人が無断で使うことはできません。そこで著作権は作者が保持したまま、「使ってもいいですよ」という許可を与えるものが「ライセンス」です。ライセンスはGPLやMITなど有名なものから、「○○

さよならレガシーエンコーディング。 文字エンコーディング宣言が存在するかどうかにかかわらず、文書のエンコードに使用される実際の文字エンコーディングはUTF-8でなければならない。 4.2.5.5 文書の文字エンコーディングを指定する - HTML Standard 日本語訳 Require utf-8 when specifying character encoding by sideshowbarker · Pull Request #3091 · whatwg/htmlにより、HTMLで使用できるエンコーディングはUTF-8のみとなりました。これにより、古いHTMLでは許容されていた、Shift_JIS、ISO-2022-JP、EUC-JP、UTF16LEといった文字エンコーディングは適合するHTMLではなくなりました。すでにNu Html CheckerでUTF-8以外の文字エンコー

◉しっぽり明朝は商用・同人誌利用可能の明朝体フリーフォントです しっぽり明朝は、石井中明朝体OKLやリュウミンKO、A1明朝、筑紫Aオールド明朝等に影響を与えた、東京築地活版製造所の名作書体である五号系活字を下敷きに、物静かで上品で、見ているだけでうっとりするような明朝体を目指して制作した、オールドスタイル明朝体フリーフォントです。 どんな方でも制限なく自由に使えるハイクオリティな本文用明朝体をお届けしたいと考え、こしらえました。フォントを単体で販売したりライセンスを変更する以外は商用でも個人利用でもおおよそ自由に使えるSILオープンフォントライセンスのフォントです。 ◉本文用Regularウエイトを含め全5ウエイトの“新しっぽり明朝” ヴァージョン3は“新しっぽり明朝”と謳ってもいいかもしれません。 それまで開発で使用していたフォント制作ソフトをFontforgeからGlyphsに変更し

はじめに 最近耳にする Vue.js（ビュージェイエス） ってどんなもの？ jQuery とどう書き方違うの？とか、jQuery でやってたこういう事って Vue.js だとどうやるの？jQuery しか使ってないけど Vue.js も使ってみたいなぁ～と思っている人向けの小難しいことは省いた記事です。私もそちら側から来たものです。 Vue.js 日本公式ページ（日本語翻訳率が半端ないと評判） もともと「jQuery から Vue.js への移行」というタイトルでしたが、それだと jQuery を完全にやめる、的なニュアンスになってしまうので、少し変更しました🐹 jQuery と Vue.js の違い jQuery は、セレクタ操作に特化したライブラリで HTML の一部をちょっとだけ弄るには手軽に扱えます。更新のたびにセレクタから要素を探して操作をするため、複数の UI を連携させるよ

社内向け勉強会で作ったスライド ※Bracketsの拡張機能「Shizimily Multiencoding for Brackets」は最新Bracketsにはいらないようです！

HTML <header> <div id="nav-drawer"> <input id="nav-input" type="checkbox" class="nav-unshown"> <label id="nav-open" for="nav-input"><span></span></label> <label class="nav-unshown" id="nav-close" for="nav-input"></label> <div id="nav-content">ここに中身を入れる</div> </div> </header> inputやらlabelやらが入っていて、何のことが分かりづらいかと思うので、少し解説をします。 解説 全体はheaderで囲んでいます。他にもサイトタイトルやロゴ画像を入れるのではないかと思います。<div id="nav-drawer">の中に

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

以前であればJavaScriptを利用して実装していた、メニュー下にあるアンダーラインをホバーしたメニューへスライドしながら追従する動きをCSSのみを使って実装する方法です。 どのようなものなのか実際の動きを見たほうが早いと思うのではじめにデモを紹介すると、このようにメニュー下にあるアンダーラインがホバーしたメニュー下へスライドしていくという動きになり、JavaScriptは使用せずにCSSのみで実装しています。 HTMLは下記のようなものを使用し、a要素は単純なリンクで.nav-underlineが追従してくるアンダーラインで使用する要素になります。 また、ハイライト表示している付与されているclassはよくあるカレント表示用に見栄えを異なるものにするのに使用するclassになっており、これをそのまま使用した場合は上のデモにあるように3つ目のメニュー下にアンダーラインがあるのが初期表示と

みなさまへのお願いごと 間違いなどの指摘は、編集リクエストでお願いします。 コメントの記載はページが長いこともあり、お控えください。 TOEIC900でも英語が話せない日本人へ ITエンジニアの私がなぜ令和の今、中国語を学ぶのか？ 名詞/イディオム gotcha はまりポイント。注意すべきこと。引っ掛け。 Got you のくだけた表現。捕まえた、誰かをトラップに引っ掛ける、という意味から。 注) 一般的には、Got itやYup、I seeのような、同意の返事でよく使われる。 類) caveat, pitfall There are many gotchas in this application. sought-after (スキル、人材、機能、アプリが) 人気の、需要がある、求められてる、引っ張りだこ Python is a sought-after language. c-suit

１.どんなデバイスでも同様の体験を提供する サイトの訪問者は、さまざまな種類のデバイスを使ってサイトにアクセスしています。デスクトップかもしれませんし、ラップトップやタブレット、携帯電話、音楽プレイヤー、または腕時計を使っているかもしれません。 UXデザインにおいて重要なのは、訪問者がどのようにサイトを閲覧しても、デバイスの種類に関わらず同様の経験を提供しなければならないことです。 ※編集部より：一部、誤訳がありましたので修正しました（11/10 11:00） ２. 使いやすくわかりやすいナビゲーションをデザインする ナビゲーションはユーザビリティにおける要です。どんなに良いWebサイトを作ったとしても、ユーザーがサイト内で上手く操作できないならば意味がないということを覚えておいてください。そのため、サイトのナビゲーションは以下の項目に従うべきなのです。 シンプル：どんなサイトであっても最

本題の前に まず「オブジェクト指向」という言葉を知っただけのまったくの初心者の方のために例を出してイメージをつかんでもらいます。あくまで例なので色々不完全なのはご了承ください。言語はJavaですがJavaを知らなくても何となく分かるように書きます。 オブジェクト指向とは （即物的に言えば） データとそれに関わるメソッドを クラス(class) にまとめてプログラミングすることです。 例えば友達の情報を管理するために以下のような「友人」クラスを考えてみましょう。 class Friend { String name;//名前 String phoneNumber;//電話番号 String mailAddress;//メールアドレス Friend(String name, String phoneNumber, String mailAddress) { //thisは自身を意味する thi

最近大学時代の同期と飲んだらMSに転職したので 現在から過去の案件で産廃IEくたばれと心底思った発生した事象と対策を書いていきます 他にもこんなことあったぜ！って意見ありましたらお待ちしております。 キャッシュ Windows10のIE11で遭遇した事象 ログイン→ログアウト→別アカウントログイン したときの挙動が最初のログインアカウントの状態のレスポンスが返ってくる Authorization: Bearerヘッダーが再ログインしても前のBearerトークンが残り続ける APIレスポンスが前回のものが返ってくる JSのすごい人に助けてもらいました・・・ ClearAuthenticationCacheを無効にする リクエストキャッシュしないようにリクエストパラメータ末尾に日付をつける→jQueryでもこの方法で回避しているらしい これIEのバグですよね？ // ClearAuthenti

“WordPressを簡単に1620倍高速化“する「部分キャッシュ」活用テクニック：とにかく速いWordPress（20）（1/4 ページ） エンタープライズ用途での利用が増えている「WordPress」の高速化チューニングテクニックを解説する本連載。今回は、「WordPressアプリケーションレベルで実施する高速化チューニング」のポイントを解説します。 連載バックナンバー 前回は、「WordPress実行環境としてのサーバのセキュリティ対策」と「開発者がWordPressアプリケーションを開発する際に実施すべき対策」のポイントを解説しました。今回は、WordPressアプリケーションレベルで「もっと高速化する」テクニックを紹介します。 「全体キャッシュ」と「部分キャッシュ」の違い WordPressの高速化チューニングと聞いて、皆さんはどういった手法が思い浮かぶでしょうか？　具体的には、

一部ブラウザ（特にIE）で若干挙動が違ったりすることもあるものの、Flexboxを利用することで今までCSSだけでは難しかった見栄えが実装できたり、よりシンプルなHTML・CSSで実装できるレイアウトが増えました。 そんなFlexboxを利用してサイト制作時によく出てくるレイアウトを実装したサンプルをいくつか紹介します。 紹介するものは基本的にプレフィックスを省略しているので、必要があれば各自で追記してください。 基本的に各実装に必要なFlexbox関連の最小限のコードのみ紹介していますが、サンプルによってはわざわざ初期値（flex-wrapやalign-itemsなど）を指定している場合があります。 それらは挙動を把握しやすくするために記述されているものなので、不要であれば記述する必要はありません。 表示確認のデモはPCでの閲覧推奨です。 要素を両端に寄せる 特にヘッダーやフッターで利用

2017年11月17日の「まぼろしのマークアップ勉強会 #1」でお話したスライドです #mbrs_markup_study

11月に入った後に「10月までで退職ってことにしてもらっていいかな」と言われたのが12年前のちょうど今頃でした。 今考えると、いや考えなくても結構ひどいっすね。 そんな流れでフリーランスになって丸っと12年たったわたしですが、今回13年目を迎えるにあたって一つ大きな転機もついでに迎えることとなりました。 続きを読む フリーランス13年目が会社員をはじめる理由

JavaScriptのプログラミングはこれだけ効率化できる！ 使用歴5年目のエンジニアが送るWebStormの厳選神業集 JavaScript（ES2015+）、TypeScriptの需要は高まる一方ですが、プログラミングの効率化をどれくらい意識していますか？ プログラミングが効率化されれば、作業時間の短縮、ケアレスミスの軽減、プロダクトの品質の向上、そしてストレスの軽減に繋がります。 筆者が5年間使用している「WebStorm（ウェブストーム）」は、JavaScriptのプログラミングをする上での面倒な処理をほとんど自動化するための機能が揃っていて、ロジックの検討や表現の作り込みに時間を割けるようになります。 本記事では、多くの機能の中からとくに便利だと感じるものをピックアップして紹介します。WebStormを使ったことがない方も、「この作業はツールで自動化できるのか」という知識を得て、

ムリなく続けられる「週末まとめて作り置き」のコツや、時短・簡単な作り置きおかず、人気の常備菜レシピをご紹介。お弁当、冷凍保存、節約などの目的に合ったレシピがきっと見つかります。

سایت بت معتبر آنلاین اگر می‌خواهید یک سایت بت که امکانات فوق العاده عالی و درگاه بانکی معتبر را داشته باشد در این مقاله به طور کامل آن را بحث و گفتگو خواهیم کرد یک سایت بت در نگاه اولیه باید خدمات مهم و فوق‌العاده‌ای را داشته باشد به عنوان مثال  اگر در این سایت بت پشتیبانی را جستجو بفرمایید باید پیام های شما را در کمتر از چند دقیقه پاسخ می دهند بنابراین سایت بت معتبر سایتی است که پشتیبانی کامل و د

創業9年にして、時価総額3兆円を超えると言われる民泊サービス「Airbnb（エアービーアンドビー）」。 所有する住居や別荘を宿として提供することで、貸主は空き家を資産として活用することができます。旅行者はホテルよりも安く滞在できることから、民泊サービスは日本でも着実に利用者を獲得しています。法整備が追いつかず、グレーゾーンとして扱われてきましたが、2017年6月「住宅宿泊事業法（民泊新法）」が成立。施行後は年間上限180日／登録制で提供されることになります。 これからますます私たちにとって身近になるであろうこのサービス名と並んで、彼らを象徴するものがあります。「Bélo」と呼ばれるエアビーアンドビーのブランドロゴです。 「旅行サービス」と聞いて、思い浮かぶのはどのようなロゴでしょうか？　宿泊を連想させる家やベッド？　旅を連想させる飛行機？ しかし、彼らのシンボルにそのような要素は見当たりま

こんにちは、 UXデザイナーの @yuh_iw です。 この記事は NTTコミュニケーションズ Advent Calendar 2017 の23日目です。 すべては最高の体験のために 弊社では、ようやく社内にUXデザインという言葉が浸透し始めていますが、 実態はUIと共に語られることが多いです。（実際は違うよ） とはいえ今回はUIを作るために私達がいつも行っていることについて記載します。 どうやってUIを作っていくのがよいか とにもかくにも、ユーザーに対する検証と学習をくり返すことです。 最高のUI=カッコイイUIではありません。アーティスティックなUIでもありません。 UIにはユーザーがいるので、ユーザーが使いやすいと思わなければならないのです。 そのために、使ってくれそうな人に、検証していく必要があります。 検証するためにはいくつか方法がありますが、 本稿ではUIプロトタイピングを行う

PySpa統合思念体です。これからJavaScriptを覚えるなら、「この書き方はもう覚えなくていい」（よりよい代替がある）というものを集めてみました。 ES6以降の難しさは、旧来の書き方にプラスが増えただけではなく、大量の「旧来の書き方は間違いを誘発しやすいから非推奨」というものを作り出した点にあります。5年前、10年前の本やウェブがあまり役に立たちません。なお、書き方が複数あるものは、好き嫌いは当然あると思いますが、あえて過激に1つに絞っているところもあります。なお、これはこれから新規に学ぶ人が、過去のドキュメントやコードを見た時に古い情報を選別するためのまとめです。残念ながら、今時の書き方のみで構成された書籍などが存在しないからです。 たぶん明示的に書いていても読み飛ばす人はいると思いますが、すでに書いている人向けではありません。これから書くコードをこのスタイルにしていくのは別にいい

2017年ももう終わりなので、自分用のメモも兼ねて今年触った技術をざっとメモしてみる。 フロントエンドに対しては大凡モダンなものを使っているけれど、他についてはその限りではないので、自分が古いと感じるものについては来年以降移行したいもの、手をつけたいものもあわせてまとめる。 ちなみに今年のGitHubで見えるだけのアクティビティとしてはこんな感じ。そこそこコードは書いた。 技術の分類 とりあえず以下でカテゴライズしておく。そこそこその他はありそう。 Webフロントエンド Webバックエンド その他Node周り インフラ / ミドルウェア Webサービス(クラウド周り) まとめ Webフロントエンド フレームワーク周り 基本的に去年に続きVue.jsが中心でコードを書く機会が多かった。体感Vue:React:Angularが7:2:1くらい。他もちょこちょこというところ。一定以上有名なもので

マイクロインタラクションは、ボタンのタップやポップアップの表示、フォーム入力時のアテンションなど、ユーザーの行動やトリガーによって起こるアクションです。単なるアニメーションではなく、ユーザビリティを向上させ、またユーザーに楽しい体験を与えることでWebサイトやサービスの利用を手助けします。 たとえば、FacebookやTwitterの「いいね」ボタンや、タイムラインの更新、新しい通知がある場合のアラートの表示など、さまざまなケースで使用されています。しかし、多様なマイクロインタラクションを一から自作するのは大変手間がかかるものです。 本記事ではコピー&ペーストで導入でき、改変もしやすいCSSで表現したマイクロインタラクションを紹介します。こちらは筆者が制作したもので、商用・個人問わず無償利用できるMITライセンスで公開していますので、Webサイトやコンテンツ制作にご活用ください。 「メニュ

はじめに 自己紹介 私は日本にAndroidが上陸したAndroid 1.6の時代(2009年頃)からAndroidの開発者としてAndroid7系になった今も(執筆時2017年)Androidエンジニアを続けています。 Androidの歴史をずっと側で見守り続けた私がエンジニア目線で思っている事を述べるので、これからAndroidのデザインをするデザイナーに見て頂きたいです。 ※ この記事の内容は一個人の意見で所属先は一切関係ありません 一番言いたいこと まず、普段iPhoneを使っているデザイナーは最新もしくは1つ前のOSが入ったAndroid端末をメイン端末とまではいかなくても2台持ちにして常用して下さい。 ハッキリ言ってこれが全てです!! 良さ気なUIのアプリを一通り入れて数十分触るだけでは全く意味がありません。 Androidの良さは通知やIntentと呼ばれるアプリ間の密な連携

はじめに 先週フロントエンドエンジニア向けの勉強会に行った際、最近フロントエンドエンジニア（コーダー寄り）になったという方に、 「なんでjQuery以外のライブラリやら、フレームワークやらを覚えないといけないんですかね。業務ならjQueryだけで十分なのに」 と訊かれ、その場の思い付きでつらつらと説明しましたが、改めてその理由を考えてみました。 状況整理 確かに、今からフロントエンドの仕事をしようとしている人や、新しい情報をキャッチアップしていなかった人にとって、今のフロントエンド界隈の新旧入り混じった状況はカオスに映るはずです。 現場ではjQueryが重宝され、それで十分業務は回っているのに、ネットを覗いてみると、やれSPAだ、リアクティブプログラミングだと騒いでおり、Angular、React、Vue.js、PostCSS、Sass、Babel、webpackなどの横文字が乱立していて

こんにちは。入社以前はエディトリアルデザイナー（新聞・雑誌・書籍などの出版物のデザイナー）として書籍の装丁などもしていました。フロントエンドエンジニアのほりでーです。 今回は紙のデザインとWebデザインにある大きな違いのひとつ、「文字組みアキ量」というものについてお話しします。日本語組版のルールにも詳しく触れていくため、Webの経験しかない方も是非読んでみてくださいね！ 2017年2月27日追記：有識者の方からのご指摘を反映し、記事の内容を一部訂正いたしました。詳細な訂正内容については記事末尾をご覧ください。 今回の要点 日本語組版は約物（記号類）のアキが大事 Webブラウザの文字組がイマイチなのは、約物のアキ量が常に一定であることが原因 font-feature-settings: “halt” 1; で約物のアキをなくせるようになった jQury.yakumonoプラグインで行末約物半

がっきー@漫画家総合垢 @gakky88NSR ゲーム開発時代の話。 開発の中盤、開発は難航していた。 会議はミスやトラブルの責任の追求が中心に行われ、処刑場になっていた。 ある日、新しいD（ディレクター）が配属された。 僕の大好きなゲームを作った人だった。 2017-02-10 22:39:45 がっきー@漫画家総合垢 @gakky88NSR Dが来て初めての会議。 リーダーはいつもの様にミスした者や遅れた者を探し、追求し、叱った。 Dはそれを見て笑った。 「ずっとこんな事してたの？」 「やめやめ！会議のやり方を変えます」 2017-02-10 22:40:07 がっきー@漫画家総合垢 @gakky88NSR 「まず、進捗の報告は出来てない物、問題のある物だけで良いです。 出来てる物は予定表で分かるから必要無い。 で、その問題がどうすれば解決出来るか、助けがいるなら何が欲しいかだけを話し

どうも、まさとらん（@0310lan）です。 今回は、既存のWebサイトを究極にシンプルなCMSっぽく管理することができる無料のWebサービスをご紹介しようと思います！ このサービスを活用すれば、Webサイトのテキストや画像などの編集、サイトの更新作業などを直感的に誰でも行うことができるようになります。 【 Simpla 】 ■「Simpla」とは？ まず最初に、「Simpla」がどのようなサービスなのかを実際に見ていきましょう！ 以下に、「Simpla」を導入したサンプルサイトがあります。 見た目はごく普通のWebサイトですが、URLの末尾に「#edit」と追記して再読み込みします。 すると、専用の「ログイン画面」が表示されます！ 「Simpla」アカウントでログインすると、画面上でそのままコンテンツを編集できるようになります！ （編集できる箇所、できない箇所の設定も可能です） また、画

11月に入った後に「10月までで退職ってことにしてもらっていいかな」と言われたのが12年前のちょうど今頃でした。 今考えると、いや考えなくても結構ひどいっすね。 そんな流れでフリーランスになって丸っと12年たったわたしですが、今回13年目を迎えるにあたって一つ大きな転機もついでに迎えることとなりました。 続きを読む フリーランス13年目が会社員をはじめる理由

この記事はSketch Advent Calendar 2016 21日目のエントリーに入る予定だったんですが、21日目の記事を見ての通り、長くなっちゃったので分割した片割れの記事となります。 Sketchを使っていると、こんなとこが不便だなーとか、こんな機能デフォルトでないのかな？ などの疑問が浮かんできます。本記事ではそんな痒いところに手が届くかもしれないtipsをご紹介します。プラグインを入れるともっと便利になったりしますが、それはまた次の機会にでも。 Sketchの知っておくと便利なtips グループ化したあと、グループの中のレイヤーを簡単に選択出来るようにしたい レイヤーを選択する際に、Photoshopだと移動ツールを選択した際にクリックした先がレイヤーかグループか選べるセレクトボックスがありますが、Sketchにはありません。そしてSketchの選択ツールのデフォルトはフォル

ゴシック体を、「自然体」へ。いちばん人に近い、伝わる文字へ. たづがね角ゴシックは、Monotypeの欧文書体、Neue Frutiger®に合う日本語書体として開発がスタートしました。Neue Frutigerのような〈安心感〉をもつヒューマニストサンセリフ体として、サイン・書籍・広告・Web等、用途を限定しない汎用性の高い製品を目指しました。漢字と仮名などの日本語の文字サイズに合わせて、あらかじめNeue Frutigerを拡大し、ベースラインシフトを施した状態で搭載しています。 デザイナー 小林章 山田和寛 土井遼太 Foundry Monotype Studio Classification Sans Serif Friendly Legible Modern Readability Confident Gothic Japanese たづがね角ゴシック たづがね角ゴシックは、Mo

The Blog | Welcome to Adobe Blog アドビのブログでは、Creative Cloud、Document Cloud、Experience Cloudの最新情報や役に立つ情報を紹介しています。

はじめに http://qiita.com/raccy/items/bf590d3c10c3f1a2846b を見ていたら、はてブに「理由がないから」ということがよく挙がっていたので、理由をつけてあげたら有益な内容になるかな？と思い、拙いながらも補足を試みようと思います。 【2017 1/3 15:10 追記】 元記事の前提はgulpなどを使ってminifyなども行なえる（もしくは行う目標がある）前提の様子なので、中級者以上がターゲットかなーと思いました。そのつもりで読むととてもいい記事だと思っています。 「最新のJSの書き方を覚えてあとは変換機能に任せればレガシーなJSのキツイところに向き合わなくて済みますよ？」みたいなイメージだとわかりやすいかな？ ==、!= 理由 暗黙の型変換が発生して、別の型の比較が真で扱われてしまう場合があるため。 解説 サンプルコードにも出ていますが言葉足らず

備忘録を兼ねて、企業サイト構築時に決めている設計方針・インストールしているプラグイン・セキュリティ対策をそれぞれまとめました。セキュリティ対策の項目を除き、構築時の細かい設定やプログラム実装についての説明は省略しています。 （※）2018.01.13: セキュリティ対策について加筆・修正を行いました 概要 実装する際の方針として、WordPressと紐付ける必要のないファイルは、できるだけWordPressのファイル・フォルダと分けて構築する手法を採択しています。これはサイト全体をWordPress依存にさせたくない、ということが大きな理由です。 また、関係ないファイルをWordPress内で管理させることによって、お客様やHTMLに詳しくない編集者が不用意にファイルを更新してしまうことを防ぐ意味もあります。8年以上WordPressと付き合ってきましたが、以下の設計方針が最も最適だと考え

Webフォントを使用しているサイトやブログが増えてきました。そして、近日アップデートされるChrome 60では、Webフォントの使い勝手を向上する「font-display」プロパティがいよいよ正式に実装される予定です（参考: Chromium）。 追記: さきほどChrome 60がリリースされました。 Webフォントを適用したテキストが読み込み時に一瞬表示されない現象があり、今まではJavaScriptで対応していた人、仕様だとあきらめていた人は、このfont-displayを積極的に取り入れるべきだと思います。 font-display for the Masses 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 ブラウザでフォントが読み込まれる仕組み font-displayプロパティとは ほとんどの場合、swapを使

0. はじめに この記事では、CSS Grid Layoutの基本は知っているという前提で、いろいろな場面を想定して更なる使い方を書いていきたいと思います。 この記事は4部構成の中の 場面別編 です。 CSS Grid Layout を極める！（基礎編） CSS Grid Layout を極める！（場面別編） ←これ 作成中：CSS Grid Layout を極める！（アルゴリズム編） 作成中：CSS Grid Layout を極める！（番外編） トラックの大きさを柔軟に指定したい (grid-template-rows / grid-template-columns) トラックの幅・高さの指定は grid-template-rows / grid-template-columns で行いました。 基礎編では px を主に使いましたが、他にも様々なものが使えます。そして、以下で挙げる値は自

0. はじめに CSS Grid Layout（グリッドレイアウト）は、2次元レイアウト を、HTML/CSS を使って簡単・自由に操作できる、CSSの新しい機能です。 格子状のマス目のグリッドに好きな順番に配置したり結合したりすることで、様々なレイアウトが可能になります。 例えば、こんな簡単なHTMLで・・・ <body> <h1>タイトル</h1> <article>記事1</article> <article>記事2</article> <article>記事3</article> <article>記事4</article> <nav>ナビ</nav> <footer>フッター</footer> </body> CSSをちょっと書けば、こんなレイアウトが出来てしまいます！ 当記事では、こんなレイアウトを可能にする CSS Grid Layout の解説をしていきます。 尚、CSS

2021/3/16 初めて記事を書いてから３年以上経過してしまったので、 内容を見直ししました。 関係者が10名以下の小〜中規模案件の開発・保守が多い弊社のCSS・JavaScript規約（にしたい）です。 長くなってしまったコーディング規約もようやく最後です。 ↓関連 環境構成編 HTML編 CSS、JavaScript は数年で書き方が変わってしまうので、 定期的に規約の見直しができると理想ですね。 小〜中規模サイトのフロントエンド・コーディング規約　CSS編 ディレクトリ構成 CSSに関するファイルの一般的な例を示します。 ルート ├ src ... 作業ディレクトリ │　├ scss │　│　├ lib ... 外部ライブラリなど │　│　├ sprite ... spritesmith などで生成したファイル │　│　├ foundation (base) ... 変数や mix

こんにちは、保井崇志 @_tuck4 です。 「フォトグラファー」ほど誰でもかんたんになれてしまう職業って他にないんじゃないでしょうか。 以前、医学生の友人と話していてビックリしたんですけど、国内の大学医学部は6年制なんですね。さらに卒業しても研修医の期間が2年間あるので、「私は医者です」といえるそのスタート地点まで、最低8年間あるわけです。 お医者さんと比べるのもあれですけど、「私はフォトグラファーです」というのは誰でも、今すぐにでもいえてしまいます。機材に関しても、例えばじぶんは富士フイルムのミラーレスカメラで全ての仕事の撮影をこなしていますし、昔の商業カメラマンほど高いスペックを求められることもありません。 誰もがフォトグラファーになれる時代。多くの才能がこの職業に集まってくるなか、まがりなりにも5年間フリーランスのフォトグラファーとして活動してきました。 そこで今回は「フリーランス

CSSの関数には便利なものがたくさんあります。例えば、div要素に「width: calc(100% - 50px);」と指定することで、幅いっぱいから50pxを引いた値を幅に適用できます。 minmax()関数はcalc()関数のように数字やキーワードを使って、要素の最小値と最大値を指定でき、簡単なCSSの記述でレスポンシブ対応の高度なレイアウトを作成できます。 下記のレスポンシブ対応のグリッドはたった2行のCSSで、プロパティも2つだけです。 How the minmax() Function Works 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 minmax()の基本的な使い方 minmax()を使うと、Media Queries無しでレスポンシブデザインができる サポートブラウザ minmax()の基本的な使い方

2016/9/8 ※cssnextに含まれる機能についての記事を書きました。 cssnextから学ぶ次世代CSS PostCSSを知っていますか？ 筆者はどこかで聞いたことあるぐらいで 次のCSS？ またSassみたいなやつ作ったのか もうSassで終わりにしようぜ（覚えるの辛い） といった負のイメージから勉強してみたのですが、だいぶ想像と違いました。 Sassの代替というよりかはCSSのエコシステムを構築するための共通基盤、といったところでしょうか。 本記事はタイトルにもあるようにPostCSSを使ってCSSをモダン化する流れで書きました。 「Sassすら使っていない」「このCSS界隈のライブラリよくわからない」という方こそ是非読んでみてください。 PostCSSとは 2015年4月頃以前はこんな感じ SassやLESSを筆頭にプリプロセッサとPostCSSを内部的につかっていたcssn

僕はPostCSSは開発当初から追いかけていて、GitHubでPostCSSチームのメンバーのひとりだったり、実際にPostCSSを使ってプラグインやツールをいくつか作ったり、ブログや雑誌で記事を書いたり、勉強会等で話したりしています。 本記事では、自分が知っているPostCSSについての事柄を共有します。 PostCSSとは何か PostCSSとは、ロシア人の Andrey Sitnik という人が開発している、Node.js製の「CSSツールを作るためのフレームワーク」です。PostCSS製のツールとして、ベンダープリフィックスを自動で付与する「Autoprefixer」、未来のCSSの構文の一部を今のブラウザで解釈できるようにする「cssnext」、カスタマイズ性に富んでいるCSSリンターである「stylelint」などが有名です。 PostCSSは2018年2月、かなり広く使われて

アプリのUIデザイン作成ツールとして有名な Sketch 。今週、バージョン44が発表されたタイミングで、Sketch をより使いやすくするオープンソースの優れた無料プラグインをまとめてみました。 Sketch のユーザーコミュニティーは、とても活発に情報交換が行われており、ワークフローを根本的に改善する数多くの素晴らしいプラグインを見つけることができます。この記事では、すべてのデザイナーが持っておきたいベストプラグイン12選をご紹介します。 UIデザインの作成ツール Sketch！10の魅力と入門フリー素材50個まとめ Sketch Measure Sketch Measure は、デベロッパーやプロジェクトマネージャー、他のチームメンバーの作業を整理し、プロジェクトの概要をまとめるのに役立ちます。 また、デザインからコーディングまですべてのプロジェクトを一人でこなすひとにも便利なツール

リキッドレイアウトのように幅が常に変動するレイアウトのデザインは、動かないカンプからは実際の挙動が読み取れず、デザイナーの意図が汲み取りきれないことが多い。また、複雑化するアニメーションの実装においても、カンプだけではコミュニケーションに不備が生まれてしまう。ほかにも、CMSを使った案件ではデザインカンプと実際のデータの間に齟齬がある可能性もある。 実装効率を高めてスケジュール通りに仕事を終わらせるには、とにかく事前に仕様を固めることが大事だ。ワイヤーフレームやデザインの途中の段階からなるべくデザイナーとコミュニケーションを重ね、想定外の要件が発生しないように気をつけるべきだろう。 この記事では、デザイナーやフロントエンドエンジニアが見落としがちなWebフロントエンドの課題について列挙していく。 ホバー表現を後から指示される ツッコミ 後から仕様追加されると困るから先に決めて! メモ 最近

FINDJOB! 終了のお知らせ 2023年9月29日にFINDJOB!を終了いたしました。 これまでFINDJOB!をご利用いただいた企業様、求職者様、様々なご関係者様。 大変長らくFINDJOB!をご愛顧いただき、誠にありがとうございました。 IT/Web系の仕事や求人がまだ広く普及していない頃にFind Job!をリリースしてから 約26年間、多くの方々に支えていただき、運営を続けてまいりました。 転職成功のお声、採用成功のお声など、嬉しい言葉もたくさんいただきました。 またFINDJOB!経由で入社された方が人事担当になり、 FINDJOB!を通じて、新たな人材に出会うことができたなど、 たくさんのご縁をつくることができたのではないかと思っております。 2023年9月29日をもって、FINDJOB!はその歴史の幕を下ろすこととなりましたが、 今後も、IT/Web業界やクリエイティブ

ここ数年でフラットデザインが流行ってるので、デザインする時に背景は単色が多かったのですが、LPのデザインなどをするようになり、背景のパターンをよく使うようになりました。 色々と重宝するので、いつも利用している素材サイトをまとめてみました。 いちいち探すのがめんどくさい人は、ブックマークしてね。

はじめに 僕はウェブサイト制作会社でサイトの運用・アクセス解析担当をしている者です。 ウェブサイトの制作・リニューアルを受注した際にプロジェクトに参加し、クライアントの現状サイトのアクセス解析とレポート作成、リニューアル提案が主な仕事です。 クライアントと直接相対するディレクターから「GoogleAnalyticsの権限もらったからアクセス解析して」とオーダーを受け、アクセス解析を行うことになります。 そもそも、初めて見るサイトを構造から理解し、リニューアルに資する提案ができるようなインサイトを得るまで分析するのは本当に骨が折れます。 さらに（全くの主観ですが）、多くのクライアントはGoogleAnalyticsを「タグ貼っただけ」状態で放置しています。 そのため、計測したデータが整理されていない・そもそも正しく計測できていないということはよく起こります。 そして、そのような計測エラーがノ