asamuzaK.jp

サイトを見栄えを中心にリニューアルした。

IE7以下はちょっと前から対象ブラウザから外していたが、今回のリニューアルに合わせて、ガラケーも対象外とした。 これまでガラケーにはHTML5の新要素についてはdiv要素を出力していたが、今後はコンテンツ内でもHTML5の新要素を使っていきそうだということ、そして、そもそもガラケーからのアクセスが皆無に近くなっていること。 この2点から対象から外しても問題ないだろうと判断した。

リニューアルにあたり、今回の個人的なテーマ（課題）としたのは、Lotusへのオマージュw、そしてPCやスマホ、タブレットなどデバイスを問わない統一的な見栄えやアプリケーション的な操作感をめざしたこと。 その具現化としてツールバーを画面下に固定配置してボタンのクリックで、ホームに移動したり、ナビゲーションや検索、お知らせ欄が出てくるようにしてみた。

駄菓子菓子、iPhone / iPadで拡大した場合には、その肝心のツールバーが画面外に消えていくorz

CSS3の仕様では「position:fixedな要素はviewportに対して固定配置される」とある。

6.5. Fixed positioning

Fixed positioning is similar to absolute positioning. The only difference is that for a fixed positioned box, the containing block is established by the viewport. For continuous media, fixed boxes do not move when the document is scrolled. In this respect, they are similar to fixed background images.

iPhoneやiPadのSafariでは、通常はCSS3通りに固定されているものの拡大時にはそれがキャンセルされてしまう。 これはAppleに言わせれば「仕様」だそう。

4. Modify code that relies on CSS fixed positioning

CSS fixed positioning works in Safari on iPhone and iPad, but not as you might expect. While elements that use fixed positioning in Safari on Mac OS X and Windows always stay on screen, elements that use fixed positioning in Safari on iPhone and iPad can end up offscreen as users zoom and pan the webpage. Why does this happen?

By definition, the containing block of a webpage element that uses CSS fixed positioning is the viewport. This means that when you set position: fixed with a bottom and right value of 20px as shown in Listing 1-4, you have "fixed" the position of an element 20 pixels above the bottom edge of the viewport, and 20 pixels from the right edge of the viewport.

Listing 1-4CSS fixed positioning.

#fixed {
   position: fixed;
   right: 20px;
   bottom: 20px;
   height: 100px;
   width: 100px;
   background-color: purple;
}

In Safari on the desktop, the viewport is analogous to the window — as you resize a window, you are resizing the viewport. As you scroll, you are scrolling the viewport. Hence, in Safari on Mac OS X and Windows, the element always stays on screen.

Safari on iPad and Safari on iPhone do not have resizable windows. In Safari on iPhone and iPad, the window size is set to the size of the screen (minus Safari user interface controls), and cannot be changed by the user. To move around a webpage, the user changes the zoom level and position of the viewport as they double tap or pinch to zoom in or out, or by touching and dragging to pan the page. As a user changes the zoom level and position of the viewport they are doing so within a viewable content area of fixed size (that is, the window). This means that webpage elements that have their position "fixed" to the viewport can end up outside the viewable content area, offscreen.

当初はこのSafariの勝手仕様というかバグへの対処も試みようとしたが、Appleが自らCSSの仕様違反をわかっていながらやっていることなので結局放置することにした。 もし拡大時などに不便な思いをした方がいらっしゃったら文句はAppleに言って下さいw

ということで、あらためましてどうぞご贔屓に

今回のリニューアルで使用している主なCSS3

• @media queries
• @supports
• flexible box
• transform [scale() / matrix()]
• transition
• multiple background images
• border-radius
• box-shadow
• radial-gradient()
• text-shadow
• calc()
• rem