久保 知己

株式会社まぼろし / マークアップエンジニア / 1985年生まれ。HTML/CSSからCMSの構築まで、様々なサイトの制作に携わり、2014年にまぼろしに入社。著書に「CSS3&jQueryで作る スマートフォンサイトUI図鑑 」(アスキー・メディアワークス/共著)、「プロとして恥ずかしくない 新・WEBデザインの大原則」(MdN/共著)などがある。

久保 知己

Adobe XDとBootstrapで作業を効率化 第3回: デザイントークンでつなぐAdobe XDとBootstrap

前回の記事では、Adobe XDを使ってデザインガイドを作成し、登録したカラーやコンポーネントには「デザイントークン」として名前を付けました。今回は、デザイントークンを使って、デザインガイドとBootstrapを連携させ...

久保 知己

Adobe XDとBootstrapで作業を効率化 第2回: UIキットをデザインシステムLiteのデザインガイドに落とし込む

前回の記事では、デザインシステムを構成する2つのガイドライン、そして2つのキーワード、最後に「デザインシステムLite」のコンセプトを紹介しました。 本記事は、デザインシステムLiteの具体的なサンプルを紹介しつつ、最初...

久保 知己

Adobe XDとBootstrapで作業を効率化 第1回: 中小規模のサイトに有効なデザインシステムLiteとは | アドビUX道場 #UXDojo

この連載では、Adobe XD、UIキット、CSSフレームワークといったツールを使用して、Web制作の作業を効率的に行う方法をお伝えしていきます。これらのツールを連携させれば、デザインとコーディングの作業を円滑に進められ...

久保 知己

Dreamweaverで覚える最新Web開発ワークフロー: Sass&ライブビューでBootstrapをカスタマイズ

Dreamweaver CC 2017リリースが公開されて、CSSプリプロセッサーが正式にサポートされ、SassからCSSをコンパイルできるようになりました。今回は、Sassとライブビュー機能などを使ったBootstra...

久保 知己

Dreamweaverで覚える最新Web開発ワークフロー: ライブビューを使ってBootstrapのレイアウト作成

この連載でも取り上げていたDreamweaver Nextが、「2017年リリースのDreamweaver CC」として正式に公開されました。 今回は新しくなったDreamweaverを使って、Bootstrapのレイア...

久保 知己

Dreamweaverで覚える最新Web開発ワークフロー: プレビュー機能を使ったWeb制作

次世代Dreamweaverではライブビューが更新され、新しくリアルタイムプレビューが追加されました。今回は、今月公開されたDreamweaver ベータ3に含まれるUIや機能から、プレビュー関連の 便利な機能をご紹介し...

久保 知己

Dreamweaverで覚える最新Web開発ワークフロー: LESSを使ったBootstrapカスタマイズ

Bootstrapは、レスポンシブWebデザインのサイト構築に広く使われているフレームワークです。Dreamweaverは以前からBootstrapをサポートする機能が組み込まれており、グリッドレイアウトやボタンなどのコ...

久保 知己

Dreamweaverで覚える最新Web開発ワークフロー: Sass編

先日公開されたDreamweaverベータ版は、高機能で効率的なモダンなツールとして生まれ変わるべく、Bracketsがエディタに取り込まれ、UIにはダークなテーマが適用されるなどの大きな変更が行われています。より詳しい...

久保 知己

HTML/CSSを爆速コーディング Emmet入門 第6回 Emmetを使って、コードの編集を強力にサポートする(後編)

HTMLやCSSのコーディングがもっと楽になる、Emmetのアクションについての後編です。前編では7つのアクションを紹介しました。今回は残り9つのアクションについて解説いたします。 8. Go to Matching P...

久保 知己

HTML/CSSを爆速コーディング Emmet入門 第5回 Emmetを使って、コードの編集を強力にサポートする(前編)

これまでの連載では、Emmetの省略記法の展開に関わる内容について説明してきました。しかしコーディングの時は、HTMLやCSSの生成だけでなく、既存のコードに追加や編集をする作業も必ず発生します。 Emmetにはアクショ...

久保 知己

HTML/CSSを爆速コーディング Emmet入門 第4回 Emmetのスニペットや設定を編集して、思い通りの記述にしよう

第2回、第3回の連載では、Emmetの省略記法を使ったコーディング方法について解説しました。初期設定のままでも便利なEmmetですが、自分のコーディングスタイルにあわせてEmmetの設定を編集してみましょう。 例えば、イ...