2015/09/03(木) HTML5, CSS, レスポンシブWebの勉強

14時過ぎくらいからオフィスに。


●PB演習 授業準備
宿題の一つを片付けるために、3年次生の一人にメールで呼び出しをかけた。
夜に返信があり、9/09(水)に面談することになった。

●卒研ゼミ 準備
次回の卒研ゼミを9/07(月)に実施することにした。MLを通じて卒研生に連絡した。

●電子錠登録・登録抹消
前期終了後に除籍・退学になった学生の登録を抹消した。

●HTML5, CSS, レスポンシブWebの勉強
続き。一応できあがったホームページを眺めているうちに、もっとレスポンシブWebらしく変更できそうであることに気付いたので、その変更作業を行った。Webブラウザウインドウの横幅を狭くしたりResizerで表示領域を小さくしたりして確認したところ、表示領域の横幅が300ピクセル程度のかなり狭い場合でもそれなりに表示された。大きい表はセルの中身がうまく折り返せなくて表示領域内に収まらないことがあるが、これは仕方ないと思う。

フルードイメージを実現するために、まずimg要素では

    <img width="..." height="..." class="fluid">

のように属性widthで本来のピクセル数を指定しておいて、別途CSSで

    img.fluid {
      display: block;
      margin-left: auto;
      margin-right: auto;
      max-width: 95%;
      height: auto;
      box-shadow: 0 0 5px #222222;
    }

のようにmax-widthで上限の比率を指定すると、画像が必ず表示領域内に収まるようになった。
しかしその一方でtable要素の横幅を指定するときに

    /* Chromeでは表が縮まない */
    table.summary {
      width: 500px;
      max-width: 95%;
    }

のようにwidthでピクセル数を、max-widthで上限の比率を指定すると、Firefoxでは表が（セルの中身がうまく折り返せれば）必ず表示領域内に収まるのに、Chromeではそうならなかった。これはwidthとmax-widthを取り換えて

    /* これならうまくいく */
    table.summary {
      width: 95%;
      max-width: 500px;
    }

とするとFirefoxでもChromeでも表示領域内に収まるようになった。

詳しく調べればこういう現象の説明もつくのかもしれないが、いずれにしても昔からの「CSSは厄介」という印象はやはり変わらない。この2週間ほどずっと、IE 11の通常モードや互換表示モードの振る舞いがFirefoxやChromeのそれと違うことに悩まされてきた。それのみならずFirefoxとChromeの間にもときたま違いがある。例えばulの左側の余白は、W3Cの資料ではmarginということになっているが、実際のブラウザではpaddingで実現されていることがある（資料1, 2, 3）ので、どちらの場合にも対応できるようにスタイルを指定しなければならない。リセットスタイルシートというものもあるが、これだってもう一つ別の標準を増やすだけのことかもしれない。

●進路指導Webサイトの再開発
続き。昨日作ったスタイルは、ホームページ用のものから一部のコードを流用するためにいったんホームページの構造に合わせて作ったので、これをモックアップの構造に合わせて手直しする作業を行った。そのあと細部を詰めていって仕上げた。完成したCSSファイルをサーバに置いて、Yaくんにその旨をメールで連絡した。