翔泳社の公式通販SEshopは全国送料無料!
ヘルプ 法人のお客様へ 新規会員登録 ログイン
SEshop

HTML/CSSブロックコーディング デザインをすらすら再現できる【PDF版】

笠井 枝理依(著)

商品番号
179620
販売状態
発売中
納品形態
会員メニューよりダウンロード
発売日
2022年11月16日
ISBN
9784798179629
データサイズ
約329.1MB
制限事項
印刷可・テキストのコピー可
キーワード
HTML  デザイン  電子書籍【PDF版】  CSS  Web制作

2,860円(税込)(本体2,600円+税10%)
送料無料

260pt (10%)
ポイントの使い方はこちら

在庫あり

初回購入から使えるポイント500円分プレゼント

紙の書籍はこちら

※1点の税込金額となります。 複数の商品をご購入いただいた場合のお支払金額は、 単品の税込金額の合計額とは異なる場合がございますので、予めご了承ください。

  • ポスト
  • 本製品は電子書籍【PDF版】です。
  • ご購入いただいたPDFには、購入者のメールアドレス、および翔泳社独自の著作権情報が埋め込まれます。
    PDFに埋め込まれるメールアドレスは、ご注文時にログインいただいたアドレスとなります。
    Amazon Payでのお支払いの場合はAmazonアカウントのメールアドレスが埋め込まれます。
  • 本製品を無断で複製、転載、譲渡、共有および販売を行った場合、法律により罰せられる可能性がございます。
  • ご購入の前に必ずPDF利用案内をお読みください。

Webサイトを【分解】→【組み立て】!
本格的なWeb制作を追体験して、脱初心者を目指そう

Webサイト制作を始めたばかりのHTML/CSS初心者の前には、
さまざまな壁が立ちはだかります。

「デザインを思い通りに再現できない」
「タグやプロパティの組み合わせ方がわからない」
「ページを組み立てる流れがイメージできない」

もしあなたがこんな課題を抱えていて、
コードを書く手が思うように進まない…と悩んでいるなら、
本書はぴったりの一冊です。

本書は、モックアップ(サイトのデザインラフ)をもとに、
サイトの構成要素を【ブロック分解】してから、
ひとつずつコーディングして【組み立てる】…という
本格的なWeb制作さながらのプロセスを、ハンズオンで学習します。

【分解】するから、
・サイトデザインの細かな意図
・デザイナーが配慮しているポイント がわかります。

【組み立て】ながら、
・Web制作の一連の流れ
・UIパーツの見た目を整える方法 がわかります。

ひとつのサイトを完成形まで作り込む流れを通じて、
デザインラフを的確に再現するための
実践的なコーディングテクニックが無理なく習得できます。

■こんなあなたにおすすめ!
・HTML/CSSの入門書を一冊読み終えた初級者
・実践的なコーディングテクニックが知りたい、駆け出しのWeb系エンジニア
・オリジナルのWebサイトを作るための力をつけたい学習者、再入門者

■目次
Ch01 モックアップをブロック分解
Ch02 ファイルの準備
Ch03 HTMLのコーディング準備
Ch04 HTMLのコーディング
Ch05 CSSのコーディング準備
Ch06 CSSのコーディング
Ch07 CSSでのレスポンシブ対応
Ch08 自分のポートフォリオへ

PDF版のご利用方法

  1. ご購入後、SEshopにログインし、会員メニューに進みます。
  2. ご購入電子書籍およびデータ > [ご購入電子書籍およびダウンロードデータ一覧]をクリックします。
  3. 購入済みの電子書籍のタイトルが表示されますので、リンクをクリックしてダウンロードしてください。
  4. PDF形式のファイルを、お好きな場所に保存してください。
  5. 端末の種類を問わず、ご利用いただけます。
画像01
画像02
画像03
画像04

コードを書きながら学べる!

Web制作の基本的なステップ通りに、ハンズオン形式でコードを書きながら学んでいけます。

画像05

デザイナーの視点も解説!

デザインからHTML/CSSにどのように落とし込んだらいいのかが理解できます。

画像06

現場で役立つノウハウも伝授!

現場で即戦力になるためのコツやノウハウ、実際に使われている最新技術も学べます。

画像07

■Ch01 モックアップをブロック分解
1-1 モックアップとは
1-2 モックアップはこうして渡される
1-3 初心者がコーディングでつまずきがちなこと
1-4 サイトを構成する基本要素
1-5 モバイル版のブロック分解
1-6 タブレット版のブロック分解
1-7 ラップトップ版のブロック分解

■Ch02 ファイルの準備
2-1 ファイル構成
2-2 画像の準備
2-3 normalize.cssとreset.css

■Ch03 HTMLのコーディング準備
3-1 分解したモックアップの確認
3-2 レスポンシブ対応する上で確認すること
3-3 ボトムアップのアプローチ方法
3-4 トップダウンのアプローチ方法
3-5 今回のアプローチ方法を考える

■Ch04 HTMLのコーディング
4-1 骨組みのコーディング
4-2 ベースのコーディング
4-3 Headerのコーディング
4-4 Mainのコーディング
4-5 Footerのコーディング
4-6 ナビゲーションの設定

■Ch05 CSSのコーディング準備
5-1 分解したモックアップの確認(CSS)
5-2 デザイナーに確認してほしいこと
5-3 ファイルの準備(セクション分け)
5-4 スタイリングする際に気にかけること

■Ch06 CSSのコーディング
6-1 ベースのコーディング(グローバルスタイル)
6-2 共通クラスのコーディング
6-3 Headerのコーディング
6-4 Mainのコーディング
6-5 Footerのコーディング

■Ch07 CSSでのレスポンシブ対応
7-1 モバイル版のコーディング
7-2 タブレット版のコーディング
7-3 ラップトップ版のコーディング

■Ch08 自分のポートフォリオへ
8-1 コンテンツの差し替え
8-2 カラーパレット作成
8-3 (もう一歩)下層ページを作成

各種問い合わせは以下のリンクからご連絡ください

関連商品

おすすめ特集

プログラミング入門書大特集

翔泳社のプログラミング書籍の中から、入門・初級者向けの書籍をピックアップ!

Linuxおすすめ本特集

【Linux本特集】入門~達人レベルまで!クラウド時代の必須知識Linuxを学ぶおすすめの本

ライティングおすすめ本

ライティングのスキルアップにおすすめの本。Webライティングやコピーライティングなど

マネー本特集

お金と経済の基礎知識から、資産形成・投資術、お金教育や介護まで。暮らしに役立つマネー本

インテリア本特集

おしゃれな部屋作りのヒントやインテリアの基礎知識、色使い、うつわや洋食器の知識まで、幅広い書籍をご紹介

事務職におすすめの本

Excel、日商簿記、業務の自動化を実現するRPAやPythonの技術など、事務職としてステップアップしたい人に!

特集をもっと見る