当サイト、Codex 日本語版は今後積極的な更新は行わない予定です。後継となる新ユーザーマニュアルは、https://ja.wordpress.org/support/ にあります。
万が一、当サイトで重大な問題を発見した際などは、フォーラムWordSlack #docs チャンネルでお知らせください。</p>

「CSS」の版間の差分

提供: WordPress Codex 日本語版
移動先: 案内検索
(11 版)
({{原文|CSS|82051}}<!-- 01:24, 12 January 2010 Luheou 版 -->)
1行目: 1行目:
{{Old}}
+
{{NeedTrans}}
 +
WordPress relies heavily on the presentation styles within CSS. With the introduction of [[Using Themes|WordPress v1.5 Themes]], your layout options haven't just expanded, they've exploded!  WordPress has made it easier than ever to change your website look, and opened up the field even more to help you [[Theme Development|create your own Theme]] and page layout.
  
<!-- CSS stands for Cascading Style Sheets and it allows you to store style information (like colors and layout) separate from your HTML which makes your pages faster and makes your site easier to update.
+
[[Glossary#CSS|CSS]] stands for '''Cascading Style Sheets'''.  It allows you to store style presentation information (like colors and layout) separate from your HTML structure.  This allows precision control of your website layout and makes your pages faster and easier to update.
-->
+
CSS はカスケーディングスタイルシートを意味し,色やレイアウトなどといったスタイルの情報を HTML とは切り離して記述しておくファイルです。HTML と切り離す事でページの表示を早くさせたりサイトのアップデートをより簡単にできるようにしたりします。
+
  
== WordPress での CSS ==
+
This article briefly describes the use of CSS in WordPress, and lists some references for further information.  For information on CSS itself, see [[Know Your Sources#CSS]].
  
<!-- (Links to wp-layout explained, the bullet article, maybe a list of classes used.) -->
+
==WordPress and CSS==
(wp-layout の説明,the bullet articleや使われているクラス名へのリンク)
+
http://wiki.wordpress.org/CSS%20Tips%20and%20Tricks
+
  
<!--NuclearMoose's annotated wp-layout file:
+
WordPress Themes use a combination of [[Templates|template files]], [[Template Tags|template tags]], and CSS style sheets to generate your WordPress site's look.
http://blog.nuclearmoose.com/wp-docs/wp-layout-explained.htm
+
This document explains what all of the CSS in the default wp-layout.css file means. It is meant to be a reference and a learning tool. If you're looking for a usable wp-layout.css file, get it from the archive you downloaded when installing WordPress. This annotated file is not usable due to the annotations.-->
+
ニュークリア=ムースの注釈付きの wp-layout ファイル:
+
http://blog.nuclearmoose.com/wp-docs/wp-layout-explained.htm
+
  
このドキュメント(文書)はデフォルトの wp-layotu.css ファイルに書かれている全ての CSS がどういう役割をするのかを説明してくれます。このドキュメントはリファレンスや教材用としての意味が強いです。もし使いやすい wp-layout.css ファイルを探しているのなら,WordPress をインストールした時のアーカイブから見つけた方が良いでしょう。この注釈付きのファイルはあくまで注釈がメインなので使いにくいと思います。
+
;Template Files :[[Stepping Into Templates|Template files]] are the building blocks which come together to create your site. In the [[Site Architecture 1.5|WordPress Theme structure]], the header, sidebar, content, and footer are all contained within individual files. They join together to create your page. This allows you to customize the building blocks. For example, in the Default WordPress Theme, the multi-post view found on the front page, category, [[Creating_an_Archive_Index|archives]], and [[Creating_a_Search_Page|search]] web pages on your site, the sidebar is present. Click on any post, you will be taken to the single post view and the sidebar will now be gone. You can [[The Loop in Action|choose which parts and pieces appear]] on your page, and customize them individually, allowing for a different header or sidebar to appear on all pages within a specific category. And more. For a more extensive introduction to Templates, see [[Stepping Into Templates]].
 +
;Template Tags :Template tags are the bits of code which provide instructions and requests for information stored within the WordPress database. Some of these are highly configurable, allowing you to customize the date, time, lists, and other elements displayed on your website. You can learn more about template tags in [[Stepping Into Template Tags]].
 +
;CSS Style Sheets :This is where it all comes together. On every template file within your site, there are [[Site Architecture 1.5|XHTML tags and CSS references]] wrapped around your template tags and content. In the style sheet within each Theme are commands for the page's structure. Without these instructions, your page would simply look like a long typed page.  With these instructions, you can move the building block structures around, making your header very long and filled with graphics or photographs, or simple and narrow. Your site can "float" in the middle of the viewer's screen with space on the left and right, or stretch across the screen, filling the whole page. Your sidebar can be on the right or left, or even start midway down the page. How you style your page is up to you. But the instructions for styling are found in the <tt>style.css</tt> file within each Theme folder.
  
<!--'''Experimenting'''
+
==WordPress Generated Classes==
Of course, one way to get your feet wet with CSS is to dig into the wp-layout.css file and just start changing things. (Remember to backup first, though.) Keep in mind that the properties of any one element on your page can be determined by a number of different sections of your CSS file - that's the ''cascading'' part of cascading stylesheets.-->
+
  
'''実験'''
+
Several classes for aligning images and block elements (DIV, P, TABLE etc.) were introduced in WordPress 2.5: <tt>aligncenter</tt>, <tt>alignleft</tt> and <tt>alignright</tt>. In addition the class <tt>alignnone</tt> is added to images that are not aligned, so they can be styled differently if needed.
  
もちろん,クライアントサーバーシステム(Client Server System=CSS)の沼地を歩くというのであれば、その方法はwp-layout.css(こっちはCascading Style Sheets=CSS) ファイルについて深く掘り下げる事。そして,そう,書き換えを始めていく事です(あ,でも,最初にバックアップを取る事は忘れないで)。ページの中の一つのどの要素のプロパティも CSS ファイルのセクションで書き換えられる事に注意してください。これがカスケーディングスタイルシートの''カスケードする''部分なのです。
+
The same classes are used to align images that have a caption (as of WordPress 2.6). Three additional CSS classes are needed for the captions, together the alignment and caption classes are:
  
<!--== CSS Resources ==
+
.aligncenter,
 +
div.aligncenter {
 +
    display: block;
 +
    margin-left: auto;
 +
    margin-right: auto;
 +
}
 +
 +
.alignleft {
 +
    float: left;
 +
}
 +
 +
.alignright {
 +
    float: right;
 +
}
 +
 +
.wp-caption {
 +
    border: 1px solid #ddd;
 +
    text-align: center;
 +
    background-color: #f3f3f3;
 +
    padding-top: 4px;
 +
    margin: 10px;
 +
    /* optional rounded corners for browsers that support it */
 +
    -moz-border-radius: 3px;
 +
    -khtml-border-radius: 3px;
 +
    -webkit-border-radius: 3px;
 +
    border-radius: 3px;
 +
}
 +
 +
.wp-caption img {
 +
    margin: 0;
 +
    padding: 0;
 +
    border: 0 none;
 +
}
 +
 +
.wp-caption p.wp-caption-text {
 +
    font-size: 11px;
 +
    line-height: 17px;
 +
    padding: 0 4px 5px;
 +
    margin: 0;
 +
}
  
There are tons of great CSS resources on the web, here are a few. TODO: Write descriptions.-->
+
Each theme should have these or similar styles in its <tt>style.css</tt> file to be able to display images and captions properly.
  
== CSS のリソース ==
+
Additionally, there are a few more WordPress class tags that you may optionally wish to style because they are generated by default:
ウェブ上には本当に沢山のCSSに関する良質なリソースがあります。ここにあげているのはほんの少しです。(todo: 説明を書くように)
+
  
=== イントロダクション ===
+
.categories {...}
; http://www.htmldog.com/guides/cssbeginner/ :
+
.cat-item {...}
; http://www.w3schools.com/css/default.asp :  
+
.current-cat {...}
; http://www.westciv.com/style_master/academy/hands_on_tutorial/ :
+
  .current-cat-parent {...}
; http://www.yourhtmlsource.com/stylesheets/introduction.html :
+
.children {...}
; http://www.digital-web.com/articles/css_101/ :
+
.pagenav {...}
; http://www.mezzoblue.com/css/cribsheet/ :
+
.page_item {...}
 +
.current_page_item {...}
 +
.current_page_parent {...}
 +
.current_page_ancestor {...}
 +
.widget {...}
 +
.widget_text {...}
 +
.blogroll {...}
 +
.linkcat{...}
  
=== レイアウトガイド ===
+
==See also==
; http://css.maxdesign.com.au/ :
+
; http://www.alistapart.com/articles/fauxcolumns/ :
+
; http://www.bluerobot.com/web/layouts/ :
+
; http://www.glish.com/css/ :
+
; http://webhost.bridgew.edu/etribou/layouts/ :
+
; http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html :
+
; http://css-discuss.incutio.com/?page=CssLayouts :
+
; http://veerle.duoh.com/comments.php?id=208_0_2_10_C Designing a CSS based template :
+
  
=== フォーラムとメーリングリスト ===
+
To help you understand more about how CSS works in relationship to your web page, you may wish to read some of the articles cited in these lists:
  
; http://www.css-discuss.org/ :
+
* [[Templates]] - Comprehensive list of WordPress Theme and Template articles (a good starting point is [[Using Themes]], and there are also many advanced articles in this list)
; That new beginner CSS list I can't find :
+
* [[Blog Design and Layout]] - Comprehensive list of resources related to site design in WordPress
; http://webdesign-l.com/ :
+
* [[WordPress Lessons]] - Lessons on all aspects of WordPress
; http://www.sitepoint.com/forums/forumdisplay.php?f=53 :
+
  
=== 書籍 ===
+
== WordPress Layout Help ==
  
; [http://zeldman.com/dwws/ Designing with Web Standards]
+
If you are having some problems or questions about your WordPress Theme or layout, begin by checking the website of the Theme author to see if there is an upgrade or answers to your questions. Here are some other resources:
;[http://www.amazon.co.jp/exec/obidos/ASIN/4839913110/ Designing with Web Standards-XHTML+CSSを中心とした「Web標準」によるデザインの実践(日本語版)] : <!-- The bible, by Jeffrey Zeldman. -->ジェフリー=ゼルドマン氏が書いた CSS のバイブル的書籍。
+
; [http://www.simplebits.com/publications/solutions/ Web Standards Solutions]
+
; [http://meyerweb.com/eric/writing.html Anything from Eric Meyer]
+
  
{{原文|CSS|8010}}
+
* [[WordPress Lessons#Designing Your WordPress Site|Lessons on Designing Your WordPress Site]]
 +
* [[Site Architecture 1.5]]
 +
* [[CSS Troubleshooting]]
 +
* [[Finding Your CSS Styles]]
 +
* [[CSS Fixing Browser Bugs]]
 +
* [[Validating a Website]]
 +
* [[FAQ Layout and Design]]
 +
* [[Templates]]
 +
* [http://www.wordpress.org/support/ WordPress Support Forums]
 +
* [http://www.tamba2.org.uk/wordpress/graphicalcss/ WordPress CSS Guides by Podz]
 +
* [[CSS Shorthand]]
 +
* [[HTML to XHTML]] <span style="color:red">NEW!</span>
  
 +
[[Category:Design and Layout]]
 +
 +
{{原文|CSS|82051}}<!-- 01:24, 12 January 2010 Luheou 版 -->
 +
 +
{{DEFAULTSORT:Css}}
 
[[en:CSS]]
 
[[en:CSS]]

2010年4月18日 (日) 21:19時点における版

このページ「CSS」は未翻訳です。和訳や日本語情報を加筆してくださる協力者を求めています

WordPress relies heavily on the presentation styles within CSS. With the introduction of WordPress v1.5 Themes, your layout options haven't just expanded, they've exploded! WordPress has made it easier than ever to change your website look, and opened up the field even more to help you create your own Theme and page layout.

CSS stands for Cascading Style Sheets. It allows you to store style presentation information (like colors and layout) separate from your HTML structure. This allows precision control of your website layout and makes your pages faster and easier to update.

This article briefly describes the use of CSS in WordPress, and lists some references for further information. For information on CSS itself, see Know Your Sources#CSS.

WordPress and CSS

WordPress Themes use a combination of template files, template tags, and CSS style sheets to generate your WordPress site's look.

Template Files 
Template files are the building blocks which come together to create your site. In the WordPress Theme structure, the header, sidebar, content, and footer are all contained within individual files. They join together to create your page. This allows you to customize the building blocks. For example, in the Default WordPress Theme, the multi-post view found on the front page, category, archives, and search web pages on your site, the sidebar is present. Click on any post, you will be taken to the single post view and the sidebar will now be gone. You can choose which parts and pieces appear on your page, and customize them individually, allowing for a different header or sidebar to appear on all pages within a specific category. And more. For a more extensive introduction to Templates, see Stepping Into Templates.
Template Tags 
Template tags are the bits of code which provide instructions and requests for information stored within the WordPress database. Some of these are highly configurable, allowing you to customize the date, time, lists, and other elements displayed on your website. You can learn more about template tags in Stepping Into Template Tags.
CSS Style Sheets 
This is where it all comes together. On every template file within your site, there are XHTML tags and CSS references wrapped around your template tags and content. In the style sheet within each Theme are commands for the page's structure. Without these instructions, your page would simply look like a long typed page. With these instructions, you can move the building block structures around, making your header very long and filled with graphics or photographs, or simple and narrow. Your site can "float" in the middle of the viewer's screen with space on the left and right, or stretch across the screen, filling the whole page. Your sidebar can be on the right or left, or even start midway down the page. How you style your page is up to you. But the instructions for styling are found in the style.css file within each Theme folder.

WordPress Generated Classes

Several classes for aligning images and block elements (DIV, P, TABLE etc.) were introduced in WordPress 2.5: aligncenter, alignleft and alignright. In addition the class alignnone is added to images that are not aligned, so they can be styled differently if needed.

The same classes are used to align images that have a caption (as of WordPress 2.6). Three additional CSS classes are needed for the captions, together the alignment and caption classes are:

.aligncenter,
div.aligncenter {
   display: block;
   margin-left: auto;
   margin-right: auto;
}

.alignleft {
   float: left;
}

.alignright {
   float: right;
}

.wp-caption {
   border: 1px solid #ddd;
   text-align: center;
   background-color: #f3f3f3;
   padding-top: 4px;
   margin: 10px;
   /* optional rounded corners for browsers that support it */
   -moz-border-radius: 3px;
   -khtml-border-radius: 3px;
   -webkit-border-radius: 3px;
   border-radius: 3px;
}

.wp-caption img {
   margin: 0;
   padding: 0;
   border: 0 none;
}

.wp-caption p.wp-caption-text {
   font-size: 11px;
   line-height: 17px;
   padding: 0 4px 5px;
   margin: 0;
}

Each theme should have these or similar styles in its style.css file to be able to display images and captions properly.

Additionally, there are a few more WordPress class tags that you may optionally wish to style because they are generated by default:

.categories {...}
.cat-item {...}
.current-cat {...}
.current-cat-parent {...}
.children {...}
.pagenav {...}
.page_item {...}
.current_page_item {...}
.current_page_parent {...}
.current_page_ancestor {...}
.widget {...}
.widget_text {...}
.blogroll {...}
.linkcat{...}

See also

To help you understand more about how CSS works in relationship to your web page, you may wish to read some of the articles cited in these lists:

  • Templates - Comprehensive list of WordPress Theme and Template articles (a good starting point is Using Themes, and there are also many advanced articles in this list)
  • Blog Design and Layout - Comprehensive list of resources related to site design in WordPress
  • WordPress Lessons - Lessons on all aspects of WordPress

WordPress Layout Help

If you are having some problems or questions about your WordPress Theme or layout, begin by checking the website of the Theme author to see if there is an upgrade or answers to your questions. Here are some other resources:

最新英語版: WordPress Codex » CSS最新版との差分