2021年12月27日 Webサイト制作, Webデザイン HTML/CSSのコーディングの練習をするときに、既存のWebサイトの模写をする方もいらっしゃるかと思います。模写は模写で勉強になる点もありますが、実務ではデザインカンプと呼ばれるデータファイルを渡され、それを仕様にそってHTML/CSSでコーディングしていきます。実務に近いかたちに慣れるためにも、デザインカンプからのコーディングの練習をしていきましょう！ ↑私が10年以上利用している会計ソフト！ Codestep Codestepは作って学ぶコーディング学習サイト。HTML、CSS、JavaScriptの基礎学習を終えた方が、模写コーディングやデザインカンプからのコーディング練習を通して、より実践的なWebサイト制作のスキルを身につけるための学習サイトです。HTML/CSSだけではなく、WordPress用の教材もあります。 コ

A new tool that blends your everyday work apps into one. It's the all-in-one workspace for you and your team

Chrome拡張機能にはWeb制作に便利なものが多く、私もよく利用しています。特に1〜2クリックでさっとチェックできるものは頻繁に使い制作の中で馴染んだものであるため、これらがないと手間どってしまうくらい依存性の高いものばかり。今回は私がよく利用しているChrome拡張機能を12個紹介します。初見のものがありましたら、ぜひ試してみてください。 Eagle – 効率的に画像を保存する Eagle サイト上にある画像をドラッグ＆ドロップだけで保存できるChrome拡張機能。あとで見返したい画像を効率的に保存できるのは嬉しい。ページ全体のスクリーンショットの撮影も可能。撮影後は専用のアプリに保存されます。この手のものは他にもあったのですがサービス終了してしまい、他を探してようやく見つけたのがEagleでした。重宝しています。 Eagle – 効率的に画像を保存する 専用アプリのダウンロードはこち

取り上げた技術は、本格的な開発でも役に立つもので、最も学習コストが低いものを選んだ。 重要度が低いものは載せていない。たとえばHTMLとCSSなんてググりながら書けば全く問題ない。Bootstrapなどのフレームワークも全くやる必要はなく、仮に就職先で使っていたら覚えればいい。 逆に言えば以下に挙げる技術は、そもそも概念自体がプログラミングにとって普遍的なものであり、（基礎的な部分を）調べながら使うようではエンジニア失格ということ。 基本的に現在では、バックエンド・フロントエンド・運用保守全てができないエンジニアに価値は無い。 以下に挙げた技術（①⑤⑥は他の言語やフレームワークで代替可能）が身に付いていなければまともな企業に就職することは難しい（もちろん、下らない業務システムを下請けで作ってる底辺企業には入れるだろうが）。 経験者でも、これらができない/わからないのは、相当恥ずかしいことだ

しめ縄が飾られた「おもしろい大岩」 「偶然とは思えない」ので保存 伝説を創作しようとしていた… 国宝の土偶「縄文のビーナス」で知られる長野県茅野市で、駅前にまつられている大きな石が話題になっています。しめ縄が飾られ、立派な看板も立っていますが、案内板には、それらしい伝説はなさそう…。つまり「単なる石」。なぜ、そんな石を大事にまつることになったのか。「いい伝説を作ろうと思ったけど、思い浮かばなくて…」。隠れた名所には、驚きのエピソードが隠されていました。 しめ縄が飾られた「おもしろい大岩」 ツイッターで「大変おもしろい大岩」として紹介された大石は、茅野駅西口から約200メートルのところにあります。高さ1メートル以上、横幅も1.5メートルを超えています。何よりその丸い形が、色んな想像をかきたてます。 大石にはしめ縄が飾られています。しっかりした案内板も立てられており、大石の由来が詳しく書かれて

上達したいなら頻繁に休んだほうがいいかもしれません。 2021年にアメリカの国立衛生研究所（NINDS）の研究チームは、ピアノのような新しいスキルを習得する練習では、頻繁な休憩を行う方が効果的な上達ができるという研究結果を報告しました。 またこの研究では、スキルの上達は練習中には起こらず、休憩中にのみ発生することが示されています。 新しい技術を習得しようとすると、私たちの脳内ではどのようなことが起こっているのでしょうか？ この研究にかんする論文は、2021年6月8日付で科学雑誌『Cell Reports』に掲載されています。

デザイナーがWebサイトのUIを実装する際にデベロッパーに渡すデザイン仕様書・指示書の作り方を紹介します。 仕様書を作成する基本ツール、指示に適したフォントやカラー、グリッドや要素間の距離を自動的に計算するツールをはじめ、レイアウトや各UIコンポーネントのデザイン仕様の記述例まで、デザインを仕様化する解説記事です。 ブレイクポイントの説明、スティッキー要素の仕様説明、相対サイズの要素の説明方法、ボタンの文字数の説明、アニメーションする要素の説明方法など、デベロッパーに分かりやすく、デザイナー自身も見直せるデザイン仕様書を作成します。 The Art of Design Spec'ing by Mahdi Farra 🍉 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 デザイン仕様書とは デザイン仕様書に使用するツール デザイン