WWW Watch

記事に戻る

CSS だけで作るタブ切替ユーザインタフェース （float 使用版） サンプル

タブ切替の UI は、よく使われますが、JavaScript で実装するケースが多いので、今回は全部 CSS のみで実装してみるテスト。

詳しくは記事 「CSS だけで作るタブ切替ユーザインタフェース （float 使用版）」 をご覧ください。

動作環境

最新の Firefox、Google Chrome、Safari、Opera など、:target 疑似クラスに対応したブラウザであれば問題なく動作するはず。IE は IE9 以降のみ。その他、スマートフォンなどでは動作に問題ないと思います。

課題

  1. 各タブのリンクターゲットがタブの内容を含む要素になっていないため、純粋なページ内リンクとして機能しない
  2. 上記（1）を解決するには各タブの内容（div class="tab01" など）に id 名を振ってやればいいけど、それをすると、アクティブなタブのスタイルを指定したりするのが今のところCSSだけだと無理。あと、タブの内容が多い（高さがある）と、タブをクリックする度にページが内容部分上端までスクロールするのでタブが画面外に消えちゃう

World Wide Web Consortium

The World Wide Web Consortium (W3C) is the main international standards organization for the World Wide Web (W3). It is arranged as a consortium where member organizations maintain full-time staff for the purpose of working together in the development of standards for the W3. As of March 2007, the W3C had 441 members. It is always open for new organizations to join.

W3C also engages in education and outreach, develops software and serves as an open forum for discussion about the Web.

The Consortium is headed by Sir Tim Berners-Lee, the primary author of the original URL (Uniform Resource Locator), HTTP (HyperText Transfer Protocol) and HTML (HyperText Markup Language) specifications, the principal technologies that form the basis of the World Wide Web.

From Wikipedia, the free encyclopedia

XHTML

The Extensible HyperText Markup Language, or XHTML, is a markup language that has the same depth of expression as HTML, but also conforms to XML syntax.

Whereas HTML is an application of SGML, a very flexible markup language, XHTML is an application of XML, a more restrictive subset of SGML. Because they need to be well-formed, true XHTML documents allow for automated processing to be performed using standard XML tools—unlike HTML, which requires a relatively complex, lenient, and generally custom parser. XHTML can be thought of as the intersection of HTML and XML in many respects, since it is a reformulation of HTML in XML. XHTML 1.0 became a World Wide Web Consortium (W3C) Recommendation on January 26, 2000. XHTML 1.1 became a W3C recommendation on May 31, 2001.

From Wikipedia, the free encyclopedia

Cascading Style Sheets

In web development, Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML, but the language can be applied to any kind of XML document, including SVG and XUL.

CSS is used by both the authors and readers of web pages to define colors, fonts, layout, and other aspects of document presentation. It is designed primarily to enable the separation of document content (written in HTML or a similar markup language) from document presentation (written in CSS). This separation can improve content accessibility, provide more flexibility and control in the specification of presentational characteristics, and reduce complexity and repetition in the structural content. CSS can also allow the same markup page to be presented in different styles for different rendering methods, such as on-screen, in print, by voice (when read out by a speech-based browser or screen reader) and on Braille-based, tactile devices. CSS specifies a priority scheme to determine which style rules apply if more than one rule matches against a particular element. In this so-called cascade, priorities or weights are calculated and assigned to rules, so that the results are predictable.

The CSS specifications are maintained by the World Wide Web Consortium (W3C). Internet media type (MIME type) text/css is registered for use with CSS by RFC 2318 (March 1998).

From Wikipedia, the free encyclopedia