90 | </section>
91 |
92 |
--------------------------------------------------------------------------------
/README.textile:
--------------------------------------------------------------------------------
1 | This is the source for "learnlayout.com":http://learnlayout.com in case you're curious how it was built.
2 |
3 | h2. How to Build
4 |
5 | * If needed, install "NPM":https://npmjs.org/
6 | ** Last tested version was 6.14.4
7 | * If needed, install "grunt":http://gruntjs.com @npm install -g grunt-cli@
8 | ** Last tested grunt-cli version was 1.3.2
9 | ** Last tested grunt version was 0.4.5
10 | * If needed, do a @npm install@
11 | * If needed, install jekyll @sudo gem install jekyll@
12 | ** Last tested version was 4.1.1
13 | * If needed, install "pygments":http://pygments.org/download/
14 | ** I most recently used `brew install pygments` on Mac
15 | ** Last tested version was 2.7.2
16 | * Build + run test server with @grunt serve@
17 | * or build only with @grunt@
18 |
19 | h2. How to Translate
20 |
21 | Translation files live in the "translations":https://github.com/incompl/csslayoutsite/tree/master/translations directory. Each file is a "2-letter ISO 639-1 language code":http://www.loc.gov/standards/iso639-2/php/code_list.php and the YAML file extention.
22 |
23 | If you're not familiar with YAML, it's a very simple human-readable data format. Each line contains a translation code, a colon, and a value in quotes. The translation codes are the same in every language, and the actual translation on the right is in the appropriate language for the file.
24 |
25 | To contribute to a translation, start with "en.yaml":https://github.com/incompl/csslayoutsite/blob/master/translations/en.yaml and either "email me":mailto:gsmith@incompl.com translated YAML files or make pull requests against this repository if you know how.
26 |
27 | To test a translation, add a @lang@ parameter when using the @grunt@ commands described above. For example, @grunt serve --lang=es@
28 |
29 | h2. License
30 |
31 | "Attribution-NonCommercial 4.0 International (CC BY-NC 4.0)":https://creativecommons.org/licenses/by-nc/4.0/
32 |
--------------------------------------------------------------------------------
/templates/index.html:
--------------------------------------------------------------------------------
1 | ---
2 | layout: default
3 | noFooter: true
4 | ---
5 |
6 |
13 |
14 |
"
23 | index.get_started: "開始學習"
24 |
25 | no_layout.title: "沒有版面配置"
26 | no_layout.1: "如果你只想把所有內容都塞進網頁裡，那麼不用設定任何版面配置當然也可以。然而，如果你使用寬螢幕或超大螢幕瀏覽網頁的話，在閱讀網頁的過程中就會有點困擾，因為每讀完一行，你的視覺焦點要從螢幕最右邊到移動到最左邊，才能開始看第二行的文字。你調整一下瀏覽器視窗大小你就知道我意思了！"
27 | no_layout.2: "在解決這個問題之前，我們必須先確認大家都了解 CSS 裡面一個重要 display 屬性。"
28 |
29 | display.title: "關於 \"display\" 屬性"
30 | display.intro: " display 是設計 CSS 版面配置中最重要的屬性，每個 HTML 元素都有一個預設的 display 值，不同的元素屬性會有不同的預設值。大部分元素的 display 屬性，預設值通常是 block 或 inline 其中一個。若該元素的 display 屬性被標示為 block 就被稱為「區塊元素」，若被標示為 inline 就稱為「行內元素」。"
31 | display.block.title: "block"
32 | display.block: " div 是一個標準的區塊元素。一個區塊元素會讓其內容從新的一行開始顯示，並盡可能的撐滿容器。其他常用的區塊元素包括 p 、 form 以及一些 HTML5 新出現的元素，例如：header 、 footer 、 section 等等。"
33 | display.inline.title: "inline"
34 | display.inline.1: " span 是一個標準的行內元素。一個行內元素可以在段落中"
35 | display.inline.2: "像這樣"
36 | display.inline.3: "包裹一些文字片段，透過 CSS 點綴其樣式，且不會打亂段落原本的版面配置。 a 元素是最常見的行內元素，它可以被用作超連結之用。"
37 | display.none.title: "none"
38 | display.none.1: "另一個常用的 display 值是 none 。有一些特殊的元素 display 預設值會套用 none 屬性值，例如 script 元素就是個典型的例子。display:none 通常會搭配 JavaScript 一起使用，我們可以透過 JavaScript 動態修改元素的 display 屬性，用以隱藏或顯示該元素，而不是將元素從頁面中刪除或重建。"
39 | display.none.2: "display 和 visibility 屬性不一樣，把 display 設定成 none 不會保留元素原本該顯示的空間，但是 visibility: hidden; 會讓元素的內容看不見，但會保留原本內容應該顯示的空間，只是看不到內容而已。"
40 | display.other.title: "其他 display 值"
41 | display.other: "還有很多其他的 display 值，例如 list-item 和 table 等等，這裡有一份詳細的列表，你可以連進去查看完整的屬性值清單。稍後我們會探討 inline-block 和 flex 這兩個屬性。"
42 | display.extra: "就像我之前說過的，每個元素都有一個預設的 display 屬性，不過你可以隨時隨地地覆蓋這個屬性值。雖然我們把 div 修改成一個「行內元素」好像還蠻怪的，不過實務上來說我們會把某些元素修改掉預設的 display 屬性，好讓它可以呈現有特定語義的元素。其中比較常見的例子就是把 li 元素修改成 inline，以便我們將該元素正確地呈現在水平的選單上。"
43 |
44 | margin_auto.title: "margin: auto;"
45 | margin_auto.1: "設定區塊元素的 width 屬性，可以避免該元素從左到右撐滿容器，然後你可以設定左右外邊距（margin-left 與 margin-right）為 auto 來使其水平居中。元素在顯示的時候，只會顯示到你所指定的寬度，然後剩餘的寬度平均的散落在左右兩邊的邊距上。"
46 | margin_auto.2: "唯一的問題是，當瀏覽器視窗寬度比元素的寬度還要窄時，瀏覽器就會出現水平捲軸。讓我們接著來改進這個狀況......"
47 |
48 | max_width.title: "關於 max-width 屬性"
49 | max_width.1: "使用 max-width 替代 width 可以更完美的處理當瀏覽器視窗小於元素寬度的情況，這點在行動裝置上顯得更為重要，你現在就可以調整瀏覽器視窗大小看看這頁的變化！"
50 | max_width.2: "另外，max-width 屬性幾乎在所有的主流瀏覽器都有支援（包括 IE7+ 以後版本），所以各位可以不用擔心有瀏覽器相容性的問題。"
51 |
52 | box_model.title: "關於 Box Model（區塊模型）"
53 | box_model.intro: "在我們在討論 CSS 寬度時，不得不提到關於 Box Model 的議題。當你設定了元素的寬度，實際顯示的元素卻能夠超出你的設定：因為元素的邊框（margin）和內距（padding）會撐開元素。看看下面的例子，我們設定了兩個樣式，這兩個樣式擁有相同寬度設定，但最後元素顯示的實際寬度卻不太一樣。"
54 | box_model.simple: "我小一些..."
55 | box_model.fancy: "我比較大！"
56 | box_model.outro: "以前的人，大多人的解決方法都是靠數學運算，也就是負責撰寫 CSS 的人通常會設定比他實際想要得寬度還小一些，然後減去已知的內距和邊框的寬度。感謝主，你現在不需要再這麼做了..."
57 |
58 | box_sizing.title: "關於 box-sizing 屬性"
59 | box_sizing.1: "經過了幾個世代的轉變，人們意識到自己運算出元素的寬度實在很無趣，所以終於出現了一個叫做 box-sizing 的 CSS 屬性。當你設定一個元素樣式為 box-sizing: border-box;，這個元素的內距和邊框將不會增加元素本身的寬度。我們用跟上一頁一樣的例子，但我們將兩個元素都設定了 box-sizing: border-box; ："
60 | box_sizing.simple: "我們現在一樣大小了！"
61 | box_sizing.fancy: "喔耶！"
62 | box_sizing.2: "這樣寫好像沒有幫助多少，有些 CSS 開發人員想要將這個屬性套用到所有元素上，此時你可以將以下 CSS 樣式套用在頁面上："
63 | box_sizing.3: "這樣可以確保所有元素的寬度都可以用比較直觀的方式來定義。"
64 | box_sizing.4: "因為 box-sizing 算是個比較新的屬性，所以你還應該還是要加上我之前在例子中使用的 -webkit- 和 -moz- 前綴（Prefixes），這樣才能啟用特定瀏覽器實驗中的 CSS 特性。請記得該屬性從 IE8+ 之後就開始支援。"
65 |
66 | position.title: "關於 position 屬性"
67 | position.intro: "為了設計出更複雜的版面配置，我們需要探討關於 position 這個屬性。它有一大堆的屬性值，且這些屬性值不但很難懂，也特別難記憶。讓我們一個一個介紹吧，不過也建議你把這頁加入到我的最愛（書籤）裡。"
68 | position.static.title: "static"
69 | position.static.1: " static 是預設值。任何套用 position: static; 的元素「不會被特別定位」在頁面上特定位置，而是照著瀏覽器預設的配置自動排版在頁面上，所有其他的屬性值都代表該元素會被定位在頁面上。"
70 | position.relative.title: "relative"
71 | position.relative.1: " relative 表現的和 static 一樣，除非你增加了一些額外的屬性。"
72 | position.relative.2: "在一個設定為 position: relative 的元素內設定 top 、 right 、 bottom 和 left 屬性，會使其元素「相對地」調整其原本該出現的所在位置，而不管這些「相對定位」過的元素如何在頁面上移動位置或增加了多少空間，都不會影響到原本其他元素所在的位置。"
73 | position.fixed.title: "fixed"
74 | position.fixed.1: "固定定位（position: fixed）的元素會相對於瀏覽器視窗來定位，這意味著即便頁面捲動，它還是會固定在相同的位置。和 relative 一樣，我們會使用 top 、 right 、 bottom 和 left 屬性來定位。"
75 | position.fixed.2: "我相信你已經注意到頁面右下角的固定定位元素，你現在可以注意看一下，這裡有它所使用的 CSS 樣式："
76 | position.fixed.3: "固定定位元素不會保留它原本在頁面應有的空間，不會跟其他元素的配置互相干擾。"
77 | position.fixed.4: "令人驚訝的是，行動版裝置上的瀏覽器對 fixed 的支援度比想像的還差很多。學習關於此問題的相關文章."
78 | position.fixed.example: "哈囉～ 先不要太關注我！"
79 | position.absolute.title: "absolute"
80 | position.absolute.1: "absolute 應該是最弔詭的 position 屬性值。absolute 與 fixed 的行為很像，不一樣的地方在於 absolute 元素的定位是在他所處上層容器的相對位置。如果這個套用 position: absolute 的元素，其上層容器並沒有「可以被定位」的元素的話，那麼這個元素的定位就是相對於該網頁所有內容（也就是 <body> 元素）最左上角的絕對位置，看起來就是這張網頁的絕對位置一樣，所以當你的畫面在捲動時，該元素還是會隨著頁面捲動。請記得，只有套用 position: static 的元素屬於「不會被特別定位」的元素，套用 static 以外的屬性值都算是「可以被定位」的元素。"
81 | position.absolute.2: "這裡有一個簡單的例子："
82 | position.absolute.relative: "這個元素是相對定位的，如果它是 position: static;，那麼它的子元素如果套用「絕對定位」的話，就會跳過它，並直接參考 body 元素的相對位置。"
83 | position.absolute.absolute: "這個元素被設定成絕對定位（position: absolute;），它會相對於它的父元素進行定位（相對於父元素的絕對定位）。"
84 | position.absolute.3: "這部分確實比較難以理解，但它是讓你可以設計出一個良好 CSS 版面配置的必要知識。下一頁我們將會使用 position 來做出更實務的範例。"
85 |
86 | position_example.title: "更完整的 position 範例"
87 | position_example.1: "透過實務範例可以幫助我們更加理解 position 的用法，如下範例是一個實際的網頁版面配置："
88 | position_example.section.1: " section 元素的 margin-left 樣式確保有足夠的空間容納 nav 元素。"
89 | position_example.section.2: "你可以看看當你調整瀏覽器視窗大小時發生了什麼事，版面配置的效果還不錯！"
90 | position_example.2: "這個例子可以運作是因為 container 比 nav 元素還高，如果容器比 nav 元素還低的話，nav 就會溢出（overflow）到容器外面。在接下來的單元，我們會探討其他的版面配置技術，它們也都各有優劣。"
91 | position_example.footer: "如果你使用了一個固定定位（position: fixed）的頁首或頁尾，請確保有足夠的空間來顯示它們！我在這個例子裡，在 body 元素的樣式上加了 margin-bottom 屬性，並預留了 120px 的空間。"
92 |
93 | float.title: "關於 float 屬性"
94 | float.1: "另一個會在版面配置中使用的 CSS 屬性是 float 。float 可用於實現文繞圖，如下："
95 |
96 | clear.title: "關於 clear 屬性"
97 | clear.floating: "我感覺好像我在漂浮！"
98 | clear.1: "若想控制 float 元素的行為，了解 clear 屬性是非常重要的，請比較以下兩個例子："
99 | clear.2: "這個例子的 section 元素實際上是在 div 之後，然而因為 div 元素會浮動到左邊，所以變成了這樣：這個 section 元素的內容漂浮在 div 旁邊，並且 section 元素反而把所有東西包起來了。如果我們想讓 section 出現在這些 float 元素之後呢？"
100 | clear.3: "使用 clear 我們就可以將這個 section 區塊移到浮動元素 div 的下方，你可以在這個 section 元素加上一個 clear: left; 來宣告清空所有標示 float: left; 的元素，也可以用 clear: right; 或 clear: both; 來清空 float: right; 或同時清除 float: left 與 float: right 的浮動元素。"
101 |
102 | clearfix.title: "clearfix 密技"
103 | clearfix.1: "在使用 float 的時候經常會遇到一個奇怪且糟糕的事："
104 | clearfix.2: "喔，不 ...... 這個圖片比包含它的元素還高，而且它是浮動的，於是它就溢出到了容器外面！"
105 | clearfix.3: "是的，有個方法可以解決這個問題，不過這方式還蠻髒的，它叫做 clearfix 密技（hack）."
106 | clearfix.4: "讓我們加入一些新的 CSS 樣式："
107 | clearfix.5: "我們現在來看看發生了什麼事："
108 | clearfix.6: "好多了！"
109 | clearfix.7: "這個密技可以用在現代的瀏覽器上，但如果你還想支持 IE6，你就必須加入如下樣式："
110 | clearfix.8: "某些特別的瀏覽器可能需要注意，clearfixing 的世界是很可怕的，但這個簡單的密技可以套用在這些主流瀏覽器上。"
111 |
112 | float_layout.title: "float 版面配置範例"
113 | float_layout.1: "完全使用 float 來實現頁面的版面配置是很常見的。這裡有個我之前用 position 實現的版面配置例子，但這次我使用 float 來實現。"
114 | float_layout.2: "這個例子和之前那個例子的結果一模一樣。請注意我們在容器上放了一個 clearfix 密技上去，原本在這個例子中是不需要的，但是當 nav 比這些「固定的」的內容（也就是那些沒有套用 float 的內容）還要高時就需要了。"
115 |
116 | percent.title: "百分比寬度"
117 | percent.1: "百分比是一種相對於目前容器元素寬度的單位。它對圖片很有用：如下我們讓圖片寬度永遠等於容器寬度的 50%，請試著將頁面縮小來看看效果！"
118 | percent.2: "你甚至還能同時使用 min-width 與 max-width 來限制圖片的最大或最小寬度！"
119 |
120 |
121 | percent.layout.title: "百分比寬度的版面配置"
122 | percent.layout.1: "你可以用百分比做版面配置，但是這需要更多的工作。在下面的例子中，當視窗寬度很窄時 nav 的內容就會被擠壓得非常難看。總之，你要選一種最合適你內容的方式來排版。"
123 | percent.layout.2: "當版面配置很窄時， nav 就會被擠扁。更糟的是，你不能在 nav 上使用 min-width 屬性來修復這個問題，因為視窗太小時，右邊的那欄的內容還是會壓到 nav 上面。"
124 |
125 | media_queries.title: "媒體查詢（media queries）"
126 | media_queries.1: "「響應式設計（Responsive Design）」是一種讓網站針對不同的瀏覽器和上網裝置「響應」不同顯示效果的策略，讓網站不管在任何情況下都能完美呈現！"
127 | media_queries.2: "「媒體查詢」是完成「響應式設計」最強大的工具。讓我們使用百分比寬度來做版面配置，然後當瀏覽器寬度小到無法容納側邊欄中的選單時，把版面配置顯示成一欄："
128 | media_queries.3: "當你調整瀏覽器視窗大小時，版面配置比以前更酷了！"
129 | media_queries.4: "太棒了！我們現在的版面配置在行動版瀏覽器上也可以表現得很優異。這裡有一些同樣使用了媒體查詢的知名網站。在 MDN 文件中你還可以學到更多有關媒體查詢的知識。"
130 | media_queries.5: "你還可以使用 meta viewport 讓你的版面配置在行動裝置的瀏覽器上呈現得更完美。"
131 |
132 | inline_block.title: "display: inline-block"
133 | inline_block.1: "你可以建立一堆區塊自動填滿瀏覽器，在過去很長的一段時間大家都使用 float 來做流動式的自動排版，但現在你可以選擇 display: inline-block 來實作，這方法會更加簡單。使用 display: inline-block 的元素就像 display: inline 的元素一樣，但你可以設定 width 與 height 屬性。讓我們看看以下的例子："
134 | inline_block.hard_way.title: "困難的方法（使用 float）"
135 | inline_block.hard_way.box: "我在漂浮！"
136 | inline_block.hard_way.after: "我使用 clear，所以我不會浮動到上面那堆盒子的旁邊。"
137 | inline_block.easy_way.title: "容易的方法（使用 inline-block）"
138 | inline_block.easy_way.info: "你可以用 display: inline-block; 來實現相同效果。"
139 | inline_block.easy_way.box: "我是一個行內元素（inline-block）"
140 | inline_block.easy_way.after: "這次我不需要用 clear 屬性了。讚！"
141 | inline_block.2: "要使用 inline-block 你得額外做些事來支援 IE6 和 IE7。有些時候人們談到 inline-block 會觸發所謂 hasLayout 的東西，你只需要知道那是用來支持舊版 IE 瀏覽器用的。如果你對此很感興趣，可以在上面那個超連結中找到更詳細的資訊。否則我們就繼續下去吧。"
142 |
143 | inline_block_layout.title: "使用 inline-block 版面配置"
144 | inline_block_layout.1: "你可以使用 inline-block 進行版面配置，但有一些事情你必須記得："
145 | inline_block_layout.caveat.1: " vertical-align 會影響到 inline-block 元素，你可能會把它的值設定為 top。"
146 | inline_block_layout.caveat.2: "你需要設定每一欄的寬度。"
147 | inline_block_layout.caveat.3: "在 HTML 原始碼中，如果元素之間有空白字元，那麼欄與欄之間會產生間隔。"
148 | inline_block_layout.tada: "太棒了！"
149 |
150 | column.title: "column"
151 | column.1: "有一組新的 CSS 屬性可以幫你輕鬆的實現多欄文字的版面配置。你看："
152 | column.2: "CSS3 Multiple Columns 是很新的標準，所以你需要使用前綴，並且它不支援 IE9 以下和 Opera Mini 版本。還有許多和 cloumn-* 相關的屬性，點擊這裡瞭解更多。否則讓我們進入下一個主題。"
153 |
154 | flexbox.title: "flexbox"
155 | flexbox.1: "新的 flexbox 技術重新定義了使用 CSS 版面配置的方法。遺憾的是 flexbox規範最近的變動過多，導致不同瀏覽器之間對它的實作也有所差異，不過我仍想分享一些例子來讓你知道即將發生的改變。這些例子目前只能運作在有實作最新版標準的某些瀏覽器上。"
156 | flexbox.2: "網路上有不少過時的 flexbox 資料，如果你想瞭解更多有關 flexbox 的內容，可以從這裡學習如何識別資料是否過時。我也寫過一份關於最新語法的詳細文章。"
157 | flexbox.3: "你還可以使用 flexbox 做到更多版面配置的技巧，這裡只是一些讓你瞭解概念的例子而已："
158 | flexbox.simple.title: "使用 Flexbox 配置簡單的版面"
159 | flexbox.simple.1: "Flexbox 好簡單！"
160 | flexbox.fancy.title: "使用 Flexbox 配置複雜的版面"
161 | flexbox.fancy.1: "空間足夠的時候，我的寬度是 200px；如果空間不足，我會變窄到 100px，但不會再更窄了"
162 | flexbox.fancy.2: "無論如何我的寬度一直都會是 200px"
163 | flexbox.fancy.3: "我會佔滿剩餘寬度的 1/3"
164 | flexbox.fancy.4: "我會佔滿剩餘寬度的 2/3"
165 | flexbox.centering.title: "使用 Flexbox 配置居中的版面"
166 | flexbox.centering.1: "CSS 總算有了一種可以簡單完成的版面垂直置中的方法了！"
167 |
168 | frameworks.title: "CSS 框架"
169 | frameworks.1: "因為 CSS 版面配置有點難用，市面上有不少 CSS 框架可以用來配置版面，這裡有整理一些讓你參考。要使用框架幫你進行版面配置，只有當這個框架真正符合你需求時，使用框架才是個好主意，了解 CSS 的運作方式是無可取代的。"
170 | frameworks.2: "就這樣！如果你對本站有任何反饋，請在 Twitter 上聯繫我！"
171 |
172 | about.title: "關於本站"
173 | about.credits: "本站由 Greg Smith 撰寫與架設，由 Isaac Durazo 設計。我們在 Bocoup 工作。"
174 |
--------------------------------------------------------------------------------
/translations/ja.yaml:
--------------------------------------------------------------------------------
1 | # Japanese
2 |
3 | global.title: "CSSレイアウトを学ぶ"
4 | global.short_title: "CSS"
5 | global.home: "ホーム"
6 | global.toc: "コンテンツ一覧"
7 | global.next: "次へ"
8 | global.previous: "前へ"
9 | global.feedback: "問題 / フィードバック"
10 |
11 | util.extra_credit: "応用"
12 | util.ipsum: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit."
13 | util.nav.1: "ホーム"
14 | util.nav.2: "タコスメニュー"
15 | util.nav.3: "人気順"
16 | util.nav.4: "営業時間"
17 | util.nav.5: "行き方"
18 | util.nav.6: "連絡先"
19 |
20 | index.1: "このサイトでは、ウェブサイトのレイアウトに関するCSSの基礎を学ぶことができる。"
21 | index.2: "CSSのセレクタ/プロパティ/値について、ある程度の知識がある事を前提として書かれている。ところで、このサイトを見ている人の中には、既に少なからずレイアウトの知識がある人もいるだろう。そんな君でも、何か新しい発見があるかもしれない。HTMLやCSSについて初級レベルから学びたい君は、チュートリアルが参考になる。そうでなければ、次に君がプロジェクトに携わるとき、その苛立ちを少しでも我々が軽減できるかどうか、このサイトを見てほしい。"
22 | index.translator: ""
23 | index.get_started: "開始"
24 |
25 | no_layout.title: "No Layout (レイアウト無し)"
26 | no_layout.1: "ウェブサイトなんて、文章や画像などのコンテンツをブラウザの横幅一杯引き延ばし、縦１列に並べるだけで十分だ。だから、レイアウトなんて必要ない。そう君は考えるかもしれない。でも、ブラウザの幅を大きくしているユーザが君のサイトを見たらどう思うだろう？読むのが大変だと不平を言うかもしれない。何せ、次の行を読もうとするたびに、目線を右端から左端に戻さなくてはならないのだから。君のブラウザの横幅を広げて、このページを見てくれ。そうすれば、私の言いたい事が分かるだろう。"
27 | no_layout.2: "さて。この問題の前に、CSSでレイアウトを作るのに重要となる、displayプロパティについて見ていきたい。"
28 |
29 | display.title: "\"display\"プロパティ"
30 | display.intro: "displayは、CSSでレイアウトを作る上で最も重要となるプロパティだ。要素の種類により、displayプロパティのデフォルト値が規定されている。デフォルト値は、blockやinlineが一般的だ。displayがblockの要素は、しばしばブロックレベル要素と呼ばれる。displayがinlineの要素は、単純にインライン要素と呼ばれる。"
31 | display.block.title: "block"
32 | display.block: "divは代表的なブロックレベル要素だ。ブロックレベル要素は新しい行に配置される。そして、ブラウザサイズに応じて、可能な限り左右に引き延ばされる。pやformもブロックレベル要素だ。HTML5で新しく追加されたheader、footer、sectionなどもブロックレベル要素である。"
33 | display.inline.title: "inline"
34 | display.inline.1: "spanは代表的なインライン要素だ。インライン要素は文章中に、文字列の一部として埋め込むことがきる。"
35 | display.inline.2: "このように"
36 | display.inline.3: "、文章の体裁を崩さない。a要素もインライン要素だ。他のページへのリンクするのに、君はいつもこれを使うだろう？"
37 | display.none.title: "none"
38 | display.none.1: "その他、よく使われるものとしてnoneがある。scriptのような特殊な要素は、これがデフォルト値だ。JavaScriptで要素の表示・非表示を切り替えるのに使われたりする。要素を本当に削除したり再生成したりせず、display値を切り替えるのだ。"
39 | display.none.2: "これは、visibilityとは異なる。ある要素のdisplayをnoneにすると、その要素は存在していないものとして扱われ、画面が構築される。visibility: hidden;は、その要素を非表示にするだけで、要素自体は存在しているとして扱われる。なので、その要素が表示されているときと同様に、表示領域が確保される。"
40 | display.other.title: "他のdisplay値"
41 | display.other: "他にも、魅力的なdisplay値がたくさんある。例えば、list-itemやtableだ。これがその完全なリストだ。inline-blockとflexについては、後半で説明する。"
42 | display.extra: "既に言及したように、全ての要素はデフォルトのdisplay値を持っている。だが、君はそれをいつでもoverrideする事ができる! とは言うものの、div要素のdisplayをinlineにすることに、さして意味はないだろう。特別なセマンティクスを持つ要素のdisplayをカスタマイズすると便利だ。例えば、水平メニューを作るのに、li要素をinlineにするなどである。"
43 |
44 | margin_auto.title: "margin: auto;"
45 | margin_auto.1: "ブロックレベル要素のwidthを設定すると、要素のコンテナが左右に引き延ばされなくなる。また、左右のマージンをautoにすると、左右中央に要素を配置できる。要素のwidthは設定した値になるから、残りのスペースは左右のマージン間で均等に分配される。"
46 | margin_auto.2: "ただし、ブラウザの幅が要素の幅より狭くなると、問題が起こってしまう。ブラウザは、水平スクロールバーを生成して解決しようとしているが。この状況をもっと良くしよう..."
47 |
48 | max_width.title: "max-width"
49 | max_width.1: "そんなときは、widthの代わりに、max-widthを使ってみよう。すると、ブラウザのサイズが小さい時の操作性も向上するだろう。携帯用のサイトを作るときには、特に重要だ。確認のため、ブラウザのサイズを変えながら、このページを見てくれ!"
50 | max_width.2: "ともかく、max-widthは、IE7+を含む主要なブラウザでサポートしている。だから、どんどん使ってくれてかまわない。"
51 |
52 | box_model.title: "ボックスモデル"
53 | box_model.intro: "これまで、我々はwidthについて議論してきた。だから、widthの大きな落とし穴である、ボックスモデルについてそろそろ話そう。要素のwidthを設定しても、実際の幅が設定した値より大きくなってしまう場合がある: 要素のborderとpaddingの値が、設定したwidthに加算されて引き延ばされてしまうんだ。以下の例を見てみよう。同じwidthを持つ二つの要素が結果的に異なるサイズで表示される。"
54 | box_model.simple: "私は小さい..."
55 | box_model.fancy: "そして、僕は大きい!"
56 | box_model.outro: "長い間、この問題の解決策は、計算をする事だけだった。CSSを書く人は、実際に設定したいwidthの値より、いつも少し小さめの値を指定するのだ。具体的には、paddingとborderの値を差し引いた値だ。ありがたいことに、君はもうそれをする必要はない..."
57 |
58 | box_sizing.title: "box-sizing"
59 | box_sizing.1: "暗黒時代は終わった。ついに、計算なんてしたくないというという意思のもと、新しいCSSプロパティbox-sizingを人々は作りだした。要素にbox-sizing: border-box;を設定すると、要素のpaddingとborderの幅が要素のwidthを増やすようなことはもはやない。 これは前のページと同じ例だ。だが、両方の要素に対して、box-sizing: border-box;を適用している:"
60 | box_sizing.simple: "さあ、私たちは同じサイズになった！"
61 | box_sizing.fancy: "やったー!"
62 | box_sizing.2: "これはかなりいい。だから、自分のページ内の全要素に対して、この設定を適用したいと考える人が現れてもおかしくはない。そんな人は、以下のようなCSSを書くと良い:"
63 | box_sizing.3: "これでページ内の全要素に対して、いつでも直感的にサイズ指定できるようになった。"
64 | box_sizing.4: "box-sizingはとても新しいプロパティだ。だから、今のところ、例に示したような-webkit-や-moz-といったプレフィックスを使った方が良い。プレフィックスを使う事で、ブラウザ独自の実験的フィーチャーを利用することができる。また、IE8+の存在についても忘れてはならない。"
65 |
66 | position.title: "position"
67 | position.intro: "さらに複雑なレイアウトをつくるには、position プロパティについて理解する必要がある。取り得る値はたくさんある。名前には意味がないので、覚えるのはなかなか難しい。１つずつ見ていこう。だけど、このページをブックマークしておくのが無難かもしれない。"
68 | position.static.title: "static"
69 | position.static.1: "static はデフォルト値だ。position: static;を設定した要素は、どんな方法でも位置を指定できない。 staticな要素は、位置指定無効な要素とも呼ばれている。また、それ以外の要素は位置指定有効な要素と呼ばれる。"
70 | position.relative.title: "relative"
71 | position.relative.1: "余分なプロパティを設定しなければ、relativeはstaticと同等だ。"
72 | position.relative.2: "top、right、bottom、leftプロパティを、relativeな要素に対して設定する。すると、元々の表示される予定だった位置からの相対位置に配置するように調整される。この調整により生じた左の隙間に、他のコンテンツが自動的に配置されることはない。"
73 | position.fixed.title: "fixed"
74 | position.fixed.1: "fiexdな要素は、viewportに対する相対位置で配置される。つまり、ページがスクロールされても、いつでも同じ場所に配置されるという事だ。relativeと同様に、top、right、bottomやleftプロパティが使われる。"
75 | position.fixed.2: "このページの右下の角にfixedな要素がある。既に君は気づいて、気づかないふりをしていたに違いない。だが、ここではそれに気づく許可をあげよう。これが適用しているCSSだ:"
76 | position.fixed.3: "fixedな要素は、relativeな要素と異なり、元々の表示位置からの調整により生じた隙間にも自動的に他のコンテンツが配置され得る。"
77 | position.fixed.4: "ただし、モバイルブラウザは、fixedに対して、驚くほどイマイチなサポートしかしていない。もっと詳しい状況を知りたければここを参照しよう。"
78 | position.fixed.example: "Hello! まだ私のことは気にしないでね。"
79 | position.absolute.title: "absolute"
80 | position.absolute.1: "absoluteは最も扱いにくい。absoluteはfixedとほぼ同等である。だが、viewportからの相対位置の代わりに、位置指定有効かつ最も近い世代の祖先要素からの相対位置に配置されるという点が異なる。位置指定有効な要素の祖先を持たなければ、absoluteな要素はdocumentのbodyからの相対位置に配置されるし、ページスクロールで動きもする。 \"位置指定有効な\"要素はstatic以外のいずれかの値が指定された場合であったことを思い出してほしい。"
81 | position.absolute.2: "以下は単純な例だ:"
82 | position.absolute.relative: "これはrelativeな要素だ。もしこの要素がposition: static;だったら、absoluteな子要素はここから逃げ出すだろう。そして、子要素はdocumentのbodyからの相対位置で指定されるのだ。"
83 | position.absolute.absolute: "これはabsoluteな要素だ。親要素からの相対位置で指定されている。"
84 | position.absolute.3: "これは扱いづらい。だが、最高のCSSレイアウトを作るのには不可欠だ。次のページでは、もっと実用的な例でpositionを使ってみる。"
85 |
86 | position_example.title: "positionの例"
87 | position_example.1: "実践的な例では、positionはもう少し理にかなっているかもしれない。以下が本物っぽいページレイアウトだ。"
88 | position_example.section.1: "navが配置されることが分かっているので、sectionのmargin-leftをこのように指定できる。そうでなければ、absoluteな要素とstaticな要素は重なってしまう。"
89 | position_example.section.2: "ブラウザをリサイズすると何が起こるか気づいたかい？いい感じに動作するよ!"
90 | position_example.2: "コンテナの高さがnavより高いから、この例は上手く動作する。もし違っていたら、navはコンテナの外にはみ出るだろう。次のページでは、また違った長所と短所のある、他のレイアウト技術について話そう。"
91 | position_example.footer: "fixedなheaderやfooterを配置するには、そのための場所が無くてはならないればならない!私は、bodyにmargin-bottomを設定している。"
92 |
93 | float.title: "float"
94 | float.1: "レイアウトでよく使うCSSプロパティに、floatがある。floatを使うと、画像周りで文字列を折り返すようにできる:"
95 |
96 | clear.title: "clear"
97 | clear.floating: "私はfloatされている!"
98 | clear.1: "clearプロパティは、floatの振る舞いを制御する上で重要だ。以下、２つの例を比較してみよう:"
99 | clear.2: "本来であればsection要素はdivの下にくる。だが、divは左にfloatされているため、こんな風になる。具体的に言うと、section中の文字列が、divの周りで折り返すようになる。それから、sectionが全体を囲む。次に、floatされている要素の下に、sectionを配置したくなったらどうすればいいだろう？"
100 | clear.3: "clearを使うと、floatされているdivの下にsectionを配置できる。左側にfloatしている要素に対しては、clearプロパティの値としてleftを使う。もちろん、rightやbothにもclearを使える。"
101 |
102 | clearfix.title: "clearfix hack"
103 | clearfix.1: "ここでは奇妙な事。floatでときどき起こる悪い現象を取り上げる:"
104 | clearfix.2: "ああ... この例では、画像自体の高さが、画像を含む要素より長い。しかも、画像はfloatされている。だから、コンテナの外に画像がはみ出したんだ!"
105 | clearfix.3: "ブー、不正解。これを直す方法があるにはある。だが、少々みっともない。clearfix hackと呼ばれる方法だ。"
106 | clearfix.4: "さあ、新しくこのCSSを追加してみよう:"
107 | clearfix.5: "さて、何が起こったかな:"
108 | clearfix.6: "かなりいいね!"
109 | clearfix.7: "この設定は、大抵のモダンブラウザで動作する。もしIE6もサポートしたいなら、君は以下を追加したくなるだろう:"
110 | clearfix.8: "ただし、もっと慎重にならなければならい外来ブラウザもある。clearfixingの世界はかなり恐ろしい。とは言え、多くの主要なブラウザでは、この簡単な解決策で上手くいく。"
111 |
112 | float_layout.title: "floatを使用したレイアウトの例"
113 | float_layout.1: "floatを使ってページ全体をレイアウトするのは、よくあることだ。以下は、positionで前回作ったレイアウトを、floatを使って実現したものだ。"
114 | float_layout.2: "この例は、前回同様に動作する。ところで、コンテナにclearfixを設定していることに気づいたかい？この例では、これは必要ない。だけど、もしfloatされていないコンテンツよりnavの高さが長くなったら、その時は必要になるだろう。"
115 |
116 | percent.title: "パーセント指定のwidth"
117 | percent.1: "パーセントは相対的な単位だ。特に画像表示にはもってこいだ。コンテナの幅がいつでも50%になる画像を準備し、ページを縮小して何が起こるか見てみよう!"
118 | percent.2: "どのくらい画像を拡縮させるかを制限するのに、min-widthやmax-widthを使う事もできる!"
119 | percent.layout.title: "パーセント指定のwidthを用いたレイアウト"
120 | percent.layout.1: "パーセントを使ってレイアウトを作ることもできる。だが、普通より少し手間がかかるかもしれない。この例でをブラウザの幅をものすごく狭くして見てみよう。すると、navのコンテンツが、あまり喜ばしくない方法でテキストを折り返し始めるのが分かるだろう。"
121 | percent.layout.2: "ブラウザの横幅が極端に狭いと、このレイアウトのnavはぐちゃぐちゃになってしまう。さらに悪い事に、右の列に悪影響が出るため、navに対してmin-widthを使う事もできない。"
122 |
123 | media_queries.title: "メディアクエリー"
124 | media_queries.1: "\"レスポンシブデザイン\"とは、どんなときでもブラウザやデバイスの表示状態に\"合わせて\"美しいサイトを作る戦略である。"
125 | media_queries.2: "そして、メディアクエリーは、レスポンシブデザインを実現するための最も強力なツールだ。widthをパーセント指定した例を考えよう。サイドバーにメニューが入りきらなくなるほどブラウザの幅を小さくした場合、全てのコンテンツが１列で表示されるようにしたい:"
126 | media_queries.3: "ブラウザのサイズを変えても、今までよりずっとクールだ!"
127 | media_queries.4: "じゃーん! 今や我々のレイアウトは、モバイルブラウザで見てもいい感じに見える。これはメディアクエリーを使った人気サイトだ。min-widthとmax-widthよりたくさんある: もっと学びたければ、MDNドキュメントを見てみよう。"
128 | media_queries.5: "metaタグのviewportを使うと、携帯での見栄えをもっと良くできる。"
129 |
130 | inline_block.title: "inline-block"
131 | inline_block.1: "ブラウザの幅に合わせてボックスをいい感じに均等に配置する、グリッドレイアウトを作る事ができる。これは、昔からfloatを使って実現してきた。だが、今はinline-blockを使って簡単に実現できる。inline-block要素はinline要素のようなものだ。だが、widthとheightを持つ事ができるという点で異なる。両方のやり方の例を見てみよう。"
132 | inline_block.hard_way.title: "難しい方法(floatを使用)"
133 | inline_block.hard_way.box: "私はfloatされているよ!"
134 | inline_block.hard_way.after: "私はclearを使っている。だから、上のボックス達に続いてfloatされたりしない。"
135 | inline_block.easy_way.title: "簡単な方法(inline-blockを使用)"
136 | inline_block.easy_way.info: "同様の事を、displayプロパティの値をinline-blockにすることで実現できる。"
137 | inline_block.easy_way.box: "私は、インラインブロックです!"
138 | inline_block.easy_way.after: "私はclearを使う必要はない。最高だね!"
139 | inline_block.2: "inline-blockのIE6とIE7のサポートには、さらに手間をかける必要がある。inline-blockについて、hasLayoutと結びつけて話す人が時々いるだろう。だが、その話題は古いブラウザのサポートが必要な場合に限られるという事だけ知っておいてくれれば十分だ。興味があれば、IE6とIE7のサポートについての前記のリンクをたどってくれ。ともかく、続けよう。"
140 |
141 | inline_block_layout.title: "inline-blockで作るレイアウト"
142 | inline_block_layout.1: "inline-blockはレイアウトを作るのにも使うこともできる。以下を覚えておいてほしい:"
143 | inline_block_layout.caveat.1: "inline-blockの要素は、vertical-alignプロパティに影響される。そして、君はおそらくvertical-alignをtopに設定するだろう"
144 | inline_block_layout.caveat.2: "列となる要素それぞれに対して、幅を指定しなくてはならない"
145 | inline_block_layout.caveat.3: "HTMLで、列となる要素の間にホワイトスペースが入ると、隙間ができてしまう"
146 | inline_block_layout.tada: "じゃーん!"
147 |
148 | column.title: "column"
149 | column.1: "多段レイアウトを簡単に作るための、新しいCSSプロパティを紹介したい。以下を見てくれ:"
150 | column.2: "上記のcolumn関連のCSSプロパティはとても新しいので、プレフィックスを使う必要がある。また、〜IE9とOpera Miniでは動作しない。他にもcolumn関連のCSSプロパティがいくつかある。もっと読みたいならここを見て。そうでもなければ、次の話題へうつろう。"
151 |
152 | flexbox.title: "flexbox"
153 | flexbox.1: "新flexboxレイアウトモードは、CSSでレイアウトを作るにはどうすべきかを、改めて定義し直したものだ。残念ながら、最近でも仕様が大きく変えられている。そのような背景もあり、異なるブラウザで異なる実装がなされている。さらに、２つの例を紹介したい。そうすれば、何ができるか分かるだろう。これらの例は、現在の最新の仕様を適用しているいくつかのブラウザで動作する。"
154 | flexbox.2: "周りには、古いフレックスボックスの仕様や実装に関する、本やWeb記事があふれている。だから、フレックスボックスについて学びたければ、そのリソースが現在のものかどうか特定するために、ここから始める といいだろう。私が書いた最新のフレックスボックスの仕様に則った詳細記事もある。"
155 | flexbox.3: "フレックスボックスを使うと、もっといろんなことができる。以下に示す例は、君にアイディアを与えるためのほんの一例にすぎない:"
156 | flexbox.simple.title: "フレックスボックスで単純なレイアウト"
157 | flexbox.simple.1: "フレックスボックスはとても簡単!"
158 | flexbox.fancy.title: "フレックスボックスで楽しいレイアウト"
159 | flexbox.fancy.1: "空きスペースがあれば、私は200pxだ。 無ければ、私は100pxに縮む。でも、それより小さくはならない。"
160 | flexbox.fancy.2: "私は、何が起ころうと、いつも200pxだ。"
161 | flexbox.fancy.3: "私は、幅1/3一杯に広がる。"
162 | flexbox.fancy.4: "私は、幅2/3一杯に広がる。"
163 | flexbox.centering.title: "フレックスボックスで中央寄せ"
164 | flexbox.centering.1: "ついに、簡単に、CSSを使って、上下中央寄せにしている!"
165 |
166 | frameworks.title: "CSSフレームワーク"
167 | frameworks.1: "CSSレイアウトはとても扱いづらい。だから、いろんな人がウェブサイトを簡単に作るためのフレームワークを提供している。ここではその一部を紹介する。君のウェブサイトで実現したいレイアウトを、CSSフレームワークで実現できるなら、それを採用するのは良いとことだ。ただし、CSSフレームワークを使っても、CSSがどのように動作しているか知る事はできないということは覚えておいてほしい。"
168 | frameworks.2: "以上だ! 何かフィードバックがあれば、Twitterで知らせてくれ!"
169 |
170 | about.title: "このサイトについて"
171 | about.credits: "Written and built by Greg Smith. Design by Isaac Durazo. We work at Bocoup."
172 |
--------------------------------------------------------------------------------
/translations/ko.yaml:
--------------------------------------------------------------------------------
1 | # Korean
2 |
3 | global.title: "CSS 레이아웃을 배웁시다"
4 | global.short_title: "CSS"
5 | global.home: "홈"
6 | global.toc: "목차"
7 | global.next: "다음"
8 | global.previous: "이전"
9 | global.feedback: "문제 / 피드백"
10 |
11 | util.extra_credit: "보충 내용"
12 | util.ipsum: "나랏말ᄊᆞ미 中듀ᇰ國귁에 달아 文문字ᄍᆞᆼ와로 서르 ᄉᆞᄆᆞᆺ디 아니ᄒᆞᆯᄊᆡ 이런 젼ᄎᆞ로 어린百ᄇᆡᆨ姓셔ᇰ이 니르고져 호ᇙ 배 이셔도 ᄆᆞᄎᆞᆷ내 제 ᄠᅳ들 시러 펴디 몯ᄒᆞᇙ 노미 하니라 내 이ᄅᆞᆯ 爲윙ᄒᆞ야 어엿비 너겨 새로 스믈여듧 字ᄍᆞᆼᄅᆞᆯ ᄆᆡᇰᄀᆞ노니 사ᄅᆞᆷ마다 ᄒᆡᅇᅧ 수ᄫᅵ 니겨 날로 ᄡᅮ메 便뼌安ᅙᅡᆫ킈 ᄒᆞ고져 ᄒᆞᇙ ᄯᆞᄅᆞ미니라ㄱ·ᄂᆞᆫ:엄쏘·리·니君군ㄷ字·ᄍᆞᆼ·처ᅀᅥᆷ·펴·아·나ᄂᆞᆫ소·리·ᄀᆞᄐᆞ·니ᄀᆞᆯ·ᄫᅡ·쓰·면虯뀨ᇢㅸ字·ᄍᆞᆼ·처ᅀᅥᆷ·펴·아·나ᄂᆞᆫ소·리·ᄀᆞ·ᄐᆞ니·라ㅋ·ᄂᆞᆫ:엄쏘·리·니快·쾡ㆆ字·ᄍᆞᆼ·처ᅀᅥᆷ·펴·아·나ᄂᆞᆫ소·리·ᄀᆞ·ᄐᆞ니·라ㆁ·ᄂᆞᆫ:엄쏘·리·니業·ᅌᅥᆸ字·ᄍᆞᆼ·처ᅀᅥᆷ·펴·아·나ᄂᆞᆫ소·리·ᄀᆞ·ᄐᆞ니·라ㄷ·ᄂᆞᆫ·혀쏘·리·니斗두ᇢㅸ字·ᄍᆞᆼ·처ᅀᅥᆷ·펴·아·나ᄂᆞᆫ소·리·ᄀᆞ·ᄐᆞ니ᄀᆞᆯ·ᄫᅡ·쓰·면覃땀ㅂ字·ᄍᆞᆼ·처ᅀᅥᆷ·펴·아·나ᄂᆞᆫ소·리·ᄀᆞ·ᄐᆞ니·라"
13 | util.nav.1: "홈"
14 | util.nav.2: "타코 메뉴"
15 | util.nav.3: "초안 목록"
16 | util.nav.4: "시간"
17 | util.nav.5: "방향"
18 | util.nav.6: "연락처"
19 |
20 | index.1: "이 사이트에서는 모든 웹 사이트의 레이아웃에 사용되는 CSS의 기초를 다룹니다."
21 | index.2: "이곳에서는 여러분이 선택자와 프로퍼티, 값이 무엇인지 알고 있다고 가정합니다. 그리고 레이아웃 작업이 여러분을 짜증 나게 만드는 작업일 수도 있겠지만 이미 한두 가지 레이아웃을 알고 있다고 가정합니다. HTML과 CSS를 처음부터 배우고 싶다면 이 튜토리얼을 참고하세요. 그렇지 않다면 이 튜토리얼이 여러분의 다음 프로젝트에 도움될 수 있을지 알아봅시다."
22 | index.translator: "한국어 번역: 이대엽"
23 | index.get_started: "시작"
24 |
25 | no_layout.title: "레이아웃 없음"
26 | no_layout.1: "페이지에 콘텐츠가 기다란 한 줄로만 나오게 하고 싶다면 아무런 레이아웃을 지정하지 않는 방법도 괜찮습니다. 하지만 사용자가 브라우저 창을 굉장히 넓게 키운다면 콘텐츠를 읽기가 굉장히 불편해질 것입니다. 각 줄이 끝날 때마다 다음 줄로 가려면 오른쪽에서 왼쪽으로 먼 거리를 움직여야 하니까요. 브라우저 크기를 조정해서 이게 무슨 의미인지 확인해 보세요!"
27 | no_layout.2: "이 문제를 해결하기에 앞서 굉장히 중요한 display 프로퍼티에 관해 확실히 알아봅시다."
28 |
29 | display.title: "\"display\" 프로퍼티"
30 | display.intro: "display는 CSS에서 레이아웃을 제어하기 위한 가장 중요한 프로퍼티입니다. 모든 엘리먼트에는 엘리먼트의 유형에 따라 기본 표시값이 있습니다. 대부분의 엘리먼트에 대한 기본값은 보통 block이나 inline입니다. 블록 엘리먼트는 블록 레벨 엘리먼트라고 부를 때도 있으며, 인라인 엘리먼트는 늘 인라인 엘리먼트라고 부릅니다."
31 | display.block.title: "block"
32 | display.block: "div는 표준 블록 레벨 엘리먼트입니다. 블록 레벨 엘리먼트는 새 줄에서 시작해 좌우로 최대한 늘어납니다. 자주 볼 수 있는 다른 블록 레벨 엘리먼트로 p와 form이 있으며, HTML5에서 새로 추가된 엘리먼트로 header와 footer, section 등이 있습니다."
33 | display.inline.title: "inline"
34 | display.inline.1: "span은 표준 인라인 엘리먼트입니다. 인라인 엘리먼트는 단락 안에서"
35 | display.inline.2: "이처럼"
36 | display.inline.3: "해당 단락의 흐름을 방해하지 않은 채로 텍스트를 감쌀 수 있습니다. 링크에 사용하는 a 엘리먼트는 가장 흔히 볼 수 있는 인라인 엘리먼트입니다."
37 | display.none.title: "none"
38 | display.none.1: "흔히 볼 수 있는 또 한 가지 display 값은 none입니다. script와 같은 일부 특별한 엘리먼트에서는 none을 기본값으로 사용하기도 합니다. 이 값은 자바스크립트에서 엘리먼트를 실제로 삭제하고 재생성하지 않고도 엘리먼트를 보이고 감추는 데 흔히 사용됩니다."
39 | display.none.2: "이것은 visibility와 다릅니다. display를 none으로 설정하면 엘리먼트가 마치 존재하지 않는 것처럼 페이지가 렌더링됩니다. visibility: hidden;으로 설정하면 엘리먼트가 감춰질 테지만 해당 엘리먼트는 완전히 보이지 않게 되더라도 여전히 공간을 차지합니다."
40 | display.other.title: "다른 display 값"
41 | display.other: "list-item과 table 같은 다른 좀 더 특이한 display 값도 있습니다. 전체 목록은 이곳을 참고하세요.inline-block과 flex에 대해서는 나중에 살펴보겠습니다."
42 | display.extra: "앞에서 언급했듯이 모든 엘리먼트에는 기본 표시 타입이 지정돼 있습니다. 하지만 언제든지 이러한 기본값을 재정의할 수 있습니다! 인라인 div를 만드는 것은 적절하지 않겠지만 이를 이용해 특별한 시맨틱을 지닌 엘리먼트의 표시 방식을 조정할 수 있습니다. 흔히 볼 수 있는 예로 가로 메뉴를 만들기 위해 인라인 li 엘리먼트를 만드는 것이 있습니다."
43 | margin_auto.title: "margin: auto;"
44 | margin_auto.1: "블록 레벨 엘리먼트의 width를 설정하면 컨테이너의 좌우 가장자리로 늘어나지 않게 할 수 있습니다. 그런 다음 좌우 마진을 auto로 설정해 해당 엘리먼트를 컨테이너 안에서 가로 중앙에 오게 할 수 있습니다. 엘리먼트는 여러분이 지정한 너비를 차지할 테고, 나머지 공간은 두 마진에 균등하게 나눠질 것입니다."
45 | margin_auto.2: "브라우저 창이 엘리먼트 너비보다 좁을 때 유일하게 문제가 발생합니다. 브라우저에서는 페이지에 가로 스크롤바를 만들어 이 문제를 해결합니다. 그럼 이 같은 상황을 개선해 봅시다..."
46 | max_width.title: "max-width"
47 | max_width.1: "이러한 상황에서 width 대신 max-width를 사용하면 브라우저가 작은 창을 처리하는 방식을 개선할 수 있습니다. 이것은 사이트를 모바일 환경에서도 사용할 수 있게 만들 때 중요합니다. 이 페이지의 크기를 조절해서 어떻게 바뀌었는지 확인해 보세요!"
48 | max_width.2: "그나저나 max-width는 IE7+를 비롯한 주요 브라우저에서 모두 지원되므로 안심하고 사용하셔도 됩니다."
49 | box_model.title: "박스 모델"
50 | box_model.intro: "너비에 관해 이야기하는 김에 너비와 관련해서 반드시 알아둬야 할 박스 모델에 대해 이야기하겠습니다. 엘리먼트의 너비를 설정할 경우 해당 엘리먼트는 실제로 여러분이 설정한 것보다 크게 나타날 수 있습니다. 이것은 엘리먼트의 테두리와 패딩이 지정된 너비 이상으로 엘리먼트를 늘리기 때문입니다. 다음 예제를 보시면 너비값을 동일하게 설정했는데도 결과적으로 크기가 다릅니다."
51 | box_model.simple: "저는 더 작습니다..."
52 | box_model.fancy: "그리고 전 더 커요!"
53 | box_model.outro: "오랫동안 이 문제의 해법은 너비값을 조절하는 것이었습니다. CSS 코드를 작성하는 사람들은 패딩과 테두리를 빼는 식으로 늘 원하는 것보다 작은 너비값을 지정해왔습니다. 다행히도 이제 더는 그렇게 하지 않아도 됩니다."
54 |
55 | box_sizing.title: "box-sizing"
56 | box_sizing.1: "오랜 시간에 걸쳐 사람들은 너비값을 조절하는 해법이 그다지 만족스럽지 않다는 사실을 깨닫고 box-sizing이라고 하는 새로운 CSS 프로퍼티를 만들어냈습니다. 엘리먼트에 box-sizing을 지정하면 해당 엘리먼트의 패딩과 테두리가 더는 너비를 늘리지 않습니다. 다음은 이전 페이지와 동일한 예제이지만 두 엘리먼트에 모두 box-sizing: border-box;를 지정했습니다."
57 | box_sizing.simple: "이제 크기가 같아졌어요!"
58 | box_sizing.fancy: "야호!"
59 | box_sizing.2: "이 방법이 훨씬 더 낫기 때문에 페이지 상의 모든 엘리먼트가 항상 이런 식으로 동작하게 만들고 싶은 분들도 있습니다. 그런 분들은 페이지에 다음과 같은 CSS 코드를 집어넣습니다."
60 | box_sizing.3: "이렇게 하면 모든 엘리먼트가 항상 이처럼 더 직관적인 방식으로 크기가 지정됩니다."
61 | box_sizing.4: "box-sizing은 다소 근래에 생긴 프로퍼티라서 지금 당장은 예제에서 한 것처럼 -webkit-이나 -moz- 접두사를 붙여야 합니다. 이 기법은 특정 브라우저에서 실험적인 기능들을 활성화하는 데 사용됩니다. 아울러 이 기법은 IE8+에서만 사용할 수 있다는 점도 염두에 두세요."
62 | position.title: "position"
63 | position.intro: "좀 더 복잡한 레이아웃을 만들기 위해서는 position 프로퍼티에 관해 살펴볼 필요가 있습니다. position 프로퍼티에는 다양한 값을 설정할 수 있으며, 각 값의 이름은 제대로 지어지지 않아서 기억하기가 불가능합니다. 그럼 지금부터 하나씩 살펴보기로 하고, 이 페이지를 즐겨찾기에 추가해 둬야 할 수도 있습니다."
64 | position.static.title: "static"
65 | position.static.1: "static은 기본값입니다. position: static;이 설정된 엘리먼트는 그다지 특별한 방식으로 위치가 지정된 것이 아닙니다. 정적(static) 엘리먼트는 위치가 지정된 것이 아니라고 표현하며, static이 아닌 다른 값으로 지정된 엘리먼트에 대해 위치가 지정됐다고 표현합니다."
66 | position.relative.title: "relative"
67 | position.relative.1: "relative는 별도의 프로퍼티를 지정하지 않는 이상 static과 동일하게 동작합니다."
68 | position.relative.2: "상대 위치가 지정된 엘리먼트에 top이나 right, bottom, left를 지정하면 기본 위치와 다르게 위치가 조정됩니다. 다른 콘텐츠는 해당 엘리먼트에서 남긴 공백에 맞춰 들어가게끔 조정되지 않을 것입니다."
69 | position.fixed.title: "fixed"
70 | position.fixed.1: "고정(fixed) 엘리먼트는 뷰포트(viewport)에 상대적으로 위치가 지정되는데, 이는 페이지가 스크롤되더라도 늘 같은 곳에 위치한다는 뜻입니다. relative와 마찬가지로 top이나 right, bottom, left 프로퍼티가 사용됩니다."
71 | position.fixed.2: "페이지의 우측 하단 구석에 고정된 엘리먼트가 있다는 사실을 눈치채셨을 겁니다. 이 엘리먼트를 눈여겨보세요. 다음은 이 엘리먼트를 그 자리에 놓이게 만든 CSS 코드입니다."
72 | position.fixed.3: "고정 엘리먼트는 평소대로라면 있었을 법한 공백을 페이지에 남기지 않습니다."
73 | position.fixed.4: "모바일 브라우저의 경우 고정 엘리먼트 지원이 굉장히 불안정합니다. 이와 관련된 사항은 이곳에서 좀 더 자세히 확인하실 수 있습니다."
74 | position.fixed.example: "안녕하세요! 아직은 저한테 관심을 보이지 마세요."
75 | position.absolute.title: "absolute"
76 | position.absolute.1: "absolute는 가장 다루기 까다로운 위치 지정 값입니다. absolute는 뷰포트에 상대적으로 위치가 지정되는 게 아니라 가장 가까운 곳에 위치한 조상 엘리먼트에 상대적으로 위치가 지정된다는 점을 제외하면 fixed와 비슷하게 동작합니다. 절대 위치가 지정된 엘리먼트가 기준으로 삼는 조상 엘리먼트가 없으면 문서 본문(document body)을 기준으로 삼고, 페이지 스크롤에 따라 움직입니다. \"위치가 지정된\" 엘리먼트는 position이 static으로 지정되지 않은 엘리먼트를 가리킨다는 사실을 기억하세요."
77 | position.absolute.2: "다음은 간단한 예제입니다."
78 | position.absolute.relative: "이 엘리먼트는 상대 위치가 지정돼 있습니다. 이 엘리먼트가 position: static;이었다면 절대 위치가 지정된 자식 엘리먼트는 이 엘리먼트에서 빠져나와 문서 본문을 기준으로 상대 위치가 지정됐을 것입니다."
79 | position.absolute.absolute: "이 엘리먼트에는 절대 위치가 지정돼 있습니다. 부모 엘리먼트를 기준으로 상대 위치가 정해져 있지요."
80 | position.absolute.3: "여기서 배운 내용은 꽤나 까다롭지만 멋진 CSS 레이아웃을 만드는 데 필수적인 내용입니다. 다음 페이지에서는 좀 더 실전 예제에서 position을 사용해 보겠습니다."
81 |
82 | position_example.title: "위치 지정 예제"
83 | position_example.1: "아래의 위치 지정 예제는 실제 예제에서 쓰기에 좀 더 적절할지도 모릅니다. 다음은 다소 현실적인 페이지 레이아웃입니다."
84 | position_example.section.1: "section에 지정한 margin-left 스타일은 nav가 들어갈 공간을 만들어 줍니다. 그렇게 하지 않으면 절대 및 정적 엘리먼트가 겹칠 것입니다."
85 | position_example.section.2: "브라우저 크기를 조절했을 때 어떻게 되는지 확인해 보세요. 잘 작동할 겁니다!"
86 | position_example.2: "이 예제에서는 컨테이너의 높이가 내비게이션보다 높기 때문에 제대로 동작합니다. 그렇지 않다면 내비게이션 영역이 컨테이너 밖으로 흘러넘칠 것입니다. 이어지는 페이지에서는 각기 장단점이 있는 다른 레이아웃 기법을 살펴보겠습니다."
87 | position_example.footer: "고정 헤더나 푸터를 사용한다면 그것들이 들어갈 공간을 마련해 줘야 합니다! 여기서는 body에 margin-bottom을 집어넣었습니다."
88 |
89 | float.title: "float"
90 | float.1: "레이아웃을 잡는 데 사용하는 또 하나의 CSS 프로퍼티는 바로 float입니다. float은 다음과 같이 이미지 주위를 텍스트로 감싸기 위해 만들어진 것입니다."
91 |
92 | clear.title: "clear"
93 | clear.floating: "마치 떠 있는 것만 같아요!"
94 | clear.1: "clear 프로퍼티는 float의 동작 방식을 제어하는 데 중요합니다. 아래의 두 예제를 비교해 봅시다."
95 | clear.2: "이 경우 section 엘리먼트는 실제로 div 다음에 있습니다. 하지만 div가 왼쪽으로 떠 있기 때문에 이런 결과가 나타난 것입니다. 즉, section 안의 텍스트가 div 주위에 떠 있고 section이 전체를 감싸고 있습니다. section을 실제로 떠 있는 엘리먼트 다음에 나타나게 하려면 어떻게 해야 할까요?"
96 | clear.3: "clear를 이용해 이제 이 섹션을 떠 있는 div 아래로 옮겼습니다. 여기서는 left 값을 지정해 왼쪽에 떠 있는 엘리먼트들을 비웠습니다. 게다가 오른쪽(right)과 양쪽(both)도 비울 수 있습니다."
97 | clearfix.title: "clearfix 핵"
98 | clearfix.1: "다음은 float를 사용할 때 때때로 일어날 수 있는 이상하고 바람직하지 않은 경우입니다."
99 | clearfix.2: "이런... 이 이미지는 그것을 담고 있는 엘리먼트보다 높이가 높고 떠 있어서 컨테이너 바깥으로 넘쳤습니다!"
100 | clearfix.3: "이 문제를 해결하는 방법이 하나 있긴 하지만 조금 지저분합니다. 이를 clearfix 핵이라고 합니다."
101 | clearfix.4: "다음과 같은 CSS 코드를 새로 추가해 봅시다."
102 | clearfix.5: "이제 어떻게 되는지 확인해 봅시다."
103 | clearfix.6: "훨씬 낫네요!"
104 | clearfix.7: "이 기법은 근래에 나온 브라우저에만 동작합니다. IE6를 지원하고 싶다면 다음과 같은 코드를 추가해야 합니다."
105 | clearfix.8: "이 기법을 쓸 때 좀 더 주의를 기울여야 할 특이한 브라우저들도 있습니다. clearfix의 세계는 굉장히 소름끼치지만 이 간단한 해법은 대부분의 브라우저에 효과가 있을 것입니다."
106 |
107 | float_layout.title: "float를 이용한 레이아웃 예제"
108 | float_layout.1: "float를 이용해 전체 레이아웃을 잡는 일도 굉장히 자주 접할 수 있습니다. 다음은 앞에서 position으로 잡은 레이아웃을 float로 잡은 레이아웃 예제입니다."
109 | float_layout.2: "이 예제는 앞에서 만든 예제처럼 동작합니다. 컨테이너에 clearfix를 지정한 것을 눈여겨보세요. 이 예제에는 필요하지 않지만 nav가 더는 뜨지 않는 콘텐츠라면 필요할 것입니다."
110 |
111 | percent.title: "퍼센트 너비"
112 | percent.1: "퍼센트는 특정 엘리먼트를 담고 있는 블록에 상대적인 측정 단위입니다. 퍼센트는 이미지에 쓰기에 아주 좋습니다. 다음은 항상 컨테이너 너비의 50%만 차지하는 이미지를 만드는 예제입니다. 페이지 크기를 줄이면 어떻게 되는지 확인해 보세요!"
113 | percent.2: "이미지의 크기를 제한하는 데 min-width와 max-width를 사용할 수도 있습니다."
114 | percent.layout.title: "퍼센트 너비 레이아웃"
115 | percent.layout.1: "레이아웃을 잡는 데 퍼센트를 쓸 수도 있지만 이렇게 하면 작업량이 많아질 수 있습니다. 이 예제에서는 창의 너비가 너무 좁을 경우 nav 콘텐츠가 지저분하게 표시되기 시작합니다. 결국 콘텐츠에 알맞는 방식을 선택할 필요가 있습니다."
116 | percent.layout.2: "이 레이아웃이 너무 좁을 경우 nav의 레이아웃이 깨집니다. 더 안 좋은 점은 이 문제를 해결하기 위해 min-width를 사용할 수도 없다는 점입니다. 오른쪽 칼럼이 그것을 받아들이지 않기 때문입니다."
117 |
118 | media_queries.title: "미디어 쿼리"
119 | media_queries.1: "\"반응형 디자인\"은 사이트가 표시되는 브라우저와 디바이스에 \"반응하는\" 사이트를 만드는 전략입니다."
120 | media_queries.2: "미디어 쿼리는 이렇게 하는 가장 강력한 도구입니다. 아래의 퍼센트 너비를 사용하는 레이아웃을 가지고 메뉴를 사이드바에 놓기에는 브라우저 창의 크기가 너무 작을 때 메뉴가 한 칼럼에 표시되도록 만들어 봅시다."
121 | media_queries.3: "이제 브라우저 크기를 조절하면 레이아웃이 굉장히 멋지게 바뀝니다!"
122 | media_queries.4: "짜잔! 이제 레이아웃이 모바일 브라우저에서도 멋지게 보입니다. 이런 식으로 미디어 쿼리를 사용하는 인기 사이트들을 확인하려면 이곳을 클릭하세요. min-width와 max-width 말고도 알아낼 수 있는 것이 굉장히 많습니다. 이와 관련된 자세한 사항을 알고 싶다면 MDN 문서를 참고하세요."
123 | media_queries.5: "메타 뷰포트(meta viewport)를 이용하면 레이아웃을 모바일에서도 훨씬 더 나은 모습으로 보이게 할 수 있습니다."
124 |
125 | inline_block.title: "inline-block"
126 | inline_block.1: "브라우저 너비를 채우고 알맞게 줄바꿈되는 박스 그리드를 만들 수 있는데, 그동안 이러한 박스 그리드를 만드는 방법은 float를 이용하는 것이었습니다. 하지만 이제 inline-block을 이용하면 만들기가 훨씬 더 쉽습니다. inline-block 엘리먼트는 inline 엘리먼트와 비슷하지만 너비와 높이를 지정할 수 있습니다. 두 접근법의 예제를 모두 살펴봅시다."
127 | inline_block.hard_way.title: "힘든 방법(float를 이용)"
128 | inline_block.hard_way.box: "저는 지금 떠 있어요!"
129 | inline_block.hard_way.after: "저한테는 clear가 지정돼 있어서 위에 나열된 박스 옆으로 배치되지 않아요."
130 | inline_block.easy_way.title: "쉬운 방법(inline-block을 이용)"
131 | inline_block.easy_way.info: "display 프로퍼티에 inline-block 값을 이용하면 똑같은 효과를 낼 수 있습니다."
132 | inline_block.easy_way.box: "저는 인라인 블록입니다!"
133 | inline_block.easy_way.after: "이 경우에는 clear를 쓰지 않아도 됩니다. 멋지네요!"
134 | inline_block.2: "IE6와 IE7에서 inline-block을 지원하려면 별도의 작업을 더 해야 합니다. 때때로 inline-block이 hasLayout이라고 하는 것을 발생시킨다고 이야기하는 분들도 있지만 기존 브라우저를 지원하려면 그것에 대해서만 알면 됩니다. 더 자세한 사항이 궁금하다면 IE6와 IE7 지원에 관해 앞에서 알려준 링크를 참고하세요. 그럼 계속 진행해 봅시다."
135 |
136 | inline_block_layout.title: "inline-block 레이아웃"
137 | inline_block_layout.1: "레이아웃을 잡기 위해 inline-block을 사용할 수도 있습니다. 이때 몇 가지 염두에 둘 점이 있습니다."
138 | inline_block_layout.caveat.1: "inline-block 엘리먼트는 vertical-align 프로퍼티의 영향을 받습니다(아마 이 프로퍼티는 top으로 설정하고 싶을 겁니다)."
139 | inline_block_layout.caveat.2: "각 칼럼의 너비를 설정할 필요가 있습니다."
140 | inline_block_layout.caveat.3: "HTML의 각 칼럼 사이에 공백이 있으면 칼럼 간에 틈이 생깁니다."
141 | inline_block_layout.tada: "짜잔!"
142 |
143 | column.title: "칼럼"
144 | column.1: "다중 칼럼 텍스트를 손쉽게 만들 수 있는 CSS 프로퍼티가 새로 생겼습니다. 한번 살펴보시죠."
145 | column.2: "CSS 칼럼은 아주 최근에 생겼기 때문에 접두사를 사용할 필요가 있으며, IE9까지 또는 오페라 미니에서는 동작하지 않습니다. 칼럼과 관련된 프로퍼티가 좀 더 있으므로 더 자세한 사항에 대해서는 이곳을 클릭하세요. 그렇지 않으면 다음 주제로 넘어갑시다."
146 |
147 | flexbox.title: "flexbox"
148 | flexbox.1: "새로운 flexbox 레이아웃 모드는 우리가 CSS로 레이아웃을 잡는 방법을 재정의할 기세입니다. 아쉽게도 flexbox 규격이 최근에 상당히 많이 바뀌었기 때문에 각 브라우저마다 다른 식으로 구현돼 있습니다. 그럼에도 어떤 것인지 알아두는 차원에서 몇 가지 예제를 공유하고자 합니다. 여기서 선보이는 예제는 현재 최신 버전의 표준을 사용하는 일부 브라우저에서만 동작합니다."
149 | flexbox.2: "flexbox와 관련된 오래된 자료가 굉장히 많습니다. flexbox에 관해 좀 더 배우고 싶다면 참고 자료가 최신 내용을 반영하고 있는지 확인하는 방법을 배울 수 있도록 이곳에서 시작하세요. 저도 최신 구문을 이용하는 상세한 글을 쓴 적이 있습니다."
150 | flexbox.3: "flexbox를 이용해서 할 수 있는 일은 아주 많습니다. 영감을 주는 차원에서 몇 가지 예제를 알려주자면 다음과 같습니다."
151 | flexbox.simple.title: "flexbox를 이용한 간단한 레이아웃"
152 | flexbox.simple.1: "flexbox는 엄청 쉬워요!"
153 | flexbox.fancy.title: "flexbox를 이용한 멋진 레이아웃"
154 | flexbox.fancy.1: "전 여유 공간이 있으면 200px까지 늘어나고, 여유 공간이 없으면 100px까지 줄어들지만 그 이하로 더 작아지지는 않아요."
155 | flexbox.fancy.2: "전 항상 200px이에요."
156 | flexbox.fancy.3: "전 나머지 너비의 1/3을 채워요."
157 | flexbox.fancy.4: "전 나머지 너비의 2/3를 채워요."
158 | flexbox.centering.title: "flexbox를 이용한 중앙 정렬"
159 | flexbox.centering.1: "마침내 CSS에서도 뭔가를 수직 중앙에 두는 것이 쉬워졌군요!"
160 |
161 | frameworks.title: "CSS 프레임워크"
162 | frameworks.1: "CSS 레이아웃은 굉장히 까다로워서 이를 손쉽게 만들어주는 CSS 프레임워크가 있습니다. 다음은 이러한 CSS 프레임워크를 나열한 것입니다. 프레임워크를 사용하는 것은 프레임워크가 실제로 여러분의 사이트가 해주었으면 하는 일을 해줄 때에만 유의미합니다. 프레임워크는 CSS의 작동 방식에 관한 지식을 결코 대신할 수 없습니다."
163 | frameworks.2: "이제 끝났습니다! 이 사이트에 관해 피드백할 사항이 있다면 트위터를 통해 저한테 알려주세요!"
164 |
165 | about.title: "사이트 소개"
166 | about.credits: "내용 구성 및 사이트 제작: 그렉 스미스(Greg Smith). 디자인: 이삭 두라조(Isaac Durazo). 저희는 보쿱(Bocoup)에 근무하고 있습니다."
167 |
168 |
--------------------------------------------------------------------------------
/translations/ar.yaml:
--------------------------------------------------------------------------------
1 | # العربية
2 |
3 | rtl: true
4 |
5 | global.title: "تعلم التصميم باستخدام CSS"
6 | global.short_title: "CSS"
7 | global.home: "الرئيسية"
8 | global.toc: "الفهرس"
9 | global.next: "التالي"
10 | global.previous: "السابق"
11 | global.feedback: "مشاكل / تغذية راجعة"
12 |
13 | util.extra_credit: "ملاحظة إضافية"
14 | util.ipsum: "لوريم إيبسوم هو ببساطة نص شكلي (بمعنى أن الغاية هي الشكل وليس المحتوى) ويُستخدم في صناعات المطابع ودور النشر. كان لوريم إيبسوم ولايزال المعيار للنص الشكلي منذ القرن الخامس عشر عندما قامت مطبعة مجهولة برص مجموعة من الأحرف بشكل عشوائي أخذتها من نص، لتكوّن كتيّب بمثابة دليل أو مرجع شكلي لهذه الأحرف. خمسة قرون من الزمن لم تقضي على هذا النص، بل انه حتى صار مستخدماً وبشكله الأصلي في الطباعة والتنضيد الإلكتروني. انتشر بشكل كبير في ستينيّات هذا القرن مع إصدار رقائق \"ليتراسيت\" البلاستيكية التي تحتوي على مقاطع من هذا النص، وعاد لينتشر مرة أخرى مؤخراَ مع ظهور برامج النشر الإلكتروني مثل \"ألدوس بايج مايكر\" والتي حوت أيضاً على نسخ من نص لوريم إيبسوم."
15 | util.nav.1: "الرئيسية"
16 | util.nav.2: "قائمة الوجبات"
17 | util.nav.3: "الأرشيف"
18 | util.nav.4: "التوقيت"
19 | util.nav.5: "الاتجاهات"
20 | util.nav.6: "اتصل بنا"
21 |
22 | index.1: "هذا الموقع يقوم بتعليمك أساسيات لغة CSS، أو ما تعرف بلغة التنسيق، والتي تستخدم في تصميم الكثير من المواقع الإلكترونية"
23 | index.2: "يُفترض أنك ملم ببعض الأشياء العامة في css، مثل المحددات، والخصائص. أيضًا، يُفضل أن تكون مهتمًا بأمور تصميم المواقع. إذا كنت تود تعلم ال HTML، و CSS من البداية؛ يمكنك زيارة : الموقع الإلكتروني التالي. أما لو كانت لديك خبرة فيهما؛ فيُمكنك البدء في هذه الدروس!."
24 | index.translator: "ترجمة: Ahmed Sammour"
25 | index.get_started: "البداية"
26 |
27 | no_layout.title: "لا تصميم!"
28 | no_layout.1: "عدم وجود تصميم في الصفحة يشبه إلى حد كبير، وضع جميع المحتويات في عمود واحد. ومع ذلك؛ فإن جعل نافذة المتصفح عريضة جدًا، هو أمر متعب جدًا للقراءة؛ لأن المستخدم يضطر بعد الانتهاء من قراءة السطر، إلى الانتقال من أقصى يسار الصفحة، إلى أقصي يمين الصفحة. جرب تكبير، وتصغير المتصفح؛ لمعرفة المقصود!."
29 | no_layout.2: "قبل إصلاح هذه المشكلة؛ ينبغي أن تتأكد من معرفتك التعامل مع الخاصية المهمة display. الخواص في CSS هي الوحدة الأساسية، وهي التي تُمكنك من تنسيق، وتصميم العناصر في صفحات الويب."
30 |
31 | display.title: "خاصية \"display\""
32 | display.intro: "خاصية display، هي أكثر خاصية مهمة في CSS، وخاصة في أمور التحكم في تصميم المواقع. كل عنصر في الموقع، يحتوي على خاصية display افتراضية، وتعتمد قيمة الخاصية على العنصر نفسه. القيمة الافتراضية لمعظم العناصر هي block، أو inline."
33 | display.block.title: "block"
34 | display.block: "div هو العنصر الأساسي في تصميم المواقع، وقيمة الخاصية display الخاصة به تساوي: block. ومن أهم مميزات العناصر التي تمتلك هذه الخاصية أنها تبدأ في سطر جديد، وتمتد من أقصى يمين نافذة المتصفح، إلى أقصى اليسار. ومن الأمثلة الأخرى على هذه العناصر في لغة HTML5: p، وform، وsection، وfooter، وheader."
35 | display.inline.title: "inline"
36 | display.inline.1: "عنصر span هو العنصر الأساسي الذي تكون قيمة display الخاصة به تساوي inline. أي عنصر يحمل القيمة الأخيرة يُسمى inline element. ومن خصائص هذه العناصر أنها تمكن من تضمين النصوص داخل الفقرات."
37 | display.inline.2: "مثل هذا"
38 | display.inline.3: "من دون قطع سياق الفقرة. عنصر a هو أكثر العناصر التي تُستخدم لهذا الغرض، والتي نستخدمها بكثرة في الوصلات. "
39 | display.none.title: "none"
40 | display.none.1: "أحد القيم المهمة الأخرى هي none. بعض العناصر تستخدم هذه القيمة، وأشهر الأمثلة على ذلك عنصر script؛ والذي يستخدم لتضمين كود جافا سكريبت داخل الصفحات. يمكن استخدام هذه القيمة في جافا سكريبت لإخفاء، أو إظهار عناصر معينة."
41 | display.none.2: "يختلف ذلك عن خاصية visibility؛ حيث أننا عندما نُعيّن قيمة none لخاصية display؛ فإننا نقوم بتحميل محتوى الصفحة كما لو أن العنصر غير موجود. أما visibility: hidden;؛ فتقوم بإخفاء العنصر فقط، ويظل أثر العنصر موجودًا في الصفحة."
42 | display.other.title: "قيم أخرى"
43 | display.other: "هناك قيم أخرى لخاصية display. مثل قيمة list-item، و قيمة table، وقيمة table. هذه قائمة بكل قيم خاصية display. سنقوم بشرح القيمتين: inline-block، وflex لاحقًا."
44 | display.extra: "كما ذكرنا أعلاه؛ كل عنصر له قيمة display افتراضية. وعلى كل حال، يمكن دائمًا تغيير القيمة القديمة، بقيمة أخرى."
45 |
46 | margin_auto.title: "توسيط العناصر"
47 | margin_auto.1: "يُمكنك ضبط العرض الخاص بأي عنصر وذلك باستخدام خاصية width؛ وسيمنع العنصر من أن يمتد من أقصى اليمين، إلى أقصى اليسار. أيضًا، يمكن ضبط الهوامش؛ لجعل العنصر متوسط الصفحة، باستخدام خاصية margin، وذلك بجعل القيمة تساوي auto. "
48 | margin_auto.2: "المشكلة الوحيدة التي ستحدث، هي إذا حاولت عرض الصفحة على متصفح ما، وكان عرض المتصفح أضيق من عرض العنصر ذاته. سيقوم المتصفح بحل ذلك من خلال إضافة شريط scrollbar أفقي. لنقم بتطوير الأمر قليلًا."
49 |
50 | max_width.title: "max-width"
51 | max_width.1: "استخدام خاصية max-width بدلًا من خاصية width في هذا الموقف؛ سيجعل المتصفح يتحكم بفعالية أكثر مع الشاشات الصغيرة. يعتبر هذا الموضوع مهمًا، إذا كنت تود جعل الموقع مستخدمًا بسهولة على الجوال. قم بتكبير، وتصغير المتصفح لرؤية الفرق. "
52 | max_width.2: "بالمناسبة، خاصية max-widthمدعومة في جميع المتصفحات، ومن ضمنها إنترنت إكسبلورر 7+؛ لذا لا داعي للقلق من هذا الأمر."
53 |
54 | box_model.title: "box model"
55 | box_model.intro: "بينما تحدثنا عن خاصية width، كان يتوجب التنويه إلى أهم مشكلة لهذه الخاصية، وهي عندما تقوم بضبط العرض الخاص بعنصر ما، سيظهر العنصر أكبر من الحجم الذي قمت بضبطه. وتفسير الأمر، هو أن وجود حواشي العنصر (padding)، وحدود العنصر (border) ستقوم بتمديد عرض العنصر إلى ما بعد الحد الذي قمت بضبطه. انظر إلى المثال التالي؛ حيث يوجد عنصران، وبنفس قيمة العرض، ولكن مع اختلاف حقيقي بين عرض العنصرين."
56 | box_model.simple: "أنا العنصر الصغير!"
57 | box_model.fancy: "وأنا الكبير!"
58 | box_model.outro: "حل هذه المشكلة هو حل رياضي. حيث يقوم مطورو صفحات الويب باستخدام CSS، بتحديد قيمة أصغر من التي يريدونها فعليًا، والتي تساوي القيمة الأولية، مطروحًا منها قيمة الحواشي، والحدود. من حسن الحظ، لن نحتاج لهذا بعد الآن!."
59 |
60 | box_sizing.title: "خاصية box-sizing"
61 | box_sizing.1: "يمكن اعتبار العناصر الموجودة ضمن كود html عبارة عن صناديق. ونستخدم مصطلح box-model للتعبير عن تصميم كل عنصر في الصفحة. لهذا السبب وُجدت خاصية box-sizing. يتكون box-model من أربع أشياء: هامش خارجي، وإطار، وهامش داخلي، ومحتوى العنصر نفسه. المثال التالي يوضح كيفية استخدام خاصية box-sizing: border-box;"
62 | box_sizing.simple: "نحن بنفس الحجم الآن."
63 | box_sizing.fancy: "رائع!"
64 | box_sizing.2: "الأمر الآن أفضل، أليس كذلك؟. غالبًا ما يريد مطورو الويب جعل جميع العناصر تبدو بهذه الطريقة. ولتحقيق ذلك، يقوم المطورون بكتابة الكود التالي:"
65 | box_sizing.3: "هذا الكود يضمن أن جميع العناصر الموجودة في الصفحة، مُحجّمة بشكل ذكي."
66 | box_sizing.4: "ولأن box-sizing هي خاصية جديدة نسبيًا؛ فينبغي عليك استخدام -webkit- و -moz- كما هو واضح في هذه الأمثلة. هذه الميزة، توفر خواص لا تزال تحت التجربة، أيضًا، ينبغي أن تأخذ بالحسبان أن هذه الخاصية تعمل على إنترنت إكسبلورر +8."
67 |
68 | position.title: "التموضع"
69 | position.intro: " لغرض إنشاء تصميم صفحات معقدة؛, ينبغي أن نناقش خاصية position. هذه الخاصية لها العديد من القيم، وهذه القيم من الصعب تذكرها. لنقم بالمرور عليها واحدة، تلو الأخرى. ويفضل أن تضع هذه الصفحة بالتحديد في مفضلتك؛ لتتمكن من الرجوع إليها بسهولة مستقبلًا."
70 | position.static.title: "static"
71 | position.static.1: "static هي القيمة الافتراضية. العنصر الثابت يمكن اعتباره بدون موضع
72 | والعنصر الذي يملك أي قيمة أخرى يمكن اعتباره عنصرًا محددًا بموضع."
73 | position.relative.title: "relative"
74 | position.relative.1: "relative تملك نفس صفات static تقريبًا. إلا إذا قمتَ بإضافة بعض الخصائص الأخرى."
75 | position.relative.2: "يمكن إضافة بعض الصفات الأخرى لهذه القيمة، مثل top، right، bottom، و left. هذه الصفات ستجعل العنصر مُعدّلًا عن الوضع الأصلي. أي محتوى آخر لا يمكن تعديله ليملئ أي فراغ يتركه العنصر الأخير."
76 | position.fixed.title: "fixed"
77 | position.fixed.1: "نعني بذلك أن العنصر سيكون ثابتًا؛ بمعنى أنه سيتم تحديده بالنسبة لعرض الشاشة، وهذا سيجعل العنصر ثابتًا في نفس المكان مهما قمت بتحريك الفارة. يمكن تحقيق ذلك باستخدام الخصائص التالية: relative، وtop، وright، وbottom، وleft."
78 | position.fixed.2: " متأكد من أنك قد لاحظت أن العنصر الثابت في الزاوية اليمنى السفلى اليسرى من الصفحة. حسنًا، لم لا تلق نظرة عليه الآن؟. كود الcss التالي هو الذي جعل العنصر السابق في هذا المكان."
79 | position.fixed.3: "العنصر الثابت لا يترك فراغًا في المكان الذي يتواجد به في الصفحة."
80 | position.fixed.4: "متصفحات الأجهزة المحمولة لديها دعم ضعيف لموضوع العناصر الثابتة. ألق نظرة على المشكلة هنا."
81 | position.fixed.example: "مرحبًا!. أنا عنصر ثابت لا أتحرك."
82 | position.absolute.title: "absolute"
83 | position.absolute.1: "قيمة absolute هي أكثر قيمة صعبة الاستخدام. تُستخدم هذه القيمة تقريبًا مثل القيمة fixed باستثناء أمر واحد وهو .أنه يتم تحديد القيمة بالنسبة إلى أقرب عنصر، وذلك بدلًا من تحديدها بالنسبة لعرض الشاشة. استخدام هذه الخاصية مع أي عنصر دون وجود عنصر قريب؛ فإن الموقع سيعتبر أقرب عنصر هو جسم الصفحة (body)."
84 | position.absolute.2: "هذا مثال بسيط"
85 | position.absolute.relative: "هذا العنصر تم تحديده بواسطة أقرب عنصر له. لو كان هذا العنصر يملك خاصية position: static; فإنه سيتم تحديد موضعه حتما بالنسبة إلى جسم الصفحة."
86 | position.absolute.absolute: "هذا العنصر يملك خاصية absolute. هذا يعني أنه تم تحديد موقعه نسبة إلى أقرب عنصر له."
87 | position.absolute.3: "هذه الأمور صعبة بعض الشيء، ولكنها ضرورية جدًا لتصميم صفحات الويب. في الصفحات القادمة سنستخدم خاصية position في أمثلة واقعية أكثر."
88 |
89 | position_example.title: "مثال على خاصية position"
90 | position_example.1: "هذا المثال واقعي جدًا. ويبدو قريبًا لتصميم صفحة ويب واقعية."
91 | position_example.section.1: "استخدام خاصية margin-left لكل قسم section يضمن أن هناك هامشًا مناسبًا لكل عنصر. عدا ذلك؛ سنجد العناصر متداخلة مع بعضها البعض."
92 | position_example.section.2: "لاحظ الفرق عندما تقوم بتضغير أو تكبير متصفحك. إنه يعمل بشكل رائع الآن!"
93 | position_example.2: "هذا المثال يعمل بشكل جيد لسبب منطقي، وهو أن المحتوى (container) أطول من الشريط العمودي في يسار الشاشة (nav). لو لم يكن كذلك؛ فهذا يعني أن الشريط سيتجاوز حدوده ليدخل في مساحة المحتوى. في الصفحات القادمة سنتعلم بعض تقنيات التصميم، والتي لكل منها إيجابيات، وسلبيات."
94 | position_example.footer: "إذا كنت تستخدم رأس، أو ذيل صفحة ثابت، تأكد أن هناك مساحة كافية له!. تم وضع خاصية margin-bottom في جسم الصفحة body."
95 |
96 | float.title: "float"
97 | float.1: "هذه خاصية أخرى شائعة الاستخدام، وتستخدم بشكل واسع في تصميم صفحات الويب. خاصية Float تهدف أساسًا لجعل النص ملتفًا حول الصور هكذا:"
98 |
99 | clear.title: "clear"
100 | clear.floating: "أشعر أنني أطير فوق العناصر الأخرى!."
101 | clear.1: "خاصية clear مهمة جدًا للتحكم في طبيعة خاصية float. لاحظ الفرق بين المثالين التاليين"
102 | clear.2: "في هذه الحالة، عنصر section هو في الحقيقة بعد العنصر div. ومع ذلك، فإن العنصر div موجود في يسار الشاشة. إليك تفسير ما حصل: النص الموجود في عنصر section ملتف حول العنصر div، وأما العنصر section فإنه ملتف على كامل الصفحة. ماذا لو أردنا أن يظهر العنصر section بعد العنصر الآخر؟"
103 | clear.3: "باستخدام هذه الخاصية clear قمنا بتحريك القسم أسفل العنصر div. استخدم القيمة left لجعل العناصر في اليسار. كما يمكنك استخدام القيم: right، وboth."
104 |
105 | clearfix.title: "خدعة clearfix"
106 | clearfix.1: "هذا أمر سيء يمكن أن يحصل عند استخدام خاصية float:"
107 | clearfix.2: "أوه لا ... هذه الصورة أطول من العنصر الذي يحتوي عليها. ومع أنها تحتوي على خاصية float؛ إلا أنها تجاوزت حدود العنصر الذي يحتوي عليها!."
108 | clearfix.3: "حسنًا. هناك طريقة بالطبع لحل ذلك. لكنه حل بشع!. يُسمى هذا الحل ب clearfix خدعة."
109 | clearfix.4: "لنجرب إضافة هذا الكود:"
110 | clearfix.5: "لنر الآن ماذا سيحدث:"
111 | clearfix.6: "أفضل بكثير!"
112 | clearfix.7: "هذا الحل يعمل فقط في المتصفحات الحديثة. إذا كنت تريد أن تدعم المتصفحات القديمة مثل إنترنت إكسبلورر 6 لهذا الحل؛ قم بالآتي:"
113 | clearfix.8: "هناك متصفحات قليلة لا تدعم الطريقة بشكل جيد، وتتطلب منك الانتباه. عالم هذه الخدعة مخيف حقًا، لكن هذا الحل البسيط فعّال مع غالبية المتصفحات الشهيرة."
114 |
115 | float_layout.title: "مثال تصميم باستخدام float"
116 | float_layout.1: "من الشائع جدًا تصميم مواقع ويب كاملة باستخدام خاصية float. هذا نفس التصميم الذي قمنا به باستخدام خاصية position، ولكن باستخدام خاصية float بدلًا منها."
117 | float_layout.2: "هذا المثال يعمل تمامًا كالمثال السابق. لاحظ أننا قمنا بكتابة clearfix في المحتوى (container). قد لا نحتاج لذلك في هذا المثال، لكنه سيكون مجديًا في حال كان الشريط nav أطول من المحتوى الآخر."
118 |
119 | percent.title: "العرض المئوي"
120 | percent.1: "النسبة المئوية هي وحدة قياس تستخدم في تحديد أبعاد العنصر. يكون استخدام النسب المئوية رائعًا عند إدراج الصور. هنا مثال على صورة تأخذ 50% من حجم العنصر الذي يحتوي عليها. ما يعني أنه مهما تغير حجم العنصر، فإن الصورة ستأخذ نصف العرض."
121 | percent.2: "بإمكانك أيضًا استخدام min-width و max-width لتحديد أقل عرض، أو أكبر عرض يمكن للصورة أن تأخذه!."
122 | percent.layout.title: "تصميم الصفحات باستخدام العرض المئوي"
123 | percent.layout.1: "يمكنك استخدام النسب المئوية في تصميم صفحات الويب، لكن ذلك سيتطلب منك وقتًا أكثر. في المثال التالي، يكون محتوى العنصر nav ملتفًا بطريقة جيدة عندما تكون نافذة المتصفح ضيقة."
124 | percent.layout.2: "عندما يكون التصميم ضيقًا جدًا، يصبح العنصر nav غير ظاهر تقريبًا. والأمر الأسوأ، هو أنك لا تستطيع استخدام خاصية min-width في العنصر nav؛ لأن العمود الأيمن لن يقبل هذه الخاصية."
125 |
126 | media_queries.title: "استخدام استعلامات media"
127 | media_queries.1: "\"التصميم المرن، أو المطاط\" هو استراتيجية لجعل الموقع \"يستجيب\" للمتصفح، والجهاز الذي يتم عرض الموقع منه. وذلك من خلال جعل الموقع يظهر بشكل رائع، مهما كان المتصفح، أو الجهاز الذي تقوم بالاستعراض منه."
128 | media_queries.2: "استعلامات media هي أقوى أداة لتحقيق هذا الأمر. لنأخذ المثال الذي قمنا بتصميم صفحة باستخدام العرض المئوي، ولنضعها في عمود واحد، ثم نشاهد كيف ستبدو عندما يكون المتصفح صغيرًا جدًا."
129 | media_queries.3: "الآن عندما تقوم بتكبير أو تصغير المتصفح، سيصبح شكل الصفحة رائعًا أكثر!."
130 | media_queries.4: "أوه! الأن تبدو الصفحة رائعة عند التصفح من الجوال. هنا ستجد بعض المواقع الشهيرة التي تستخدم استعلامات media بهذه الطريقة. هناك الكثير الكثير يمكنك اكتشافه. الق نظرة على شرح شبكة موزيلا للمطورين لمعرفة المزيد."
131 | media_queries.5: "يمكنك جعل موقعك يبدو أكثر جمالًا عند استخدام أجهزة الجوال، والأجهزة اللوحية وذلك باستخدام وسم meta viewport."
132 |
133 | inline_block.title: "inline-block"
134 | inline_block.1: "يمكنك إنشاء شبكة من المربعات التي تملأ عرض المتصفح وتلتف حول بعضها بشكل جيد. كان ذلك ممكن في السابق باستخدام خاصية float، لكن الآن سنستخدم خاصية inline-block، وستكتسف أنها أسهل بكثير. العناصر التي تملك خاصية inline-block هي بالضبط كالعناصر التي تحمل خاصية inline، مع فرق أن العناصر الأولى يمكن أن تأخذ طولًا، وعرضًا محددين. لنلق نظرة على مثالين يشرحان كل طريقة على حدة."
135 | inline_block.hard_way.title: "الطريقة الصعبة (استخدام float)"
136 | inline_block.hard_way.box: "أنا أطير الآن!"
137 | inline_block.hard_way.after: "أنا أستخدم خاصية clear."
138 | inline_block.easy_way.title: "الطريقة السهلة (استخدامinline-block)"
139 | inline_block.easy_way.info: "بإمكانك تحقيق نفس الهدف باستخدام القيمة inline-block مع الخاصية display."
140 | inline_block.easy_way.box: "أنا عنصر مُضمن!"
141 | inline_block.easy_way.after: "لا أحتاج لاستخدام clear في هذه الحالة. جميل!"
142 | inline_block.2: "ينبغي عليك الاطلاع على بعض الأمور الإضافية في أمور دعم إنترنت إكسبلورر 6، و7 لخاصية inline-block. انظر الروابط السابقة لمعرفة كيفية دعم المتصفحات القديمة مثل IE6 و IE7. عدا ذلك؛ دعنا نكمل!."
143 |
144 | inline_block_layout.title: "التصميم باستخدام inline-block"
145 | inline_block_layout.1: "بإمكانك أيضًا استخدام خاصية inline-block لتصميم الصفحات. هناك بضعة أمور ينبغي أن تأخذها بعين الاعتبار:"
146 | inline_block_layout.caveat.1: "العناصر التي لها خاصية inline-block تتأثر بالخاصية vertical-align، وينبغي عليك تحديدها غالبًا ب top."
147 | inline_block_layout.caveat.2: "يجب عليك تحديد عرض كل عمود في ال"
148 | inline_block_layout.caveat.3: "سيكون هناك فراغ بين الأعمدة، إذا كانت توجد مسافات فاصلة في كود الhtml"
149 | inline_block_layout.tada: "رائع!"
150 | column.title: "العمود"
151 | column.1: "هناك العديد من الخصائص التي يمكنك استخدامها، والتي تجعل النص مُنسقًا في شكل أعمدة. ألق نظرة:"
152 | column.2: "استخدام الأعمدة في css حديث نسبيًا، فربما لا يعمل مع إنترنت إكسبلورر9، وأوبرا ميني. هناك بعض الخصائص المتعلقة باستخدام الأعمدة، انظر هنا لمعرفة المزيد. عدا ذلك؛ دعنا نكمل."
153 |
154 | flexbox.title: "تصميم flexbox"
155 | flexbox.1: "يمكننا تصميم صفحات الويب باستخدام وحدة تُسمى flexbox ،وهي وحدة عصرية ساهمت في إعادة صياغة تصميم صفحات الويب. مع الأسف، تغيرت بعض الأمور مع كثرة المتصفحات، والخصائص التي توفرها. ولكن مع ذلك، سنقوم بمشاركة بعض الأمثلة لتوضيح المفهوم. هذه الأمثلة تعمل حاليًا فقط على بعض المتصفحات التي تستخدم آخر إصدار من flexbox."
156 | flexbox.2: "هناك الكثير من إصدارات flexbox غير المدعومة. إذا كنت تود تعلم المزيد حول هذه الوحدة,،ابدأ من هنا لمعرفة إذا ما كان الأمر مدعومًا أم لا. قمنا بكتابة مقالة مفصلة لشرح كيفية التعامل مع هذه الوحدة."
157 | flexbox.3: "هناك امور كثيرة يمكنك فعلها مع وحدة flexbox. هذه بعض الأمثلة لتوضيح الفكرة:"
158 | flexbox.simple.title: "تصميم بسيط باستخدام flexbox"
159 | flexbox.simple.1: "استخدام flexbox سهل جدًا"
160 | flexbox.fancy.title: "تصميم رائع باستخدام flexbox"
161 | flexbox.fancy.1: "سيكون حجم هذا العنصر 200 بيكس إذا كان هناك فراغ مناسب، وسيتقلص إلى 100 بيكسل في حال عدم وجود فراغ. ولن يكون أصغر من 100 بيكسل."
162 | flexbox.fancy.2: "سيكون هذا العنصر دائمًا بحجم 200 بيكسل، مهما حدث."
163 | flexbox.fancy.3: "سيملأ هذا العنصر ثلث المساحة المتبقية"
164 | flexbox.fancy.4: "سيملأ هذا العنصر ثُلثي المساحة المتبقية"
165 | flexbox.centering.title: "التوسيط باستخدام flexbox"
166 | flexbox.centering.1: "أخيرًا، من السهل جدًا توسيط عنصر ما باستخدام css."
167 |
168 | frameworks.title: "أُطر عمل css"
169 | frameworks.1: "لأن تصميم الصفحات باستخدام css مُجهد نوعًا ما؛ يوجد هناك أُطر عمل تجعل من أمر التصميم سهلًا. نعني بأُطر العمل أي الأكواد التي قام مطورون بكتابتها سابقًا، وبدلًا من إعادة كتابة الأكواد من جديد؛ فإننا نستخدم أُطر العمل في توفير الوقت والجهد. هنا ستجد بعضًا من أُطر العمل الشهيرة. يُرجى اختيار إطار العمل المناسب، والذي يمكنه تسهيل مهمتك في تصميم الصفحات، والذي يؤدي الغرض الخاص. بالطبع لا غنى عن معرفتك بأساسيات css حتى تتمكن من استخام هذه الأُطر."
170 | frameworks.2: "هذا كان كل شيء! إذا كانت لديك أي استفسارات، أو مشاكل بخصوص هذا الموقع، تفضل بإعلامنا بذلك.!"
171 |
172 | about.title: "عن هذا الموقع"
173 | about.credits: "تم كتابته، وبناءه بواسطة: غريغ سميث. تصميم: إسحاق دورازو. نحن نعمل في شركة Bocoup."
--------------------------------------------------------------------------------
/translations/hy.yaml:
--------------------------------------------------------------------------------
1 | # English
2 |
3 | global.title: "CSS Լեյաութներ"
4 | global.short_title: "CSS"
5 | global.home: "Սկիզբ"
6 | global.toc: "Բովանդակություն"
7 | global.next: "Առաջ"
8 | global.previous: "Ետ"
9 | global.feedback: "Issues / Feedback"
10 |
11 | util.extra_credit: "extra credit"
12 | util.ipsum: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit."
13 | util.nav.1: "Home"
14 | util.nav.2: "Taco Menu"
15 | util.nav.3: "Draft List"
16 | util.nav.4: "Hours"
17 | util.nav.5: "Directions"
18 | util.nav.6: "Contact"
19 |
20 | index.1: "Այս դասընթացում դիտարկվում են CSS տեխնոլոգիայի այն բաժինները, որոնք օգտագործվում են կայքերի կառուցվածքներում (Լեյաութներում, layout)։"
21 | index.2: ""
22 | index.translator: ""
23 | index.get_started: "Սկսի՛ր"
24 |
25 | no_layout.title: "no layout"
26 | no_layout.1: "Եթե քո ուզածը միայն մեկ երկար սյունակ զբաղեցնող բովանդակութուն է, ապա ոչինչ, եթե կայքում չլինի լեյաութ(layout): Սակայն եթե օգտատերը իր զննարկիչը բավականին լայն դարձնի, ապա ընթերցանությունը կդժվարանա․ ամեն տողը կարդալուց հետո աչքերը աջից-ձախ երկար ճանապարհ պիտի անցնեն դեպի նոր տողի սկզիբը։ Ասածիս իմաստը հասկանալու համար փորձիր փոխել զննարկիչիդ չափերը։"
27 | no_layout.2: "Այս խնդիրը լուծելուց առաջ, արի համոզվենք, որ կարևոր display հատկության իմաստը պարզ է։"
28 |
29 | display.title: "\"display\" հատկությունը"
30 | display.intro: "display-ը լեյաութները կառավարող կարևորագույն հատկությունն է։ Ամեն էլեմենտ ունի display հատկության լռելայն արժեք, կախված իր իսկ տեսակից։ Էլեմենտների մեծամասնության համար display հատկության լռելայն արժեքներ են block կամ inline արժեքները։ block էլեմենտները հաճախակի կոչվում են block-level էլեմենտներ։ Իսկ inline էլեմենտները ուղակի կոչվում են inline էլեմենտներ։"
31 | display.block.title: "block"
32 | display.block: "div-ը ստանդարտ բլոկային էլեմենտ է։ Բլոկային էլեմենտները սկսվում են նոր տողից և ձգվում են որքան հնարավոր է դեպի ձախ և աջ։ Մյուս հաճախակի օգտագործվող բլոկային էլեմենտներն են p և form։ Բլոկային են նաև նոր HTML5-ական header, footer, section էլեմենտները։ Սրանցով իհարկե չի սահմանափակվում ցանկը։"
33 | display.inline.title: "inline"
34 | display.inline.1: "span-ը ստանդարտ inline էլեմենտ է: inline էլեմենտը կարող է փաթաթել որոշ տեքստ պարագրաֆի ներսում․"
35 | display.inline.2: "ինչպես այստեղ"
36 | display.inline.3: "առանց կազմալուծելու պարագրաֆի տեսքը ։ a էլեմենտը նույնպես ամենաօգտագործվող inline էլեմենտներից մեկն է։"
37 | display.none.title: "none"
38 | display.none.1: "display հատկության մյուս տարածված արժեքը none արժեքն է։ Որոշ հատուկ էլեմենտներ լռելյայն ունեն այս արժեքը, ինչպիսին է օրինակ script-ը։ display։none-ը հաճախ օգտագործվում է Javascript-ի օգնությամբ էլեմենտները թաքցնելու կամ ցուցադրելու համար, առանց դրանք իրականում ջնջելու կամ վերստեղծելու։"
39 | display.none.2: "Սա տարբերվում է visibility հատկությունից. display-ին none արժեքը տալիս էջը կցուցադրվի այնպես, կարծես այդ էլեմենտը բացակայում է, սակայն visibility: hidden;-ը կթաքցնի էլեմենտը պահպանելով էլեմենտի զբաղեցրած տարածությունը որպես դատարկ տարածություն։"
40 | display.other.title: "display-ի այլ արժեքներ"
41 | display.other: "Կան նաև display հատկության բազմաթիվ էկզոտիկ արժեքներ, ինչպիսիք են list-item և table արժեքները։ Այստեղ սպառիչ ցուցակն է։ Ավելի ուշ մենք կքննարկենք նաև inline-block և flex արժեքները։"
42 | display.extra: "Ինչպես նշվեց բոլոր էլեմենտները ունեն display հատկության իրենց լռելյալն արժեքները։ Սակայն միշտ հնարավոր է փոխել դրանք։ Ոչ մի խնդիր չկա inline div դիվ սարքելու մեջ, կարելի է փոխել display-ի արժեքը էլեմենտների ձևավորումը հարմարեցնելու համար։ Հորիզոնտալ մենյու սարքելու նպատակով li էլեմենտները inline դարձնելը տարածված եղանակ է։"
43 |
44 | margin_auto.title: "margin: auto;"
45 | margin_auto.1: "Setting the width of a block-level element will prevent it from stretching out to the edges of its container to the left and right. Then, you can set the left and right margins to auto to horizontally center that element within its container. The element will take up the width you specify, then the remaining space will be split evenly between the two margins."
46 | margin_auto.2: "The only problem occurs when the browser window is narrower than the width of your element. The browser resolves this by creating a horizontal scrollbar on the page. Let's improve the situation..."
47 |
48 | max_width.title: "max-width"
49 | max_width.1: "Using max-width instead of width in this situation will improve the browser's handling of small windows. This is important when making a site usable on mobile. Resize this page to check it out!"
50 | max_width.2: "By the way, max-width is supported by all major browsers including IE7+ so you shouldn't be afraid of using it."
51 |
52 | box_model.title: "the box model"
53 | box_model.intro: "While we're talking about width, we should talk about width's big caveat: the box model. When you set the width of an element, the element can actually appear bigger than what you set: the element's border and padding will stretch out the element beyond the specified width. Look at the following example, where two elements with the same width value end up different sizes in the result."
54 | box_model.simple: "I'm smaller..."
55 | box_model.fancy: "And I'm bigger!"
56 | box_model.outro: "For generations, the solution to this problem has been math. CSS authors have always just written a smaller width value than what they wanted, subtracting out the padding and border. Thankfully, you don't have to do that anymore..."
57 |
58 | box_sizing.title: "box-sizing"
59 | box_sizing.1: "Over the generations, people realized that math is not fun, so a new CSS property called box-sizing was created. When you set box-sizing: border-box; on an element, the padding and border of that element no longer increase its width. Here is the same example as the previous page, but with box-sizing: border-box; on both elements:"
60 | box_sizing.simple: "We're the same size now!"
61 | box_sizing.fancy: "Hooray!"
62 | box_sizing.2: "Since this is so much better, some authors want all elements on all their pages to always work this way. Such authors put the following CSS on their pages:"
63 | box_sizing.3: "This ensures that all elements are always sized in this more intuitive way."
64 | box_sizing.4: "Since box-sizing is pretty new, you should use the -webkit- and -moz- prefixes for now, as I have in these examples. This technique enables experimental features in specific browsers. Also, keep in mind that this one is IE8+."
65 |
66 | position.title: "position"
67 | position.intro: "In order to make more complex layouts, we need to discuss the position property. It has a bunch of possible values, and their names make no sense and are impossible to remember. Let's go through them one by one, but maybe you should bookmark this page too."
68 | position.static.title: "static"
69 | position.static.1: "static is the default value. An element with position: static; is not positioned in any special way. A static element is said to be not positioned and an element with its position set to anything else is said to be positioned."
70 | position.relative.title: "relative"
71 | position.relative.1: "relative behaves the same as static unless you add some extra properties."
72 | position.relative.2: "Setting the top, right, bottom, and left properties of a relatively-positioned element will cause it to be adjusted away from its normal position. Other content will not be adjusted to fit into any gap left by the element."
73 | position.fixed.title: "fixed"
74 | position.fixed.1: "A fixed element is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled. As with relative, the top, right, bottom, and left properties are used."
75 | position.fixed.2: "I'm sure you've noticed that fixed element in the lower-right hand corner of the page. I'm giving you permission to pay attention to it now. Here is the CSS that puts it there:"
76 | position.fixed.3: "A fixed element does not leave a gap in the page where it would normally have been located."
77 | position.fixed.4: "Mobile browsers have surprisingly shaky support for fixed. Learn more about the situation here."
78 | position.fixed.example: "Hello! Don't pay attention to me yet."
79 | position.absolute.title: "absolute"
80 | position.absolute.1: "absolute is the trickiest position value. absolute behaves like fixed except relative to the nearest positioned ancestor instead of relative to the viewport. If an absolutely-positioned element has no positioned ancestors, it uses the document body, and still moves along with page scrolling. Remember, a \"positioned\" element is one whose position is anything except static."
81 | position.absolute.2: "Here is a simple example:"
82 | position.absolute.relative: "This element is relatively-positioned. If this element was position: static; its absolutely-positioned child would escape and would be positioned relative to the document body."
83 | position.absolute.absolute: "This element is absolutely-positioned. It's positioned relative to its parent."
84 | position.absolute.3: "This stuff is tricky, but it's essential to creating great CSS layouts. On the next page we'll use position in a more practical example."
85 |
86 | position_example.title: "position example"
87 | position_example.1: "This position stuff might make a little more sense in a practical example. Below is a realistic page layout."
88 | position_example.section.1: "The margin-left style for sections makes sure there is room for the nav. Otherwise the absolute and static elements would overlap"
89 | position_example.section.2: "Notice what happens when you resize your browser. It works nicely!"
90 | position_example.2: "This example works because the container is taller than the nav. If it wasn't, the nav would overflow outside of its container. In the coming pages we'll discuss other layout techniques that have different pros and cons."
91 | position_example.footer: "If you use a fixed header or footer, make sure there is room for it! I put a margin-bottom on the body."
92 |
93 | float.title: "float"
94 | float.1: "Another CSS property used for layout is float. Float is intended for wrapping text around images, like this:"
95 |
96 | clear.title: "clear"
97 | clear.floating: "I feel like I'm floating!"
98 | clear.1: "The clear property is important for controlling the behavior of floats. Compare these two examples:"
99 | clear.2: "In this case, the section element is actually after the div. However, since the div is floated to the left, this is what happens: the text in the section is floated around the div and the section surrounds the whole thing. What if we wanted the section to actually appear after the floated element?"
100 | clear.3: "Using clear we have now moved this section down below the floated div. You use the value left to clear elements floated to the left. You can also clear right and both."
101 |
102 | clearfix.title: "the clearfix hack"
103 | clearfix.1: "Here is a weird, bad thing that can sometimes happen when using floats:"
104 | clearfix.2: "Uh oh... this image is taller than the element containing it, and it's floated, so it's overflowing outside of its container!"
105 | clearfix.3: "Boo. There is a way to fix this, but it's ugly. It's called the clearfix hack."
106 | clearfix.4: "Let's try adding this new CSS:"
107 | clearfix.5: "Now let's see what happens:"
108 | clearfix.6: "Much better!"
109 | clearfix.7: "This works for modern browsers. If you want to support IE6 you will want to add the following:"
110 | clearfix.8: "There are exotic browsers that may require extra attention. The world of clearfixing is pretty scary, but this simple solution will work for the vast majority of browsers today."
111 |
112 | float_layout.title: "float layout example"
113 | float_layout.1: "It's very common to do entire layouts using float. Here is the same layout we did with position earlier, but using float instead."
114 | float_layout.2: "This example works just like the last one. Notice we put a clearfix on the container. It's not needed in this example, but it would be if the nav was longer than the non-floated content."
115 |
116 | percent.title: "percent width"
117 | percent.1: "Percent is a measurement unit relative to the containing block. It's great for images: here we make an image that is always 50% the width of its container. Try shrinking down the page to see what happens!"
118 | percent.2: "You could even use min-width and max-width to limit how big or small the image can get!"
119 | percent.layout.title: "percent width layout"
120 | percent.layout.1: "You can use percent for layout, but this can require more work. In this example, the nav content starts to wrap in a displeasing way when the window is too narrow. It comes down to what works for your content."
121 | percent.layout.2: "When this layout is too narrow, the nav gets squished. Worse, you can't use min-width on the nav to fix it, because the right column wouldn't respect it."
122 |
123 | media_queries.title: "media queries"
124 | media_queries.1: "\"Responsive Design\" is the strategy of making a site that \"responds\" to the browser and device that it is being shown on... by looking awesome no matter what."
125 | media_queries.2: "Media queries are the most powerful tool for doing this. Let's take our layout that uses percent widths and have it display in one column when the browser is too small to fit the menu in the sidebar:"
126 | media_queries.3: "Now when you resize your browser it's even cooler than ever!"
127 | media_queries.4: "Tada! Now our layout looks great even on mobile browsers. Here are some popular sites that use media queries this way. There is a whole lot more you can detect than min-width and max-width: check out the MDN documentation to learn more."
128 | media_queries.5: "You can make your layout look even better on mobile using meta viewport."
129 |
130 | inline_block.title: "inline-block"
131 | inline_block.1: "You can create a grid of boxes that fills the browser width and wraps nicely. This has been possible for a long time using float, but now with inline-block it's even easier. inline-block elements are like inline elements but they can have a width and height. Let's look at examples of both approaches."
132 | inline_block.hard_way.title: "The Hard Way (using float)"
133 | inline_block.hard_way.box: "I'm floating!"
134 | inline_block.hard_way.after: "I'm using clear so I don't float next to the above boxes."
135 | inline_block.easy_way.title: "The Easy Way (using inline-block)"
136 | inline_block.easy_way.info: "You can achieve the same effect using the inline-block value of the display property."
137 | inline_block.easy_way.box: "I'm an inline block!"
138 | inline_block.easy_way.after: "I don't have to use clear in this case. Nice!"
139 | inline_block.2: "You have to do extra work for IE6 and IE7 support of inline-block. Sometimes people talk about inline-block triggering something called hasLayout, though you only need to know about that to support old browsers. Follow the previous link about IE6 and IE7 support if you're curious to learn more. Otherwise, let's continue."
140 |
141 | inline_block_layout.title: "inline-block layout"
142 | inline_block_layout.1: "You can also use inline-block for layouts. There are a few things to keep in mind:"
143 | inline_block_layout.caveat.1: "inline-block elements are affected by the vertical-align property, which you probably want set to top."
144 | inline_block_layout.caveat.2: "You need to set the width of each column"
145 | inline_block_layout.caveat.3: "There will be a gap between the columns if there is any whitespace between them in the HTML"
146 | inline_block_layout.tada: "Tada!"
147 |
148 | column.title: "column"
149 | column.1: "There is a new set of CSS properties that let you easily make multi-column text. Have a look:"
150 | column.2: "CSS columns are very new, so you need to use the prefixes, and it won't work through IE9 or in Opera Mini. There are some more column-related properties, so click here to read more. Otherwise, off to the next topic."
151 |
152 | flexbox.title: "flexbox"
153 | flexbox.1: "The new flexbox layout mode is poised to redefine how we do layouts in CSS. Unfortunately the specification has changed a lot recently, so it's implemented differently in different browsers. Still, I'd like to share a couple examples so you know what's coming up. These examples currently only work some browsers that use the latest version of the standard."
154 | flexbox.2: "There are a lot of out-of-date flexbox resources around. If you want to learn more about flexbox, start here to learn how to identify if a resource is current or not. I have written a detailed article using the latest syntax."
155 | flexbox.3: "There is a lot more you can do with flexbox; these are just a few examples to give you an idea:"
156 | flexbox.simple.title: "Simple Layout using Flexbox"
157 | flexbox.simple.1: "Flexbox is so easy!"
158 | flexbox.fancy.title: "Fancy Layout using Flexbox"
159 | flexbox.fancy.1: "I will be 200px when there is room, and I will shrink down to 100px if there is not room, but no smaller."
160 | flexbox.fancy.2: "I will always be 200px, no matter what."
161 | flexbox.fancy.3: "I will fill up 1/3 of the remaining width."
162 | flexbox.fancy.4: "I will fill up 2/3 of the remaining width."
163 | flexbox.centering.title: "Centering using Flexbox"
164 | flexbox.centering.1: "Finally, it's easy to vertically center something in CSS!"
165 |
166 | frameworks.title: "css frameworks"
167 | frameworks.1: "Because CSS layout is so tricky, there are CSS frameworks out there to help make it easier. Here are a few if you want to check them out. Using a framework is only good idea if the framework really does what you need your site to do. They're no replacement for knowing how CSS works."
168 | frameworks.2: "That's it! If you have any feedback on this site, please let me know on Twitter!"
169 |
170 | about.title: "about this site"
171 | about.credits: "Written and built by Greg Smith. Design by Isaac Durazo. We work at Bocoup."
172 |
--------------------------------------------------------------------------------
/translations/en.yaml:
--------------------------------------------------------------------------------
1 | # English
2 |
3 | global.title: "Learn CSS Layout"
4 | global.short_title: "CSS"
5 | global.home: "Home"
6 | global.toc: "Table of Contents"
7 | global.next: "Next"
8 | global.previous: "Previous"
9 | global.feedback: "Issues / Feedback"
10 |
11 | util.extra_credit: "extra credit"
12 | util.ipsum: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit."
13 | util.nav.1: "Home"
14 | util.nav.2: "Taco Menu"
15 | util.nav.3: "Draft List"
16 | util.nav.4: "Hours"
17 | util.nav.5: "Directions"
18 | util.nav.6: "Contact"
19 |
20 | index.1: "This site teaches the CSS fundamentals that are used in any website's layout."
21 | index.2: "I assume you already know what selectors, properties, and values are. And you probably know a thing or two about layout, though it may still be a rage-provoking activity for you. If you want to learn HTML and CSS from the beginning, you should check out this tutorial. Otherwise, let's see if we can save you some fury on your next project."
22 | index.translator: ""
23 | index.get_started: "Get Started"
24 |
25 | no_layout.title: "no layout"
26 | no_layout.1: "Having no layout whatsover is almost ok if all you want is one big column of content. However, if a user makes the browser window really wide, it gets kind of annoying to read: after each line your eyes have a long distance to travel right-to-left to the next line. Try resizing your browser to see what I mean!"
27 | no_layout.2: "Before we fix this problem, let's make sure we're clear on the very important display property."
28 |
29 | display.title: "the \"display\" property"
30 | display.intro: "display is CSS's most important property for controlling layout. Every element has a default display value depending on what type of element it is. The default for most elements is usually block or inline. A block element is often called a block-level element. An inline element is always just called an inline element."
31 | display.block.title: "block"
32 | display.block: "div is the standard block-level element. A block-level element starts on a new line and stretches out to the left and right as far as it can. Other common block-level elements are p and form, and new in HTML5 are header, footer, section, and more."
33 | display.inline.title: "inline"
34 | display.inline.1: "span is the standard inline element. An inline element can wrap some text inside a paragraph"
35 | display.inline.2: "like this"
36 | display.inline.3: "without disrupting the flow of that paragraph. The a element is the most common inline element, since you use them for links."
37 | display.none.title: "none"
38 | display.none.1: "Another common display value is none. Some specialized elements such as script use this as their default. It is commonly used with JavaScript to hide and show elements without really deleting and recreating them."
39 | display.none.2: "This is different from visibility. Setting display to none will render the page as though the element does not exist. visibility: hidden; will hide the element, but the element will still take up the space it would if it was fully visible."
40 | display.other.title: "other display values"
41 | display.other: "There are plenty of more exotic display values, such as list-item and table. Here is an exhaustive list. We'll discuss inline-block and flex later on."
42 | display.extra: "As I mentioned, every element has a default display type. However, you can always override this! Though it wouldn't make sense to make an inline div, you can use this to customize the display of elements that have particular semantics. A common example is making inline li elements for horizontal menus."
43 |
44 | margin_auto.title: "margin: auto;"
45 | margin_auto.1: "Setting the width of a block-level element will prevent it from stretching out to the edges of its container to the left and right. Then, you can set the left and right margins to auto to horizontally center that element within its container. The element will take up the width you specify, then the remaining space will be split evenly between the two margins."
46 | margin_auto.2: "The only problem occurs when the browser window is narrower than the width of your element. The browser resolves this by creating a horizontal scrollbar on the page. Let's improve the situation..."
47 |
48 | max_width.title: "max-width"
49 | max_width.1: "Using max-width instead of width in this situation will improve the browser's handling of small windows. This is important when making a site usable on mobile. Resize this page to check it out!"
50 | max_width.2: "By the way, max-width is supported by all major browsers including IE7+ so you shouldn't be afraid of using it."
51 |
52 | box_model.title: "the box model"
53 | box_model.intro: "While we're talking about width, we should talk about width's big caveat: the box model. When you set the width of an element, the element can actually appear bigger than what you set: the element's border and padding will stretch out the element beyond the specified width. Look at the following example, where two elements with the same width value end up different sizes in the result."
54 | box_model.simple: "I'm smaller..."
55 | box_model.fancy: "And I'm bigger!"
56 | box_model.outro: "For generations, the solution to this problem has been extra math. CSS authors have always just written a smaller width value than what they wanted, subtracting out the padding and border. Thankfully, you don't have to do that anymore..."
57 |
58 | box_sizing.title: "box-sizing"
59 | box_sizing.1: "The original box model behavior was eventually considered unintuitive, so a new CSS property called box-sizing was created. When you set box-sizing: border-box; on an element, the padding and border of that element no longer increase its width. Here is the same example as the previous page, but with box-sizing: border-box; on both elements:"
60 | box_sizing.simple: "We're the same size now!"
61 | box_sizing.fancy: "Hooray!"
62 | box_sizing.2: "Since this is so much better, some authors want all elements on all their pages to always work this way. Such authors put the following CSS on their pages:"
63 | box_sizing.3: "This ensures that all elements are always sized in this more intuitive way."
64 | box_sizing.4: "Since box-sizing is pretty new, you should use the -webkit- and -moz- prefixes for now, as I have in these examples. This technique enables experimental features in specific browsers. Also, keep in mind that this one is IE8+."
65 |
66 | position.title: "position"
67 | position.intro: "In order to make more complex layouts, we need to discuss the position property. It has a bunch of possible values, and their names make no sense and are impossible to remember. Let's go through them one by one, but maybe you should bookmark this page too."
68 | position.static.title: "static"
69 | position.static.1: "static is the default value. An element with position: static; is not positioned in any special way. A static element is said to be not positioned and an element with its position set to anything else is said to be positioned."
70 | position.relative.title: "relative"
71 | position.relative.1: "relative behaves the same as static unless you add some extra properties."
72 | position.relative.2: "Setting the top, right, bottom, and left properties of a relatively-positioned element will cause it to be adjusted away from its normal position. Other content will not be adjusted to fit into any gap left by the element."
73 | position.fixed.title: "fixed"
74 | position.fixed.1: "A fixed element is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled. As with relative, the top, right, bottom, and left properties are used."
75 | position.fixed.2: "I'm sure you've noticed that fixed element in the lower-right hand corner of the page. I'm giving you permission to pay attention to it now. Here is the CSS that puts it there:"
76 | position.fixed.3: "A fixed element does not leave a gap in the page where it would normally have been located."
77 | position.fixed.4: "Mobile browsers have surprisingly shaky support for fixed. Learn more about the situation here."
78 | position.fixed.example: "Hello! Don't pay attention to me yet."
79 | position.absolute.title: "absolute"
80 | position.absolute.1: "absolute is the trickiest position value. absolute behaves like fixed except relative to the nearest positioned ancestor instead of relative to the viewport. If an absolutely-positioned element has no positioned ancestors, it uses the document body, and still moves along with page scrolling. Remember, a \"positioned\" element is one whose position is anything except static."
81 | position.absolute.2: "Here is a simple example:"
82 | position.absolute.relative: "This element is relatively-positioned. If this element was position: static; its absolutely-positioned child would escape and would be positioned relative to the document body."
83 | position.absolute.absolute: "This element is absolutely-positioned. It's positioned relative to its parent."
84 | position.absolute.3: "This stuff is tricky, but it's essential to creating great CSS layouts. On the next page we'll use position in a more practical example."
85 |
86 | position_example.title: "position example"
87 | position_example.1: "This position stuff might make a little more sense in a practical example. Below is a realistic page layout."
88 | position_example.section.1: "The margin-left style for sections makes sure there is room for the nav. Otherwise the absolute and static elements would overlap"
89 | position_example.section.2: "Notice what happens when you resize your browser. It works nicely!"
90 | position_example.2: "This example works because the container is taller than the nav. If it wasn't, the nav would overflow outside of its container. In the coming pages we'll discuss other layout techniques that have different pros and cons."
91 | position_example.footer: "If you use a fixed header or footer, make sure there is room for it! I put a margin-bottom on the body."
92 |
93 | float.title: "float"
94 | float.1: "Another CSS property used for layout is float. Float is intended for wrapping text around images, like this:"
95 |
96 | clear.title: "clear"
97 | clear.floating: "I feel like I'm floating!"
98 | clear.1: "The clear property is important for controlling the behavior of floats. Compare these two examples:"
99 | clear.2: "In this case, the section element is actually after the div. However, since the div is floated to the left, this is what happens: the text in the section is floated around the div and the section surrounds the whole thing. What if we wanted the section to actually appear after the floated element?"
100 | clear.3: "Using clear we have now moved this section down below the floated div. You use the value left to clear elements floated to the left. You can also clear right and both."
101 |
102 | clearfix.title: "the clearfix hack"
103 | clearfix.1: "Here is a weird, bad thing that can sometimes happen when using floats:"
104 | clearfix.2: "Uh oh... this image is taller than the element containing it, and it's floated, so it's overflowing outside of its container!"
105 | clearfix.3: "Boo. There is a way to fix this, but it's ugly. It's called the clearfix hack."
106 | clearfix.4: "Let's try adding this new CSS:"
107 | clearfix.5: "Now let's see what happens:"
108 | clearfix.6: "Much better!"
109 | clearfix.7: "This works for modern browsers. If you want to support IE6 you will want to add the following:"
110 | clearfix.8: "There are exotic browsers that may require extra attention. The world of clearfixing is pretty scary, but this simple solution will work for the vast majority of browsers today."
111 |
112 | float_layout.title: "float layout example"
113 | float_layout.1: "It's very common to do entire layouts using float. Here is the same layout we did with position earlier, but using float instead."
114 | float_layout.2: "This example works just like the last one. Notice we put a clearfix on the container. It's not needed in this example, but it would be if the nav was longer than the non-floated content."
115 |
116 | percent.title: "percent width"
117 | percent.1: "Percent is a measurement unit relative to the containing block. It's great for images: here we make an image that is always 50% the width of its container. Try shrinking down the page to see what happens!"
118 | percent.2: "You could even use min-width and max-width to limit how big or small the image can get!"
119 | percent.layout.title: "percent width layout"
120 | percent.layout.1: "You can use percent for layout, but this can require more work. In this example, the nav content starts to wrap in a displeasing way when the window is too narrow. It comes down to what works for your content."
121 | percent.layout.2: "When this layout is too narrow, the nav gets squished. Worse, you can't use min-width on the nav to fix it, because the right column wouldn't respect it."
122 |
123 | media_queries.title: "media queries"
124 | media_queries.1: "\"Responsive Design\" is the strategy of making a site that \"responds\" to the browser and device that it is being shown on... by looking awesome no matter what."
125 | media_queries.2: "Media queries are the most powerful tool for doing this. Let's take our layout that uses percent widths and have it display in one column when the browser is too small to fit the menu in the sidebar:"
126 | media_queries.3: "Now when you resize your browser it's even cooler than ever!"
127 | media_queries.4: "Tada! Now our layout looks great even on mobile browsers. Here are some popular sites that use media queries this way. There is a whole lot more you can detect than min-width and max-width: check out the MDN documentation to learn more."
128 | media_queries.5: "You can make your layout look even better on mobile using meta viewport."
129 |
130 | inline_block.title: "inline-block"
131 | inline_block.1: "You can create a grid of boxes that fills the browser width and wraps nicely. This has been possible for a long time using float, but now with inline-block it's even easier. inline-block elements are like inline elements but they can have a width and height. Let's look at examples of both approaches."
132 | inline_block.hard_way.title: "The Hard Way (using float)"
133 | inline_block.hard_way.box: "I'm floating!"
134 | inline_block.hard_way.after: "I'm using clear so I don't float next to the above boxes."
135 | inline_block.easy_way.title: "The Easy Way (using inline-block)"
136 | inline_block.easy_way.info: "You can achieve the same effect using the inline-block value of the display property."
137 | inline_block.easy_way.box: "I'm an inline block!"
138 | inline_block.easy_way.after: "I don't have to use clear in this case. Nice!"
139 | inline_block.2: "You have to do extra work for IE6 and IE7 support of inline-block. Sometimes people talk about inline-block triggering something called hasLayout, though you only need to know about that to support old browsers. Follow the previous link about IE6 and IE7 support if you're curious to learn more. Otherwise, let's continue."
140 |
141 | inline_block_layout.title: "inline-block layout"
142 | inline_block_layout.1: "You can also use inline-block for layouts. There are a few things to keep in mind:"
143 | inline_block_layout.caveat.1: "inline-block elements are affected by the vertical-align property, which you probably want set to top."
144 | inline_block_layout.caveat.2: "You need to set the width of each column"
145 | inline_block_layout.caveat.3: "There will be a gap between the columns if there is any whitespace between them in the HTML"
146 | inline_block_layout.tada: "Tada!"
147 |
148 | column.title: "column"
149 | column.1: "There is a new set of CSS properties that let you easily make multi-column text. Have a look:"
150 | column.2: "CSS columns are very new, so you need to use the prefixes, and it won't work through IE9 or in Opera Mini. There are some more column-related properties, so click here to read more. Otherwise, off to the next topic."
151 |
152 | flexbox.title: "flexbox"
153 | flexbox.1: "The new flexbox layout mode is poised to redefine how we do layouts in CSS. Unfortunately the specification has changed a lot recently, so it's implemented differently in different browsers. Still, I'd like to share a couple examples so you know what's coming up. These examples currently only work some browsers that use the latest version of the standard."
154 | flexbox.2: "There are a lot of out-of-date flexbox resources around. If you want to learn more about flexbox, start here to learn how to identify if a resource is current or not. I have written a detailed article using the latest syntax."
155 | flexbox.3: "There is a lot more you can do with flexbox; these are just a few examples to give you an idea:"
156 | flexbox.simple.title: "Simple Layout using Flexbox"
157 | flexbox.simple.1: "Flexbox is so easy!"
158 | flexbox.fancy.title: "Fancy Layout using Flexbox"
159 | flexbox.fancy.1: "I will be 200px when there is room, and I will shrink down to 100px if there is not room, but no smaller."
160 | flexbox.fancy.2: "I will always be 200px, no matter what."
161 | flexbox.fancy.3: "I will fill up 1/3 of the remaining width."
162 | flexbox.fancy.4: "I will fill up 2/3 of the remaining width."
163 | flexbox.centering.title: "Centering using Flexbox"
164 | flexbox.centering.1: "Finally, it's easy to vertically center something in CSS!"
165 |
166 | frameworks.title: "css frameworks"
167 | frameworks.1: "Because CSS layout is so tricky, there are CSS frameworks out there to help make it easier. Here are a few if you want to check them out. Using a framework is only a good idea if the framework really does what you need your site to do. They're no replacement for knowing how CSS works."
168 | frameworks.2: "That's it! If you have any feedback on this site, please let me know on Twitter!"
169 |
170 | about.title: "about this site"
171 | about.credits: "Written and built by Greg Smith. Design by Isaac Durazo. We work at Bocoup."
--------------------------------------------------------------------------------
/translations/pt-pt.yaml:
--------------------------------------------------------------------------------
1 | # Portuguese
2 |
3 | global.title: "Aprenda o layout de CSS"
4 | global.short_title: "CSS"
5 | global.home: "Ínicio"
6 | global.toc: "Tabela de Conteúdos"
7 | global.next: "Próximo"
8 | global.previous: "Anterior"
9 | global.feedback: "Problemas / Feedback"
10 |
11 | util.extra_credit: "crédito extra"
12 | util.ipsum: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit."
13 | util.nav.1: "Ínicio"
14 | util.nav.2: "Menu Taco"
15 | util.nav.3: "Lista Draft"
16 | util.nav.4: "Horas"
17 | util.nav.5: "Direcções"
18 | util.nav.6: "Contacto"
19 |
20 | index.1: "Este site ensina os fundamentos de CSS que são utilizados em qualquer layout de websites."
21 | index.2: "Suponho que tu já sabes o que são selectores, propriedades e valores. E que tu provávelmente sabes uma coisa ou duas coisas sobre layout, embora possa ser ainda uma actividade que te provoque alguma angustia. Se queres aprender HTML e CSS do ínicio, deves verifiar este tutorial. Caso contrário, vamos ver se conseguimos poupar alguma angustia no teu próximo projeto."
22 | index.translator: ""
23 | index.get_started: "Começar"
24 |
25 | no_layout.title: "sem layout"
26 | no_layout.1: "Não ter qualquer tipo de layout é quase ok se tudo o que queres é uma grande coluna de conteudo. No entanto, se o utilizado tornar a janela do browser realmente larga, torna-se um pouco irritante de ler: após cada linha os teus olhos de viajar uma longa distância da direita para a esquerda para a próxima linha. Tenta Tenta mudar o tamanho do teu browser para entenderes o que digo!"
27 | no_layout.2: "Antes de arranjarmos este problema, vamos ter a certeza que estamos entendidos numa importante propriedade de display."
28 |
29 | display.title: "a propriedade \"display\""
30 | display.intro: "display é a propriedade de CSS mais importante para controlar o layout. Qualquer elemento tem um valor de display por defeito, dependendo do tipo de elemento. O valor por defeito para a maioria dos elementos é normalmente block ou inline. Um elemento block é usualmente chamado de block-level. Um elemento inline é sempre e simplesmente chamado inline."
31 | display.block.title: "block"
32 | display.block: "div é um elemento block-level standard. Um elemento block-level começa numa nova linha e alonga-se da esquerda até á direita o mais que conseguir. Outros elementos block-level comuns são p e form, e novos no HTML5 são header, footer, section, e mais."
33 | display.inline.title: "inline"
34 | display.inline.1: "span é o elemento inline standard. Um elemento inline consegue envolver algum texto dentro de um parágrafo"
35 | display.inline.2: "gostar disto"
36 | display.inline.3: "sem quebrar o fluxo do parágrafo. O elemento a é o elemento inline mais comum, uma vez que os utilizas para atalhos."
37 | display.none.title: "nenhum"
38 | display.none.1: "Outro valor comum para display é none. Alguns elementos especializados como o script utilizam isto como valor por defeito. É comum utilizar com JavaScript para esconder e mostrar elementos sem realmente os apagar e re-criar."
39 | display.none.2: "Isto é diferente de visibility. Atribuir ao display o valor none não deixará espaço onde o elemento supostamente ficasse, mas visibility: hidden; deixará um espaço vazio."
40 | display.other.title: "outros valores de display"
41 | display.other: "Existem outros valores mais exóticos para display, como list-item e table. Aqui está uma lista exaustiva. Discutiremos mais tarde inline-block e flex."
42 | display.extra: "Como mencionei, todo o elemento tem um tipo de display por defeito. Contudo, podes sempre anular isto! Apesar de fazer sentido tornar uma div inline, podes utilizar isto para customizar a apresentação de elementos que têm uma semantica particular. Um exemplo comum é tornar elementos li inline para menus horizontais."
43 |
44 | margin_auto.title: "margin: auto;"
45 | margin_auto.1: "Colocando a width de um elemento block-level previne o mesmo de esticar até ás fronteiras do recipiente à esquerda e direita. Então, podes configurar a margem esquerda e direita com auto para centrar o elemento horizontalmente dentro do seu recipiente. O elemento vai ficar com a largura que especificaste, o resto do espaço será então dividido em partes iguais entre as duas margens."
46 | margin_auto.2: "O unico problem que ocorre quando a janela do browser é mais pequena que a largura do teu elemento. O browser resolve isto criando uma scrollbar horizontal na página. Vamos melhorar esta situação..."
47 |
48 | max_width.title: "max-width"
49 | max_width.1: "Utilizando max-width em vez de width, nesta situação, irá melhorar a maneira como o browser manipula janelas pequenas. Isto é importante quando se cria um site também para dispositivos móveis. Re-dimensiona esta página para verificares!"
50 | max_width.2: "A propósito, max-width é suportado por todos os browsers principais incluindo o IE7+ portanto não deves ter receio de utilizar."
51 |
52 | box_model.title: "o box model"
53 | box_model.intro: "Enquanto falamos sobre width, devemos falar também sobre algumas advertências sobre a mesma: o box model. Quando configura a largura de um elemento, o elemento pode eventualmente aparecer maior do que o especificado: a fronteira do elemento e espaçamento irão esticar para lá da largura especificada. Observa o seguinte exemplo, onde dois elementos com o mesmo valor de largura acabam por resultar em diferentes tamanhos."
54 | box_model.simple: "Sou mais pequeno..."
55 | box_model.fancy: "E eu sou maior!"
56 | box_model.outro: "Durante gerações, a solução para este problem tem sido a matemática. Autores de CSS tentaram sempre escrever apenas o valor mais pequeno da largura pretendida, subtraingo o preenchimento e fronteira. Felizmente, já não tens de continuar a fazer mais isto..."
57 |
58 | box_sizing.title: "box-sizing"
59 | box_sizing.1: "Após gerações, as pessoas aperceberam-se que a matemática não é divertida, então foi criada uma nova propriedade de CSS chamada box-sizing. Quando configuras box-sizing: border-box; num elemento, o espaçamento e fronteira desse elemento deixa de aumentar a sua largura. Aqui está o mesmo elemento da página anterior, mas com box-sizing: border-box; em ambos os elementos:"
60 | box_sizing.simple: "Agora temos o mesmo tamanho!"
61 | box_sizing.fancy: "Viva!"
62 | box_sizing.2: "Uma vez que isto é muito melhor, alguns autores queriam que todos os elementos em todas as suas páginas funcionassem sempre desta maneira. Esses autores colocam o seguinte CSS nas suas páginas:"
63 | box_sizing.3: "Isto assegura que todos os elementos são sempre dimensionados desta maneira mais intuitiva."
64 | box_sizing.4: "Uma vez que box-sizing é bastante novo, deves utilizar por agora os prefixos -webkit- e -moz-, como eu tenho nestes exemplos. Esta técnica permite activar características experimentais em browsers expecificos. Mantém também em mente que isto é IE8+."
65 |
66 | position.title: "posição"
67 | position.intro: "De forma a criar layouts mais complexos, precisamos discutir a propriedade position. Têm um grupo de valores possíveis, e os seus nomes não fazem sentido e são impossíveis de recordar. Vamos lá passar por eles um a um, talvez devas guardar esta página também."
68 | position.static.title: "static"
69 | position.static.1: "static é o valor por defeito. Um elemento com position: static; não é posicionado de uma forma qualquer. Diz-se que um elemento estático está não posicionado e um elemento com a sua posição com outro valor qualquer diz-se posicionado."
70 | position.relative.title: "relative"
71 | position.relative.1: "relative comporta-se igual a static a não ser que adiciones algumas propriedades extra."
72 | position.relative.2: "Atribuindo as propriedades top, right, bottom, e left de um elemento relativamente posicionado irá fazer com que seja ajustado para longe da sua posição normal. Outro conteúdo não será ajustado para caber dentro de algum espaço que sobre do elemento."
73 | position.fixed.title: "fixed"
74 | position.fixed.1: "Um elemento fixo é posicionado relativamente ao viewport, significa que fica sempre no mesmo sitio, mesmo que faça scroll da página. Com relative, são utilizadas as propriedades top, right, bottom, e left."
75 | position.fixed.2: "Tenho a certeza que notaste o elemento fixo no canto inferior direito da página. Estou a dar-te permissão para lhe dares atenção agora. Aqui está o CSS que o coloca lá:"
76 | position.fixed.3: "Um elemento fixo não deixa espaço na página onde estaria normalment localizado."
77 | position.fixed.4: "Browsers de dispositivos móveis têm um apoio instável para fixar. Aprender aqui mais sobre a situação."
78 | position.fixed.example: "Hello! Don't pay attention to me yet."
79 | position.absolute.title: "absolute"
80 | position.absolute.1: "absolute é o valor de posicionamento mais complicado. absolute comporta-se como fixed só que relativo ao posicionamento do antecessor mais próximo em vez de relativo ao viewport. Se um elemento positionado absolutamente não tem um antecessor posicionado, utiliza o corpo do documento, e continua a mover-se igualmente com o scroll da página. Lembra-te, um elemtno \"posicionado\" é aquele em que a posição é tudo excepto static."
81 | position.absolute.2: "Aqui está um exemplo simples:"
82 | position.absolute.relative: "Este elemento está posicionado relativamente. Se este elemento tivesse position: static; o seu filho posicionado absolutamente iria escapar e ficaria posicionado relativo ao corpo do documento."
83 | position.absolute.absolute: "Este elemento está posicionado absolutamente. Está posicionado relativamente ao seu pai."
84 | position.absolute.3: "Estas coisas são complicadas, mas é essencial para criar grandes layouts com CSS. Na próxima página vamos utilizar position num exemplo mais prático."
85 |
86 | position_example.title: "exemplo de posicionamento"
87 | position_example.1: "Esta coisa do posicionamento pode fazer um pouco mais de sentido num exemplo prático. Por baixo está um layout realista de uma página."
88 | position_example.section.1: "O estilo margin-left para a section asssegura-se que existe espaço para nav."
89 | position_example.section.2: "Observa o que acontece quando redimensionas o teu browser. Funciona de forma agradável!"
90 | position_example.2: "Este exemplo funciona porque o recipiente é mais alto que a nav. Caso não fosse, a nav iria transbordar para fora of do seu recipiente. Nas próximas páginas vamos discutir outras técnicas de layout the têm diferentes prós e contras."
91 | position_example.footer: "Se utilizas um cabeçalho fixo ou rodapé, assegura-te que existe espaço para o mesmo! Eu coloco uma margin-bottom no body."
92 |
93 | float.title: "float"
94 | float.1: "Outra propriedade CSS utilizada no layout é float. O pretendido com float é envolver texto á volta de imagens, assim:"
95 |
96 | clear.title: "clear"
97 | clear.floating: "Sinto que estou a flutuar!"
98 | clear.1: "A propriedade clear é importante para controlar o comportamento dos flutuadores. Compare estes dois exemplos:"
99 | clear.2: "Neste caso, o elemento section está actualmente depois de div. Contudo, desde que div flutua para esquerda, o que acontece é isto: o texto na section flutua á volta da div e a section envolve tudo o resto. Então e se quisessemos que a section aparecesse mesmo depois do elemento flutuado?"
100 | clear.3: "Utilizando clear movemos agora esta secção para debaixo do elemento flutuado div. Utilizas o valor left para limpar elementos flutuados para a esquerda. Podes também limpar com right e both."
101 |
102 | clearfix.title: "o hack do clearfix"
103 | clearfix.1: "Aqui está uma coisa estranha, má que pode ocorrer quando se utilizam flutuadores:"
104 | clearfix.2: "Uh oh... esta imagem é mais alta que o elemento que a contem, e está a flutuar, então está a sair para fora do seu recipiente!"
105 | clearfix.3: "Boo. Existe uma maneira de corrigir isto, mas é feia. Chama-se clearfix hack."
106 | clearfix.4: "Vamos tentar adicionar este novo CSS:"
107 | clearfix.5: "Agora vamos ver o que acontece:"
108 | clearfix.6: "Muito melhor!"
109 | clearfix.7: "Isto funciona com browsers modernos. Se quiseres suportar IE6, vais querer adicionar o seguinte:"
110 | clearfix.8: "Existem browsers exóticos que podem necessitar atenção extra. O mundo de clearfixing é bastante assustador, mas esta solução simples funcionará para a grande maioria dos browsers de hoje em dia."
111 |
112 | float_layout.title: "exemplo de layout com float"
113 | float_layout.1: "É muito comum fazer layouts inteiros utilizando float. Aqui está o mesmo layout que fizemos anteriormente com position, mas utilizando float."
114 | float_layout.2: "Este exemplo funciona como o último. Observa que colocamos um clearfix no recipiente. Não é necessário neste exemplo, mas seria se nav fosse mais longo do que o conteudo do elemento não flutuante."
115 |
116 | percent.title: "percentagem de largura"
117 | percent.1: "Percentagem é uma unidade de medida relativa ao bloco recipiente. É bom para imagens: aqui fazemos com que uma imagem seja sempre 50% da largura do seu recipiente. Tenta diminuir a página para ver o que acontece!"
118 | percent.2: "Podes até utilizar min-width e max-width para limitar o quanto a imagem pode ficar grande ou pequena!"
119 | percent.layout.title: "layout com percentagem de largura"
120 | percent.layout.1: "Podes utilizar percentagem para o layout, mas isto requer mais trabalho. No exemplo seguinte, o conteudo nav começa a envolver de uma forma desagradável quando a janela é demasiado estreita. Resume-se ao que funciona para o teu conteúdo."
121 | percent.layout.2: "Quando este layout é demasiado estreito, a nav fica apertada. Pior, não podes utilizar min-width na nav para corrigir, porque a coluna da direita não o irá respeitar."
122 |
123 | media_queries.title: "media queries"
124 | media_queries.1: "\"Responsive Design\" é a estratégia de fazer um site que \"responde\" ao browser e dispositivo onde está a ser apresentado... mostrando-se de forma sempre expectacular."
125 | media_queries.2: "Media queries é a ferramenta mais potente para fazer isto. Vamos pegar no nosso layout que utiliza percentagens de largura e mostra-lo em uma coluna quando o browser é demasiado pequeno para ter o menu numa barra lateral:"
126 | media_queries.3: "Agora quando redimensionas o teu browser é ainda mais fixe que nunca!"
127 | media_queries.4: "Tada! Agora o nosso layout parece bom mesmo num browser móvel. Aqui ficam alguns sites populares que utilizam media queries desta maneira. Existe muito mais que consegues detectar do que min-width e max-width: verifica a documentação MDN para aprender mais."
128 | media_queries.5: "Podes fazer o teu layout parecer ainda melhor no móvel utilizando meta viewport."
129 |
130 | inline_block.title: "inline-block"
131 | inline_block.1: "Podes criar uma grelha de caixas que se enche o a largura do browser e envolve agradàvelmente. Isto é possivel desde á bastante tempo utilizando float, mas agora com inline-block é ainda mais fácil. Vamos olhar para exemplos de ambas as maneiras."
132 | inline_block.hard_way.title: "A maneira dura (utilizando float)"
133 | inline_block.hard_way.box: "Estou a flutuar!"
134 | inline_block.hard_way.after: "Estou a utilizar clear para não flutuar para perto das caixas acima."
135 | inline_block.easy_way.title: "A maneira fácil (utilizando inline-block)"
136 | inline_block.easy_way.info: "Tu consegues alcançar o mesmo efeito utilizando o valor inline-block da propriedade display."
137 | inline_block.easy_way.box: "Sou um bloco inline!"
138 | inline_block.easy_way.after: "Neste caso não preciso utiliza o clear. Nice!"
139 | inline_block.2: "Tu tens que fazer trabalho extra para o IE6 e IE7 suportarem o inline-block. Algumas vezes as pessoas falam sobre o inline-block disparar qualquer coisa chamada hasLayout, apesar de precisares saber sobre isto para suportar browsers antigos. Segue o link anterior sobre o suporte de IE6 e IE7 se estiveres curioso para aprender mais. Caso contrário, vamos continuar."
140 |
141 | inline_block_layout.title: "layout inline-block"
142 | inline_block_layout.1: "Podes também utilizar inline-block para layouts. Existem algumas coisas a ter em mente:"
143 | inline_block_layout.caveat.1: "Os elementos inline-block são afectados pela propriedade vertical-align, que tu provávelmente queres configurar com top."
144 | inline_block_layout.caveat.2: "Precisas configurar a largura de cada coluna"
145 | inline_block_layout.caveat.3: "Existirá uma folga entre as colunas caso exista algum espaço em branco entre elas no HTML"
146 | inline_block_layout.tada: "Tada!"
147 |
148 | column.title: "coluna"
149 | column.1: "Existe um novo conjunto de propriedades CSS que te deixam construir fácilmente text multi-coluna. Dá uma espreita:"
150 | column.2: "Colunas CSS são muito recentes, portanto precisas utilizar prefixos, e não funcionará no IE9 ou no Opera Mini. Existem mais algumas pripriedades relacionadas com colunas, portanto clica aqui para ler mais. Caso contrário, seguimos para o próximo tópico."
151 |
152 | flexbox.title: "flexbox"
153 | flexbox.1: "O novo modo de layout flexbox foi composto para redefinir como nós fazemos o layout em CSS. Infelizmente a especificação tem mudado muito recentemente, portanto é implementada de forma diferente nos diferentes browsers. Contudo, gostaria de partilhar um par de exemplos para poderes saber o que vêm ai. Estes exemplos actualmente funcionam apenas na implementação flexbox do Chrome, baseada na última versão do standard."
154 | flexbox.2: "Existem por ai muitos recursos desactualizados sobre flexbox. Se queres aprender mais sobre flexbox, começa por aqui para aprender como identificar se um recurso é actual ou não. Eu escrevi um artigo detalhado utilizando a mais recente syntax."
155 | flexbox.3: "Existe muito mais que podes fazer com flexbos; estes são apenas alguns exemplos para te dar uma ideia:"
156 | flexbox.simple.title: "Layout simples utilizando Flexbox"
157 | flexbox.simple.1: "Flexbox é tão fácil!"
158 | flexbox.fancy.title: "Layout Decorado utilizando Flexbox"
159 | flexbox.fancy.1: "Vou ter 200px quando existe espaço, i vou encolher para 100px se não existir espaço, mas não menos."
160 | flexbox.fancy.2: "Vou ter sempre 200px, independentemente do tamanho."
161 | flexbox.fancy.3: "Vou encher até 1/3 da largura que restar."
162 | flexbox.fancy.4: "Vou encher até 2/3 da largura que restar."
163 | flexbox.centering.title: "Centrar utilizando Flexbox"
164 | flexbox.centering.1: "Finalmente, é fácil centrar verticalmente qualquer coisa em CSS!"
165 |
166 | frameworks.title: "plataformas css"
167 | frameworks.1: "Devido ao layout CSS ser tão complicado, existem plataformas CSS por ai para ajudar a tornar mais fácil. Aqui estão algumas se quiseres verificar. Utilizar uma plataforma é uma boa ideia apenas se a plataforma realmente fizer o que precisas que o teu site faça. Não existe substituto para o conhecimento de como o CSS funciona."
168 | frameworks.2: "E é isto! Se tens algum comentário sobre este site, por favor contacta-me pelo Twitter!"
169 |
170 | about.title: "sobre este site"
171 | about.credits: "Escrito e construido por Greg Smith. Desenhado por Isaac Durazo. Trabalhamos na Bocoup."
--------------------------------------------------------------------------------
40 | 
32 | {% localize util.ipsum %}
33 |
--------------------------------------------------------------------------------
/templates/margin-auto.html:
--------------------------------------------------------------------------------
1 | ---
2 | layout: default
3 | next: max-width
4 | prev: display
5 | num: 3
6 | ---
7 |
8 |
14 |
15 | 
31 | 