HTML/CSSの知識を習得しても、いざWebサイトを構築しようとすると手が止まってしまう。それは知識の体系化ができていないから、と語るのが『HTML/CSSブロックコーディング』の著者である笠井枝理依さんです。笠井さんは本書で、そうした悩みを解決する手法としてサイトの要素をブロック単位で分解してコーディングしていくブロックコーディングを解説しています。今回は本書からWebサイトをブロックに分解する方法を紹介します。 本書は『HTML/CSSブロックコーディング デザインをすらすら再現できる』の「Ch01　モックアップをブロック分解」を抜粋したものです。掲載にあたって編集しています。 モックアップとは モックアップとは皆さんが考えるところの「デザイン」であり､日本では「デザインカンプ」と呼ばれることもよくあります。Webページがどのように表示されるのか､実際にブラウザで表示される場合と遜色

IT業界のプロジェクトを成功に導くためのノウハウを網羅的に解説した書籍『プロジェクトマネジメントの基本が全部わかる本』（翔泳社）。著者でパラダイスウェアの代表取締役である橋本将功さんは、プロジェクトマネージャーが直面する課題として大きく3つ、「現場で使える知識体系がない」「無茶ぶりされる」「スキルの属人化」を挙げています。これらの課題を解決するために何が必要なのでしょうか。本書から、プロジェクトマネージャーが持つべきスキルセットと、プロジェクトの成功と失敗をどう定義すればよいのかを紹介します。 本記事は『プロジェクトマネジメントの基本が全部わかる本 交渉・タスクマネジメント・計画立案から見積り・契約・要件定義・設計・テスト・保守改善まで』の「序章　プロジェクトマネジメントのスキルの全体像」と「第1章　プロジェクトとはなにか─基本的な知識と考え方をおさえよう」から一部を抜粋したものです。掲載

はじめに 平 愛美（@mana_cat）と申します。本業はITエンジニアで、6歳と2歳の子ども（男児）がいます。趣味でブログを更新しております。 なぜITエンジニアの私がRaspberry Pi ZeroでIoTをしているかというと、長男の言葉がきっかけとなっています。 長男が4歳だった頃、オモチャのプラレールをリモコン操縦できるコントローラーを持ってきて、「リモコンが壊れてしまった。ママはどうしてオモチャを修理できないの？」と泣いていました。泣いている長男を見て、IoTを使って「IoTプラレール」を実現できないかと思いました。 Raspberry Pi Zeroはプラレールの貨車に搭載できるサイズとしてもちょうど良く、価格も日本円で約650円とお手頃だったためです。それから試行錯誤をしながら、電子工作とIoTにチャレンジして今に至ります。 この連載では、Raspberry Pi Zero

はじめに こんにちは、クラスメソッド株式会社でWebを担当している野中です。これから身につけるWebサイト高速化テクニック第2回目です。 第1回の「Webサイト高速化対策の現状」は読んでいただけましたか？「Webサイト高速化対策の現状」では高速化対策がなぜ必要なのかを紹介しているので、この回を読む前にぜひ読んでおいてください。 今回は、Webサイトの高速化に大きく関係するHTTPについて復習したいと思います。高速化対策と言ってもWebサイトが遅延する原因はさまざまです。 読み込むファイル数が多いことやサーバー側の処理に時間がかかっている、またはエンドユーザーが利用しているネットワークが原因かもしれません。 ところが原因を探っていくと、Webサイトが遅くなってしまう要因の多くにHTTPが関係しています。 実際の高速化手法も大事ですが、事前知識としてHTTPについて知っておきましょう。 対象読

対象読者 スマートフォンWebサービス開発者 特に、フロントエンド周りの開発に従事する方 スマートフォン向けWebサイト高速化のテクニック スマートフォンはOS／デバイスの進化が激しく、要求される最適化の内容も半年で別物になることがあります。そのため最適化に際しては、案件ごとの状況や目的、デバイス／OSのシェアに応じて、まずターゲット端末を選定し、問題の検出を行います。 この記事では「iPhone 4＋iOS 5」を想定して話を進めます。実際に「iPhone 4＋iOS 5」はよく現場でも最も動作が重い組み合わせとしてターゲット端末に挙がります。これはiPhone 4がRetinaディスプレイを採用したことで960×460ピクセルの高解像度を備えながら、CPUなどのデバイス性能が潤沢とはいえず、ボトルネックが生まれやすいためです。iOS 4ではなくiOS 5をターゲット端末として扱うのは、

Dreamweaverとは Adobe Dreamweaver（以下、Dreamweaver）は、Webページを作成・更新・管理するためのソフトウェアです。Dreamweaverにはいくつかの編集モードがあり、コードビュー（HTMLコードやCSS、JavaScriptファイルなどコードを直接編集できる画面）、デザインビュー（Webページをブラウザで表示した形に近い状態で編集できる画面）の両方で編集できます。 さらに、Dreamweaver CS4で登場したライブビュー（レンダリングエンジンに利用しブラウザに非常に近い状態での表示確認ができる画面）では、SafariやGoogle Chromeと同じWebkitというレンダリングエンジンを採用しており、実際の画面を確認しつつ作業を進めることができます。 デザイナーにとっては、HTMLやCSSのコードをオートコンプリート（自動補完）してくれる機