著者プロフィール

◎ 赤間公太郎（あかまこうたろう）

株式会社マジカルリミックス 代表取締役CEO
宮城県出身。コンピューター系の専門学校を卒業後、仙台のデザイン会社に入社。 Webサイトのデザイン／コーディングをはじめとし、各種デジタルメディアのデザインに従事。2002年退職後すぐにマジカルリミックスを創業。2007年に法人化で株式会社マジカルリミックスを設立。サイト運用に関するコンサルティング、社内ITトレーニング、セミナー出演、執筆など。2005年から仙台の専門学校で、非常勤講師としてWeb関連講義を担当。

◎ 大屋慶太（おおやけいた）

株式会社デック 代表取締役社長
名古屋芸術大学美術学部卒業。某大手通信会社系列の企業で印刷物のデザインを担当。その後退職し、愛知県の印刷会社で、Webデザイナー兼コーダーとして5年ほど在籍。大手クライアントの案件も、多数手がける。2005年スタジオ・デックの屋号で、フリーランスとして独立。2006年に株式会社デックとして法人化。近年は制作会社経営のかたわら、講師、本の執筆、制作業界の人々が集う飲酒会運営などさまざまな方面で活躍中。

◎ 服部雄樹（はっとりゆうき）

服部制作室 代表
愛知県名古屋市出身。2014年までインドネシア・バリ島で活動し、世界各国のクリエイターと交流。多くの海外案件に携わる。帰国後、服部制作室を設立。Webサイトの制作だけでなく、各種WebサービスのテンプレートデザインやUI設計、セミナー登壇、コラムへの寄稿など精力的に活動中。“かっこいいを簡単に”をモットーに、海外のWebデザインを日本向けにローカライズした新しいデザインを提案している。

クリックすると大きい画像でご覧いただけます

• 2017/3/27更新

  ・10章開始のstyle.cssのコードを修正しました。

  2016/5/11更新

  ・5章のコードを追加しました。

  • yasashiihtml.zip

誤記のためにご迷惑をおかけし、誠に申し訳ございません。

• 34ページ Brackets 1.10でのShizimily Multi-Encoding for Bracketsの不具合について
  • [誤]
    Brackets 1.10に拡張機能「Shizimily Multi-Encoding for Brackets」をインストールすると、Bracketsが動作しなくなる現象が確認されています。
  • [正]
    Brackets 1.10では、複数の文字コードの表示・保存に対応するようになったため、「Shizimily Multi-Encoding for Brakckets」をインストールする必要はありません。
    
    Bracketsが動作しなくなってしまった場合は、下記の操作を実行してください。
    
    ●Windowsの場合
    1）［スタート］ボタン→［Windowsシステムツール］→［タスクマネージャー］をクリックしてタスクマネージャーを起動
    2）［Brackets.exe(32ビット)］をクリックして選択し、［タスクの終了］をクリックしてBracketsを終了させる
    3）エクスプローラーを起動し、［表示］タブをクリック
    4）［隠しファイル］をクリックしてチェックマークを付ける
    5）C:\Users\（ユーザー名）\AppData\Roaming\Brackets\extensions\userにある「brackets-shizimily-multiencoding」フォルダを削除
    
    ●Macの場合
    1）Bracketsの［ファイル］メニューにある［拡張機能マネージャー］をクリック
    2）［インストール済み］タブをクリックし、［Shizimily Multi-Encoding for Brackets］の［削除］をクリックして［閉じる］をクリック
    3）［拡張機能を変更］画面の［拡張機能を削除してリロード］をクリック
• 50ページ 「画像の相対パス」の図の文字
  • [誤]
    同一ディレクトリ内のgallery.htmlを指す
  • [正]
    同一ディレクトリ内のimagesフォルダ内のimg1.jpgを指す
• 57ページ 本文4行目
  • [誤]
    そこでまずli要素の
  • [正]
    そこでまずul要素の
• 135ページ line-heightプロパティの図
  • [誤]
    letter-height: 1.75;
  • [正]
    line-height: 1.75;
  • 【 第2刷にて修正 】
• 135ページ line-heightプロパティの図
  • [誤]
    図内の文字の位置
  • [正]
    下図のように、センターに配置されます。
  • 
  • 【 第2刷にて修正 】
• 153ページ 「2：CSSを保存する」の手順1
  • [誤]
    sytle.css
  • [正]
    style.css
  • 【 第2刷にて修正 】
• 192ページ 講座案内ページのHTML
  • [誤]
    <li><a href="./index.html">HOME</a></li>
  • [正]
    <li><a href="index.html">HOME</a></li>
• 205ページ 「1：dl要素とdt要素を設定する」のCSSの210行目
  • [誤]
    #news dl { overflow: hidden; }
  • [正]
    入力する必要はありません。
• 243ページ 入力フォームを整える
  • [誤]
    入力フォームがブラウザの幅に合わせて調整されない。
  • [正]
    以下のコードを、243ページのstyle.cssの366行目の後ろで改行し、367行目に挿入してください。
  • 備考：

      #entry dl dt {

        float: none;

        width: 100%;

        box-sizing: border-box;

      }

      #entry dl dd {

        width: 100%;

        margin-left: 0;

        border-left: none;

        box-sizing: border-box;

      }

      #entry #name, #entry #email, #entry #interest {

        max-width: 100%;

      }

      #entry #detail {

        width: 100%;

        box-sizing: border-box;

      }

     

  • 【 第3刷にて修正 】

書籍の内容に関するお問い合わせはこちら。お答えできるのは本書に記載の内容に関することに限ります。

お問い合わせフォーム