JavaScriptのデバッグは、ウェブ開発の必須スキルのひとつです。プログラムの実行をデバッグすることで、現在の変数の値や、処理がどのように進んでいるのかを確認できます。デバッグによってプログラムが意図した動作になっているかの分析に役立てられます。 本記事ではGoogle Chromeブラウザーの「Chrome Developer Tools」（以下「デベロッパーツール」、「DevToolsデブ・ツールズ」という略称もあります）を使用してJavaScriptをデバッグする際の基本的な使い方を解説します。「今までデベロッパーツールを使ったことのない」という方でもこの記事を読めば理解できるよう、チュートリアル形式になっています。20分ほどで理解できるようまとめているので、順番に試しながら読み進めてください。 この記事で学べること デベロッパーツールの使い方 JavaScriptのブレークポイ

『無料コーディング練習所』では、完全無料のコーディング教材を提供しています。 入門編から上級編まで６サイトをコーディングすることで、 HTML・CSS・jQueryの基礎スキルがしっかり身につくカリキュラムになっています。 デザインカンプと完成版コーディングデータ付きです。 この教材は制作会社の新人コーダーの教育にも使用されています。 さぁ、楽しみながら一緒に勉強していきましょう♪

俺流レスポンシブコーディングの覚書。「人には人のレスポンシブ」があるのでこれが正解だってわけではないのですが、レスポンシブコーディングで悩んでいる人にとって参考になる記事になってくれたら嬉しいです。 ブレイクポイントは特定のデバイスの画面サイズを基準にしない 以前アンケートを取った時にデバイスのサイズを意識して決める人が半数以上を占めていた。 アンケート結果を抜きにしても「2021 年のブレイクポイント決定版はこれだ！」的な記事がバズっているのを定期的に目撃し、主流のデバイスのサイズを比較するアプローチがほとんどであるが、僕はデバイスの端末のサイズを基準にブレイクポイントを決めることには否定的である。 主流のデバイスのサイズなんてものは時間が経てば変化する。 昨年 iPhone 12 が発表された時に従来の画面サイズとは違うバリエーションになることが分かるやいなやタイムラインが慌てふためい

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

View the keynotes and sessions from the one-day festival of creativity. Spark your imagination, learn new skills, and be inspired by creative innovators.

Sketch Cloud の Sketch for Teams について調べました。 英語の情報ばかりで苦労したので、間違っていたらご指摘お願いいたしますmm まず概念として、Sketch for Teams は Sketch Cloud の中にあります。 Cloudの概要として、クラウド上にSketchファイルをアップロードすると 誰でもその中身を確認することができます。 Sketchライセンスがない人でも中を確認できます。 これが業務をする上でポイントで、Sketchライセンスがないエンジニアや営業などに状況を知らせやすいです。 今までは、画像に書き出して渡していたステップが減るので重宝します。 ちなみに全員に見れるようにするには設定が必要です。Cloudのファイルの右上の「…」をクリックし、Settingsを選択します。 共有方法とコメントやダウンロードなどの許可の設定ができます。

Progateの道場コース、苦戦してる人多いみたいですね。課金中には道場までやらなかったのでちゃんと中身は精査できてないのですが、無料でできる範囲の初級編headerを作るところだけやってみても、「あ、こりゃ大変だわ」と思いました。 なにしろそれまであれだけ手取り足取り丁寧にお膳立てされた環境で学ばせていたくせに、道場になると手のひら返したように突然ノーヒントで「自由にやってね♪」となるわけですから、戸惑わないわけがないわけです。むしろ道場コースを何の問題もなくスラスラとクリアできる人がいたら、それ絶対に初心者じゃないですw なので躓いても凹む必要はないです。あれは躓いて当然なように作られてますからw（我が子を谷底に突き落とす親ライオンのようなアレですねw） というわけで、道場コースで躓きまくってる人に向けて、考え方のヒントというか大まかな流れみたいなものを解説してみようと思いますので参考

#26 WP ZoomUP でお話した内容です。 「WordPressテーマ、つくれますか？」

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

※こちらの記事が400はてブ以上ついて、総合とテクノロジーの人気エントリーに入りました！ こんにちは。Kazutaka Shimizuです。 フリーランスとしてPM、エンジニアをやっています。 元々はWebマーケティングのコンサルタントをやっていましたが、独学でWeb開発を勉強してプロダクトを作って起業しました。 最近は創業した会社を離れ、フリーランスとして活動したり、プログラミングを独学した経験をこちらのツイッターで発信しています。 みなさんはGoogle Chromeのデベロッパーツールをご存知ですか？ ドットインストールなど一部のプログラミング学習サービスでは、デベロッパーツールのレッスンがあるなど、おそらく全く知らない人はかなり少ないと思います。 しかし、とにかく多機能なため、意外と便利な機能を使ったことがないというプログラミング初心者の方も多いようです。 僕自身、何度か自分のTw

コンテンツが横からスライドしたり、カードが追従するように表示されたり、スクロールに連動するCSSアニメーションを簡単に実装できるスクリプトを紹介します。 汎用性に非常に優れており、デスクトップ・タブレット・スマホを完全にサポートしています。また、他のスクリプトやスタイルシートに依存はなく、React、VueJS、Angular、jQueryなどと一緒に利用することもできます。 Delighters Delighters -GitHub Delightersの特徴 Delightersのデモ Delightersの使い方 Delightersの特徴 DelightersはCSSアニメーションを加えて、ユーザーがスクロールするのを楽しませるスクリプトです。 超軽量 1.43kBの超軽量スクリプトで、他のスクリプトやスタイルシートに依存はありません。 フレームワークにとらわれない React、V

Chrome DevToolsを使いこなそう！ Web開発に必須なブラウザ開発ツールによるデバッグの基本 開発者ツール（DevTools）とは、ブラウザに搭載されているデバッグツールです。多岐にわたる技術の集合体であるWebページやWebアプリケーション、いわゆるフロントエンドの開発において、なくてはならないツールです。 皆さん、どうもこんにちは。今回で3度目のエンジニアHubの登場となる大竹智也です。春の季節もそろそろ終わりを迎え、新生活を迎えた人たちも新たな環境に慣れてくる時期だと思いますが、元気にお過しでしょうか。 前回までエディタの話ばかりしてきましたが、今回はエディタから離れてWebブラウザ（以下、ブラウザ）の話をしたいと思います。ただ、ブラウザの話といっても、エンジニアHubは開発者向けの媒体なので、ブラウザに搭載されている開発者ツール（Developer Tools）のお話を

このリストは何？ MDN web docs を、あたかも書籍の目次かのごとく整理しなおしたものです。それぞれ MDN web docs の記事へリンクしています。 なぜこれが必要になったかというと、人材市場でフロントエンドエンジニアが少なすぎる現状をどうにかするべく教育体制を整えるところから考え始めたのですが、それならまずは日頃お世話になっている MDN web docs を教材として扱いたいなと思ったからです。慣れてきてもよく参照するし「アレどこだっけなぁ？」を軽減もしやすいかなって。 MDN web docs は内容そのものはかなり充実しているものの、リンクがあらゆる方向に張り巡らせられており ある一定の流れに沿って読む ということが少々難しい側面もあります。特に初学者にとっては、迷子になりやすいかもしれません。 ですので、初学者でも学習しやすいように MDN web docs 全体の

偉大なるリポジトリ 昨年に引き続き、Webエンジニアのためのロードマップが2019年版へ更新されています。2018年の間に大きく様変わりしていて、他の投稿者による翻訳記事がQiitaにもあがっているので詳しくはそちらをご覧ください。 この記事では2018年版と2019年版を比較して、技術トレンドの推移をそれなりに把握する事を目的としています。また、技術選択の際に迷った時も指針として活用していただければ幸いです。前回書いた記事はこちら 内容が充実しすぎていることもあり、すべてに触れたくても触れられません。一部ピックアップをしながら進めていきます。 ではさっそく見ていきましょう！疲れるので今回はあまりふざけません。 🚀Introduction 2018 2019 Choose your path に変化はないですが、左右の四角に変化があります。2019年版にはlicenseやSOLID,KI

はじめに FLOCSSというCSS設計手法で実装をやっていく上で、唯一の悩みどころにcomponentとprojectの判別があります。私のチームでも悩み、チームメンバーがモヤモヤし、あとあとCSSも崩壊しそうだったので、一つの判別基準をつくることにしました。 FLOCSS とは 数あるCSS設計手法のひとつで、OOCSSやSMACSS、BEM、SuitCSSなどのメジャーな設計手法のいいとこどりをした国産の設計手法です。 https://github.com/hiloki/flocss CSSはデザイン通りの見た目を実現するために様々な書き方ができてしまうため、あるルールに則って記述していかないと、一つの変更が予期せぬところのレイアウト崩れを発生させてしまいます。そのルールというのも、かなり練りこんだものでないとあとあと破綻してしまいます。 FLOCSSはそういった要点を抑えたうえで、U

BEMのいいところは、それが何者なのかが明白ということに尽きる。とある要素を見たときに、そのスタイルがどこに書かれているのか、何を表しているのかがクラス名を見ればわかる。手を入れる際も、どこに追記すればよいのか、どれくらいの影響を及ぼすのかの大部分が推測できる。 レスポンシブ・デザインと相性がいいとか、流行りのコンポーネント指向と相性がいいなど、BEMの良さは他にもいくつか挙げられるけど、決定的なのは明瞭さであると思う。 BEMを使いはじめてかれこれ３，４年くらい経った。その間に色々な命名規則や設計思想が登場してきたけれども、今のところは浮気する程の魅力を他に感じることもなくBEM一筋でやってきている。ただし実践するにつけて、より明瞭で破綻しづらい設計を実現するために、様々な制約やガイドを設けてやってきたので、「もともとのBEM」からは多少なり離れているかもしれない。 ただし、それはBEM

今回はCSSのdisplayプロパティをマスターしましょう。少し分かりづらい内容ではありますが、Webサイトを作るためには必ず理解しておく必要があります。

ホーム > Webマーケティング > ホームページ制作関連 > 2017年版個人的ベスト｜CSSフォント指定WIN、MACでキレイに表示（ゴシック、明朝） 公開日：2017年3月24日最終更新日：2019年4月14日 :　ホームページ制作関連 WEB制作者として、頭を悩ます問題あるあるとして、フォント指定（文字）があります。 まったく同じホームページを見ていても、フォントが違うだけで見づらく感じることもあれば、高品質な印象にすることもできます。 Web上の情報伝達は、文字、デザインなど色や写真などを含めた全体でユーザーに伝えますが、その中でもまず始めに必要となるものが文字情報です。 どのような記述でフォントを指定すれば、WIN、MAC、スマホ、各種ブラウザで文字をキレイに表示させることができるのか、2017年現在の個人的なベストを考えてみたいと思います。

2017年も、CSSの進化がすごかったですね。 CSSを使ったアニメーションはより繊細に、vwやvhやcalc()などを効果的に使用したり、レイアウト、ナビゲーション、カードなどもより洗練されて実装されています。 さまざまな素晴らしいアイデアが取り入れられたスタイルシートを使ったテクニックを紹介します。 イラスト: Girls Design Materials 2017年によく目にしたもの一つが、グラデーションです。一昔前は同一色相のグラデーションが多かったですが、最近では複数の色相をし、グラデーション自体も大胆に使用するのが増えています。

他のブランチで発生したコミットをチェリーピックで現在のブランチに取り込んでみます。 マージはすべてのコミットが取り込まれますが、チェリーピックは選択したコミットのみ取り込まれます。 使い方 console機能追加というブランチで作業中に、masterでいくつかコミットがあったとします。 masterで行われたコミットから「style.css追加」というコミットのみ取り込みたい場合、そのコミットを右クリックしてチェリーピックを選択します。 アラートで確認が表示されるので、Yesを選択します。 選択したコミットのみ取り込めたのが確認できました。