Bootstrap + HTML5 のメモ

雑多なメモを置いておく場所。


  • 2016/09/10 作成
  • 2016/09/10 微修正

Contents


概略

完全に個人用スタックと化したメモ用ページ。

Bootstrapで洒落乙なデザインに

BootstrapってのはTwitterのアレです。

上のサイトのデザインを見てもらうとわかるけど、デザインはかなりパクらせてもらって参考にさせてもらっていたりする。

Bootstrap 3.x を使おう

下のサイトから bootstrap-3.x.x-dist.zip を落として使いましょう。

最初は適当なサイトの誘導に従って2.xを落としてしまったので上手くいかずハマった。2006年時点では3.x系の解説ばかりなのでこっちを使うしかない。

marginでハマる

Bootstrapといえばグリッドシステム。解説は他のサイトにいくらでもあるので任せる。

2カラムのページをスマホのような幅の狭いデバイスで表示するとカラムが縦積みになるが、このときカラム同士がマージン0でピッタリとひっついてしまう。

上のサイトではカラム自体にスタイルを指定しているが、カラムの中にdivとか入れてそれにmarginをつければとりあえずは解決する。

Bootstrap Offcanvasでイケてるナビゲーションバーを

Bootstrapのデフォルトのナビゲーションバーナビゲーションバーって正直あんまりイケてない。そこでBootstrap Offcanvasの登場。

当ページのナビゲーションバーは以下のサンプルページのものをパクらせてもらって参考にさせてもらっていたりする。

marginで再びハマる

なんか横のスクロールバーが出てきて、ほんの少しだけ意図せずスクロールできちゃって困った。結局、.containerのマージン・パディング値は自分で設定しちゃダメとうことであった。

アンカーリンク先の先頭部分がナビゲーションバーに隠れる問題

これで解決。

HTML5

Eclipseが作ったHTMLはHTML5じゃない

Eclipse+Slim3だとjspを勝手に作ってくれちゃうわけだが、これがべたべたのHTML4で書かれているので修正が必要だったり。たとえば

<%@page pageEncoding="UTF-8" isELIgnored="false" session="false"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@taglib prefix="f" uri="http://www.slim3.org/functions"%>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>hello Index</title>
</head>

こんなんが出てくるから困る。

まず上の方はこのままだと空行を出力しまくる。DOCTYPEがないから更に怒られる。コードの美しさを犠牲にしてもよいのなら以下のようにしたい。

<%@page pageEncoding="UTF-8" isELIgnored="false" session="false"
%><%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"
%><%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"
%><%@taglib prefix="f" uri="http://www.slim3.org/functions"
%><!DOCTYPE html>
<html>

Content-TypeのところはHTML5ならもっと簡潔に書ける。

<meta charset="UTF-8">

viewportの設定

スマホ対応したくてこんなことをhead内に書いてみる。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

width=device-widthは指定するな、と言っているページもあったりする。

とか言っておきながらこんなことも書いてあった。

この記事を書いたときには iOS5 のシェアがそれなりにあったのですが、今では iOS5 以前を使っている人はほとんどいないでしょうから、ページ幅可変の場合は width=device-width, initial-scale=1.0 の指定が適切だろうと思います。
W3C では CSS に @viewport ルールを加えようとしているようなのですが、仕様が 2011 年からドラフトのままです。「将来は CSS で」という私の予想ははずれるかもしれません。

そんなわけでwidth=device-widthはそのまま書いておけばよさそう。上の引用で指摘されているとおり、こういう内容はcssに書きたい。

長いURLをいい感じに改行

スマホで開くと長いURLが画面からはみ出して、ページが横にもスクロールできちゃうあの現象を回避したい。どうやら、そのために設定できそうなcssプロパティにはword-breakword-wrapoverflow-wrapの3つがあるらしい。

違いはこんな感じ。

word-break: break-all;
(非推奨) 単語の途中だろうと、とにかく強制的に改行
word-wrap: break-word;
(旧仕様) 可能な限り単語途中での折り返しを避けつつ、はみ出ないように改行、もとはIEの独自仕様
overflow-wrap: break-word;
(新仕様) word-wrap: break-word;と同じ、CSS3ではこっちを使う

で、後方互換性のためにword-wrap: break-word;overflow-wrap:break-word;を同時に指定するのが今の主流らしい。