├── .editorconfig ├── .gitignore ├── .gitmodules ├── .npmrc ├── .travis.yml ├── Gemfile ├── Gemfile.lock ├── LICENSE.md ├── README.md ├── articles ├── catalog.yml ├── ch01.re ├── ch02.re ├── ch03.re ├── config.yml ├── credit.re ├── css │ ├── external │ │ └── nico │ │ │ └── bootstrap.css │ └── style.scss ├── images │ ├── firefox-blockquote-type-cite.png │ ├── firefox-font.png │ ├── input-types.png │ ├── safari-font.png │ └── table-border-collapse.png ├── index.re ├── layouts │ ├── layout-web.html.erb │ └── layout.tex.erb ├── prh.yml ├── sty │ └── techbooster-doujin.sty └── style.css ├── bin └── setup-redpen.sh ├── codes ├── browser │ ├── body.css │ ├── chrome │ │ └── ul-nested.css │ ├── firefox │ │ ├── blockquote.css │ │ ├── table-1.css │ │ ├── table-2.css │ │ ├── ul-nested.css │ │ └── ul.css │ ├── h1.css │ └── safari │ │ └── img.css └── reset-css │ ├── a-reset.css │ ├── eric-meyers-blockquote.css │ ├── hard-reset.css │ ├── normalize-css │ ├── button.css │ ├── h1.css │ ├── img.css │ ├── input.css │ ├── select.css │ └── textarea.css │ ├── ress │ ├── button.css │ ├── input.css │ └── select.css │ ├── sanitize-css │ ├── fix-tap-delay.css │ ├── html.css │ ├── input.css │ ├── table.css │ ├── textarea.css │ └── ul-ol.css │ └── yui3 │ ├── h1.css │ └── textarea.css ├── docs ├── CNAME ├── ch01.html ├── ch02.html ├── ch03.html ├── credit.html ├── images │ ├── firefox-blockquote-type-cite.png │ ├── firefox-font.png │ ├── input-types.png │ ├── safari-font.png │ └── table-border-collapse.png ├── index.html ├── style.css └── titlepage.html ├── gulpfile.js ├── package.json ├── redpen-conf-ja.xml ├── redpen-distribution-1.7.6 ├── bin │ ├── redpen │ ├── redpen-server │ ├── redpen-server.bat │ ├── redpen-server.war │ └── redpen.bat ├── conf │ ├── logback.xml │ ├── redpen-conf-en.xml │ ├── redpen-conf-ja.xml │ └── redpen-conf-plugin.xml ├── js │ ├── test │ │ ├── redpen.js │ │ └── validator-js-test.js │ └── validator.js.example ├── lib │ ├── annotations-2.0.1.jar │ ├── asm-5.0.3.jar │ ├── asm-analysis-5.0.3.jar │ ├── asm-tree-5.0.3.jar │ ├── asm-util-5.0.3.jar │ ├── commons-cli-1.2.jar │ ├── commons-io-2.4.jar │ ├── commons-lang3-3.4.jar │ ├── guava-15.0.jar │ ├── javassist-3.19.0-GA.jar │ ├── json-20080701.jar │ ├── kuromoji-core-0.9.0.jar │ ├── kuromoji-ipadic-0.9.0.jar │ ├── logback-classic-1.1.1.jar │ ├── logback-core-1.1.1.jar │ ├── parboiled-core-1.1.7.jar │ ├── parboiled-java-1.1.7.jar │ ├── pegdown-1.6.0.jar │ ├── redpen-cli-1.7.6.jar │ ├── redpen-core-1.7.6.jar │ ├── reflections-0.9.10.jar │ └── slf4j-api-1.7.6.jar └── sample-doc │ ├── en │ ├── sampledoc-en.asciidoc │ ├── sampledoc-en.md │ ├── sampledoc-en.re │ ├── sampledoc-en.tex │ └── sampledoc-en.txt │ └── ja │ ├── sampledoc-ja.asciidoc │ ├── sampledoc-ja.md │ ├── sampledoc-ja.re │ ├── sampledoc-ja.tex │ └── sampledoc-ja.txt └── travis_key.enc /.editorconfig: -------------------------------------------------------------------------------- 1 | # ================================================== 2 | # Common 3 | # ================================================== 4 | # top-most EditorConfig file 5 | root = true 6 | 7 | [*] 8 | charset = utf-8 9 | end_of_line = lf 10 | indent_size = 2 11 | indent_style = space 12 | insert_final_newline = true 13 | trim_trailing_whitespace = true 14 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | vendor/ 3 | .bundle/ 4 | articles/webroot/ 5 | articles/book/ 6 | temp/ 7 | 8 | articles/*.pdf 9 | npm-debug.log 10 | redpen-*.tar.gz 11 | -------------------------------------------------------------------------------- /.gitmodules: -------------------------------------------------------------------------------- 1 | [submodule "prh-rules"] 2 | path = prh-rules 3 | url = https://github.com/prh/rules/ 4 | -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | message = "Release %s" 2 | tag-version-prefix = "" 3 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | sudo: false 2 | language: ruby 3 | rvm: 4 | - 2.3.1 5 | jdk: 6 | - oraclejdk8 7 | env: 8 | global: 9 | - export LC_CTYPE=ja_JP.UTF-8 10 | - GIT_COMMITTER_NAME=kubosho_ 11 | - GIT_COMMITTER_EMAIL=ta2@o2p.jp 12 | - GIT_AUTHOR_NAME=o2project 13 | - GIT_AUTHOR_EMAIL=admin@o2p.jp 14 | - NODEJS_VER=6.10.0 15 | - secure: BWcVOpzd2qIvdM1EbDXpjRYN465e1gU2qVG0GJeVy0ZiYfei02m0AF45UALLQ4DvAYpb2DFtqf8MQ4KN4PC7UdiAoo+1bUvm0f2/i2uNRHkKdkIWE4QPBx/1NUNAKHlk3qZE6qw2acL1cgd8I9MM/cDwP8hGOkTg8ozxS19g0IBxg4n8iP5kJSY6qIaIfNiuH0630nFFfOHKcUckfseRgg+Q8qtam122UyzYsnNgnWrNDmTZrBg6eEBaZ3ExoMHh9JBuRi8ZvQ+j9t45u/ylZqsn/qgyXliv/UYyuWb3ylIZkE3lrTnV4eoOZiRnnETsjY9ggswvxmhf+NWRc09hWj3zeULGmyHn/rAb/FYtqxq1lQ9YXKMA17vaFMD6ESmNsw0WPDBEs/9l5NgwM2pEnJzGPYKDWz8P083kK6sK4Si+FZq/RXQMWaF/cXtFN7zdZDCc/GNyfBfV2Rq/SNqjVd80eF04UxWlUiIM99/NQUqUel3KeNj/Sf+vu89fQ/Kt/AQrSLnmpZyrtkeuL+xRqXoJHfX7fjem3RagmVwfp5QMweSDaEsfS1mM72wmn0th92dWJPamrlSwsK5S91GU4R/RLdamb3xzEWZEhFQ2lNEEzcH7+7PkgUVvvEEi2+cDha4AuFImrHrPqvhvNii9LKsq4AblAIX2eyoNk10xYdE= 16 | before_install: 17 | - echo -e "Host github.com\n\tStrictHostKeyChecking no\n" >> ~/.ssh/config 18 | - openssl aes-256-cbc -K $encrypted_7679637290e0_key -iv $encrypted_7679637290e0_iv -in travis_key.enc -out .travis_rsa -d 19 | - cp .travis_rsa ~/.ssh/id_rsa 20 | - chmod 600 ~/.ssh/id_rsa 21 | install: 22 | - nvm install $NODEJS_VER 23 | - nvm use $NODEJS_VER 24 | - npm run setup 25 | script: 26 | - npm test 27 | cache: 28 | directories: 29 | - vendor/bundle 30 | - node_modules 31 | after_success: 32 | - '[ "$TRAVIS_BRANCH" == "master" ] && [ "${TRAVIS_PULL_REQUEST}" = "false" ] && [ "$GH_TOKEN" ] && npm run deploy' 33 | -------------------------------------------------------------------------------- /Gemfile: -------------------------------------------------------------------------------- 1 | source 'https://rubygems.org' 2 | 3 | gem 'review' 4 | gem 'epub_validator' 5 | -------------------------------------------------------------------------------- /Gemfile.lock: -------------------------------------------------------------------------------- 1 | GEM 2 | remote: https://rubygems.org/ 3 | specs: 4 | epub_validator (1.1.0) 5 | review (2.0.0) 6 | rubyzip 7 | rubyzip (1.2.0) 8 | 9 | PLATFORMS 10 | ruby 11 | 12 | DEPENDENCIES 13 | epub_validator 14 | review 15 | 16 | BUNDLED WITH 17 | 1.11.2 18 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | ## ソースコード（ライブラリ以外） 2 | 3 | The MIT License (MIT) 4 | 5 | Copyright (c) 2017 Shota Kubota 6 | 7 | Permission is hereby granted, free of charge, to any person obtaining a copy 8 | of this software and associated documentation files (the "Software"), to deal 9 | in the Software without restriction, including without limitation the rights 10 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 11 | copies of the Software, and to permit persons to whom the Software is 12 | furnished to do so, subject to the following conditions: 13 | 14 | The above copyright notice and this permission notice shall be included in all 15 | copies or substantial portions of the Software. 16 | 17 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 18 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 19 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 20 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 21 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 22 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 23 | SOFTWARE. 24 | 25 | ## 文章 26 | 27 | Creative Commons License
Reset CSS friends by O2 Project is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.
Based on a work at Kemono friends. 28 | 29 | ## ライブラリのライセンス 30 | 31 | ### normalize.css 32 | 33 | The MIT License (MIT) 34 | 35 | Copyright © Nicolas Gallagher and Jonathan Neal 36 | 37 | Permission is hereby granted, free of charge, to any person obtaining a copy of 38 | this software and associated documentation files (the "Software"), to deal in 39 | the Software without restriction, including without limitation the rights to 40 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies 41 | of the Software, and to permit persons to whom the Software is furnished to do 42 | so, subject to the following conditions: 43 | 44 | The above copyright notice and this permission notice shall be included in all 45 | copies or substantial portions of the Software. 46 | 47 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 48 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 49 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 50 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 51 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 52 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 53 | SOFTWARE. 54 | 55 | ### ress 56 | 57 | The MIT License (MIT) 58 | 59 | Copyright © 2016 Filipe Linhares 60 | 61 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 62 | 63 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 64 | 65 | THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 66 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Reset CSSフレンズ 2 | 3 | [![Build Status](https://travis-ci.org/o2project/reset-css-friends.svg?branch=master)](https://travis-ci.org/o2project/reset-css-friends) 4 | 5 | Reset CSSフレンズは、Reset CSSについてくわしくかくほんだよー！ 6 | 7 | ## いぞんするもの 8 | 9 | RedPenっていうかいたものを校正？するものをダウンロードするために[jq](https://stedolan.github.io/jq/)に依存？しているんだって。 10 | [Download jq](https://stedolan.github.io/jq/download/)をよんで、ダウンロードをしてねー！ 11 | 12 | ## じゅんび 13 | 14 | ```shell 15 | npm run setup 16 | ``` 17 | 18 | ## RedPenによるてすと 19 | 20 | ```shell 21 | npm test 22 | ``` 23 | 24 | ## ぶらうざでみる 25 | 26 | ```shell 27 | npm run web 28 | open articles/book/index.html 29 | ``` 30 | 31 | ## PDFをしゅつりょくする 32 | 33 | TeXのインストールをしないといけないんだって。なんだかたいへんそー！ 34 | 35 | ```shell 36 | npm run pdf 37 | ``` 38 | -------------------------------------------------------------------------------- /articles/catalog.yml: -------------------------------------------------------------------------------- 1 | PREDEF: 2 | - index.re 3 | 4 | CHAPS: 5 | - ch01.re 6 | - ch02.re 7 | - ch03.re 8 | 9 | POSTDEF: 10 | - credit.re 11 | -------------------------------------------------------------------------------- /articles/ch01.re: -------------------------------------------------------------------------------- 1 | = Reset CSSとは何か 2 | 3 | ここからReset CSSについて解説するよ！かばんちゃんから教えてもらったことを、できるだけ分かりやすく私が教えるからね！ 4 | 5 | Reset CSSっていうのは、Webページを読み込んだときに既定で適用されるスタイル@{user-agent-stylesheet}をリセットするものだよ！ 6 | 7 | @{Hard reset}っていう「ユニバーサル（全称）セレクタを使ってすべてのmarginとpaddingを0にする」ところから始まったんだよ！（@{hard-reset-css}） 8 | そこから今までさまざまなReset CSSのフレンズが生まれたんだって！すっごーい！ 9 | //footnote[user-agent-stylesheet][ユーザーエージェントスタイルシートとも呼ばれます] 10 | 11 | //list[hard-reset-css][初期のReset CSSであるHard reset]{ 12 | #@mapfile(../codes/reset-css/hard-reset.css) 13 | * { 14 | margin: 0; 15 | padding: 0; 16 | } 17 | #@end 18 | //} 19 | 20 | == なぜReset CSSはユーザーエージェントスタイルシートを上書きできるか 21 | 22 | Reset CSSはユーザーエージェントスタイルシートの宣言を上書きすることで、既定で適用されるスタイルをリセットしているんだよ！ 23 | なんでリセットできるかって？それはスタイル宣言がされたちほー（オリジン）によって適用されるスタイルの優先順位があるためなんだって。 24 | よくわかんないけど、CSS Cascading and Inheritance Level 3（@{https://www.w3.org/TR/css-cascade-3/#cascading}）から優先順位を引用すると次のとおりみたい。 25 | 26 | 1. transitionの宣言 27 | 1. !important付きのユーザーエージェントスタイルシートでの宣言 28 | 1. !important付きの利用者による宣言 29 | 1. !important付きの上書き宣言 30 | 1. !important付きの作者による宣言 31 | 1. animationの宣言 32 | 1. 上書き宣言 33 | 1. 作者による宣言 34 | 1. 利用者による宣言 35 | 1. ユーザーエージェントスタイルシートでの宣言 36 | 37 | たとえばユーザーエージェントスタイルシートの宣言より、HTMLファイルからリンクされたCSS内の宣言が優先されるんだって。 38 | だからユーザーエージェントスタイルシートのスタイル宣言を上書きできるんだよー！ 39 | …うー、ボスー！ちょっとよく分かんないよー！ 40 | 41 | == なぜReset CSSを使うのか 42 | 43 | Reset CSSを使うのは、ブラウザが既定で読み込むユーザーエージェントスタイルシートがブラウザ間で違いがあるからなんだよ！ 44 | たとえば@{h1}要素と@{p}要素だけ書いたHTMLをブラウザで見てみるよ。 45 | 46 | するとFirefoxはセリフ@{font-serif}がないフォントだけど（@{firefox-font}）、Safariはセリフがあるフォントだよ（@{safari-font}）。ふっしぎー！ 47 | //footnote[font-serif][文字の線の端にある小さな飾りのことです] 48 | 49 | //image[firefox-font][Firefoxでプレビューしたときの見た目]{ 50 | //} 51 | 52 | //image[safari-font][Safariでプレビューしたときの見た目]{ 53 | //} 54 | 55 | こんな感じで単純なHTMLにも見た目に違いはあるんだよ！ブラウザによって得意なことは違うからなんらかのReset CSSライブラリを使うか自分で違いを吸収する必要があるんだってー！ 56 | 57 | == Reset CSSを使わない場面 58 | 59 | Reset CSSを使うのは、ブラウザが既定で適用するスタイルがブラウザ間で違いがあるからだけど、@{NW.js}？や@{Electron}？みたいな@{Chromium}？しか無いちほーではReset CSSを使わなくていいんだって！ 60 | -------------------------------------------------------------------------------- /articles/ch02.re: -------------------------------------------------------------------------------- 1 | = Reset CSSの特色 2 | 3 | Reset CSSは2004年に生まれて数多くのReset CSSが生まれてきたであります。 4 | Reset CSSは年代によって思想や宣言されているスタイルが少しずつ変わっているでありますよ。 5 | ここでは有名なReset CSSを7個見ていくでありますよー！うおー！ 6 | 7 | == Hard reset 8 | 9 | Hard resetは2004年に発表された、おそらく最初のReset CSSであります@{fight-the-power-default}！最初のReset CSSだけあって単純であります（@{hard-reset}）。 10 | 11 | //list[hard-reset][Hard reset]{ 12 | #@mapfile(../codes/reset-css/hard-reset.css) 13 | * { 14 | margin: 0; 15 | padding: 0; 16 | } 17 | #@end 18 | //} 19 | 20 | Hard resetという名は「A Comprehensive Guide to CSS Resets@{a-comprehensive-guide-to-css-resets}」という記事で出てきたであります。 21 | 当時の状況はよく分からないので、ここからはわたしの勘によって書くでありますよー！ 22 | #@# prh:disable 23 | //footnote[fight-the-power-default][https://web.archive.org/web/20150905184045/http://leftjustified.net/journal/2004/10/07/css-negotiation/] 24 | //footnote[a-comprehensive-guide-to-css-resets][http://sixrevisions.com/css/a-comprehensive-guide-to-css-resets/] 25 | 26 | Hard resetが発表されたときは、ブラウザ間で@{margin}や@{padding}の値に差があることに関心があったようであります。 27 | そのためユニバーサルセレクタで@{margin}と@{padding}を@{0}にして、ブラウザ間の@{margin}や@{padding}の値に差があるのを無かったことにしたようでありますよ。 28 | 29 | == Eric Meyer's Reset CSS 30 | 31 | Eric MeyerというCSSへ対しとても貢献している人がいるであります。Eric Meyerの実績はすごいでありますよ！@{eric-meyer-linkedin} 32 | 33 | * オライリーから出版された@{CSS: The Definitive Guide}@{css-the-definitive-guide}（日本語版は@{CSS完全ガイド}@{css-complete-guide}）を執筆 34 | * 上記の本以外にも多数の本を執筆@{eric-meyer-biblio} 35 | * css-discuss.orgの立ち上げ@{css-discuss} 36 | * スライドショー用のファイルフォーマット@{S5}を考案@{s5} 37 | * Netscape DevEdgeやCase Western Reserve University、Encyclopedia of Cleveland Historyのプロジェクトリーダーとデザイナーだった 38 | 39 | #@# prh:disable 40 | //footnote[eric-meyer-linkedin][https://www.linkedin.com/in/meyerweb/] 41 | //footnote[css-the-definitive-guide][http://shop.oreilly.com/product/9780596527334.do] 42 | //footnote[css-complete-guide][https://www.oreilly.co.jp/books/487311232X/] 43 | //footnote[eric-meyer-biblio][https://en.wikipedia.org/wiki/Eric_A._Meyer#Bibliography] 44 | //footnote[css-discuss][http://www.css-discuss.org/] 45 | #@# prh:disable 46 | //footnote[s5][https://en.wikipedia.org/wiki/S5_(file_format)] 47 | 48 | 最近ではその功績にコミュニティが敬意を払って、6歳で亡くなってしまった娘の名前をCSSの色名@{beccapurple}として追加しようと提案されたであります@{becca-purple}。 49 | そして本人と亡くなってしまった娘の要望@{rebecca-purple}によって、@{rebeccapurple}としてCSS Color Module Level 4@{css-color-module-level-4}に追加されたであります！すごいであります！ 50 | //footnote[becca-purple][https://discourse.wicg.io/t/name-663399-becca-purple-in-css4-color/225] 51 | #@# prh:disable 52 | //footnote[rebecca-purple][http://meyerweb.com/eric/thoughts/2014/06/19/rebeccapurple/] 53 | //footnote[css-color-module-level-4][https://drafts.csswg.org/css-color/#named-colors] 54 | 55 | そのEric MeyerがHard resetの問題点を踏まえた上で作ったReset CSSがEric Meyer's Reset CSSであります。 56 | Hard resetの問題点は次の2点であります。これらの問題を解決するためにそれぞれの要素ごとにリセットしたのがEric Meyer's Reset CSSであります！ 57 | 58 | * ユニバーサルセレクタを使って@{margin}や@{padding}を@{0}にするやり方がフォーム関連の要素に対してどういった影響があるか分からない 59 | * @{margin}や@{padding}を@{0}にするだけでなく、フォントに関わる一貫したスタイル宣言をしたい 60 | 61 | #@# prh:disable 62 | Eric Meyer's Reset CSSのソースコードは@{http://meyerweb.com/eric/tools/css/reset/}であります！ 63 | 64 | == YUI 3 Reset CSS 65 | 66 | Yahoo!が主に開発していたYUI libraryに含まれるReset CSSであります！ 67 | ちなみにYUI 3はこれからメンテナンスをおこなわないというアナウンスをしているのであります@{yui-deprecate}。 68 | //footnote[yui-deprecate][https://yahooeng.tumblr.com/post/96098168666/important-announcement-regarding-yui] 69 | 70 | 他のReset CSSに無いものとして、html要素に対し@{color}プロパティや@{background}プロパティが宣言されているでありますよ。 71 | ただYUI 2からReset CSSはほぼ更新されていない@{yui2-2008-1}@{yui2-2008-2}であります。なのでHTML5で追加された要素の宣言は無いであります@{yui2-reset}。 72 | //footnote[yui2-2008-1][YUI 2のReset CSSを見てみると2008年から内容がほぼ変わっていないであります] 73 | //footnote[yui2-2008-2][https://github.com/yui/yui2/blob/324b3755ea4f3ac643572eb839d85c09801aac5f/build/reset/reset.css] 74 | //footnote[yui2-reset][https://github.com/yui/yui2/blob/master/src/reset/css/reset.css] 75 | 76 | == HTML5 Doctor Reset CSS 77 | 78 | HTML5を使った開発について発信していた@{HTML5 Doctor}で発表されたReset CSSであります！ 79 | HTML5 Doctor Reset CSSのソースコードは@{http://html5doctor.com/html-5-reset-stylesheet/}であります！ 80 | 81 | HTML5 Doctor Reset CSSはEric Meyer's Reset CSSのv1.0を元に作られたものでありますよ。 82 | Eric Meyer's Reset CSSのv1.0は作られた時期が2008年2月12日なので、HTML5で追加された要素のスタイル宣言がなかったであります。 83 | HTML5 Doctor Reset CSSはそこにHTML5で追加された要素のスタイル宣言を追加しているであります。他にもいろんな要素に独自のスタイル宣言をしているであります！ 84 | 85 | ちょっと眠くなったので、ここからはビーバー殿にまかせてわたしは寝るであります。 86 | 87 | == normalize.css 88 | 89 | プレーリーさんが寝てしまったのでここからはおれっちが説明するっす。 90 | 91 | normalize.cssはそれまでのReset CSSに代わるReset CSSとして出てきたっす。 92 | それまでのReset CSSはブラウザが既定で適用するスタイルをほぼすべてリセットしていたっす。 93 | 94 | normalize.cssは今までと違ってブラウザが適用するスタイルで使えそうなものは残しているっす。 95 | あとで説明する@{sanitize.css}や@{ress}と違って、作者の意見が無くて純粋にブラウザのスタイルを正規化しているっす@{normalize-v5}。 96 | //footnote[normalize-v5][v5.0.0まではスタイル宣言に作者の意見が含まれていたのですが、v6.0.0でそれらがすべて取り除かれたっす] 97 | 98 | ソースコードにはなぜその宣言をしたか書かれているので読むだけでも勉強になるっす。 99 | 100 | == sanitize.css 101 | 102 | normalize.cssをNicolas Gallagherとともに作ったJonathan Nealが作ったReset CSSっす。 103 | Eric Meyer's Reset CSSやnormalize.cssなどを元に多くの人が書いたスタイル宣言を含んだのがsanitize.cssっすね。 104 | たとえばhtml要素に@{box-sizing: border-box;}を宣言して、ユニバーサルセレクタで@{box-sizing: inherit;}を宣言しているっす（@{sanitize-html}）。 105 | こうすることで特定の要素に対してwidthやheightを宣言するときに値の計算がしやすくなるっす。 106 | 107 | //list[sanitize-html][sanitize.cssのhtml要素に対する宣言]{ 108 | #@mapfile(../codes/reset-css/sanitize-css/html.css) 109 | /** 110 | * 1. Remove repeating backgrounds in all browsers (opinionated). 111 | * 2. Add box sizing inheritence in all browsers (opinionated). 112 | */ 113 | 114 | *, 115 | ::before, 116 | ::after { 117 | background-repeat: no-repeat; /* 1 */ 118 | box-sizing: inherit; /* 2 */ 119 | } 120 | 121 | /** 122 | * 1. Add border box sizing in all browsers (opinionated). 123 | * 2. Add the default cursor in all browsers (opinionated). 124 | * 3. Prevent font size adjustments after orientation changes in IE and iOS. 125 | */ 126 | 127 | html { 128 | box-sizing: border-box; /* 1 */ 129 | cursor: default; /* 2 */ 130 | -ms-text-size-adjust: 100%; /* 3 */ 131 | -webkit-text-size-adjust: 100%; /* 3 */ 132 | } 133 | #@end 134 | //} 135 | 136 | == ress 137 | 138 | 最後は@{A modern CSS reset}と名乗るressっすね。 139 | ressはnormalize.cssの宣言を引き継ぎつつ、Hard resetのようにユニバーサルセレクタを使ってすべての要素に対し@{margin}や@{padding}を@{0}にしているっす。 140 | またsanitize.cssと同じくすべての要素に対して@{box-sizing: border-box;}を宣言しているっす。こうする利点はsanitize.cssの説明を読んでほしいっす。 141 | フォームに関連する要素も@{A modern CSS reset}と名乗るとおり、大胆にユーザーエージェントスタイルシートの宣言をリセットしているっす。 142 | -------------------------------------------------------------------------------- /articles/ch03.re: -------------------------------------------------------------------------------- 1 | = Reset CSSでどのような宣言がされているか 2 | 3 | われわれはかしこいのでReset CSSでどのような宣言があるか教えるです。その前に教えてほしければ料理をよこすのです。 4 | 5 | …満腹、満足です。解説が終わったらおかわりをよこすのです。 6 | 7 | ブラウザがWeb上のページを読み込むときに既定で適用されるスタイルとして、@{ユーザーエージェントスタイルシート}があるです。 8 | ユーザーエージェントスタイルシートの内容はブラウザごとに次のURLで見られるのです。 9 | 10 | #@# prh:disable 11 | * Chrome: @{https://chromium.googlesource.com/chromium/blink/+/master/Source/core/css/html.css} 12 | * Firefox: @{https://dxr.mozilla.org/mozilla-central/source/layout/style/res/html.css} 13 | * Safari: @{http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css} 14 | 15 | Reset CSSはユーザーエージェントスタイルシートの宣言をリセットするためにあるです。 16 | これからReset CSSのスタイル宣言を一部ユーザーエージェントスタイルシートでの宣言も教えつつ見ていくのです。 17 | ちなみに解説するHTMLの要素は（@{explain-elements}）のみに絞るです。 18 | 19 | //list[explain-elements][解説するHTML要素一覧]{ 20 | html, body, img, 21 | ul, ol, li, 22 | table, tr, td, 23 | h1, p, a, blockquote, br, 24 | section, article, nav, aside, 25 | input, textarea, button, select 26 | //} 27 | 28 | == html要素 29 | 30 | まずはhtml要素です。ChromeとSafariでは@{display: block;}の宣言だけなのです。 31 | Firefoxでは@{display: block;}以外にも、@{unicode-bidi: isolate;}という複数の表記方向が混ざる文章をどのように扱うか決める宣言もされているのです。 32 | @{unicode-bidi}プロパティの値が表示にどう影響をあたえるかは「CSS: unicode-bidi プロパティ - Unicode文字の表記方向@{unicode-bidi}」を見るです。 33 | //footnote[unicode-bidi][http://www.osaka-kyoiku.ac.jp/~joho/html5_ref/css/unicode-bidi_css.php] 34 | 35 | sanitize.cssとressは、html要素へ対し@{box-sizing: border-box;}を宣言した上で、ユニバーサルセレクタへ@{box-sizing: inherit;}を宣言しているです。 36 | これでコンテンツ領域に@{padding}や@{border}の値が入るようになるのです。これでボックスサイズの計算がより簡単になるのです。 37 | 38 | == body要素 39 | 40 | body要素はChrome・Firefox・Safariで同じスタイル宣言なのです（@{body-element}）。 41 | 42 | //list[body-element][body要素に対するスタイル定義]{ 43 | #@mapfile(../codes/browser/body.css) 44 | body { 45 | display: block; 46 | margin: 8px; 47 | } 48 | #@end 49 | //} 50 | 51 | @{margin: 8px;}の宣言は多くのWebサイトでいらない宣言なので、Reset CSSで@{margin: 0;}と宣言されることが多いのです。 52 | @{margin: 0;}と宣言しているReset CSSはEric Meyer's Reset CSS、sanitize.css、YUI 3 Reset CSSがあるです。 53 | normalize.cssもv5.0.0まではbody要素に同じ宣言があったです。v6.0.0で削除されて何もなくなったのです。 54 | 55 | == セクショニング・コンテンツとh1要素 56 | 57 | h1要素は見出しを表す要素の中でもっともランクが高い要素です。 58 | section要素やarticle要素といったセクショニング・コンテンツへh1要素を入れ子した場合は、深さに応じてスタイルが変わるのです（@{h1-element}）。 59 | 60 | //list[h1-element][h1要素に対するスタイル定義]{ 61 | #@mapfile(../codes/browser/h1.css) 62 | /* Chrome, Safari */ 63 | h1 { 64 | display: block; 65 | font-size: 2em; 66 | -webkit-margin-before: 0.67__qem; 67 | -webkit-margin-after: 0.67em; 68 | -webkit-margin-start: 0; 69 | -webkit-margin-end: 0; 70 | font-weight: bold 71 | } 72 | :-webkit-any(article,aside,nav,section) h1 { 73 | font-size: 1.5em; 74 | -webkit-margin-before: 0.83__qem; 75 | -webkit-margin-after: 0.83em; 76 | } 77 | :-webkit-any(article,aside,nav,section) :-webkit-any(article,aside,nav,section) 78 | h1 { 79 | font-size: 1.17em; 80 | -webkit-margin-before: 1__qem; 81 | -webkit-margin-after: 1em; 82 | } 83 | 84 | /* Firefox */ 85 | h1 { 86 | display: block; 87 | font-size: 2em; 88 | font-weight: bold; 89 | margin-block-start: .67em; 90 | margin-block-end: .67em; 91 | } 92 | 93 | h2, 94 | :-moz-any(article, aside, nav, section) 95 | h1 { 96 | display: block; 97 | font-size: 1.5em; 98 | font-weight: bold; 99 | margin-block-start: .83em; 100 | margin-block-end: .83em; 101 | } 102 | 103 | h3, 104 | :-moz-any(article, aside, nav, section) 105 | :-moz-any(article, aside, nav, section) 106 | h1 { 107 | display: block; 108 | font-size: 1.17em; 109 | font-weight: bold; 110 | margin-block-start: 1em; 111 | margin-block-end: 1em; 112 | } 113 | #@end 114 | //} 115 | 116 | normalize.cssやsanitize.cssでは入れ子の深さによってスタイルが変わるのを無くしているです（@{h1-normalize}）。 117 | 118 | //list[h1-normalize][h1要素に対するnormalize.cssやsanitize.cssのスタイル定義]{ 119 | #@mapfile(../codes/reset-css/normalize-css/h1.css) 120 | /** 121 | * Correct the font size and margin on `h1` elements within `section` and 122 | * `article` contexts in Chrome, Firefox, and Safari. 123 | */ 124 | 125 | h1 { 126 | font-size: 2em; 127 | margin: 0.67em 0; 128 | } 129 | #@end 130 | //} 131 | 132 | YUI 3 Reset CSSやEric Meyer's Reset CSSでは見出しらしいスタイルをすべて無くしているのです（@{h1-yui3}）。 133 | 134 | //list[h1-yui3][h1要素に対するYUI 3 Reset CSSやEric Meyer's Reset CSSのスタイル定義]{ 135 | #@mapfile(../codes/reset-css/yui3/h1.css) 136 | h1 { 137 | margin:0; 138 | padding:0; 139 | font-size:100%; 140 | font-weight:normal; 141 | } 142 | #@end 143 | //} 144 | 145 | == p要素 146 | 147 | Firefoxでは文字のレイアウト方向や向き、文字が流れる方向を元にmarginを適用する@{margin-block-start}や@{margin-block-end}を宣言しているです。 148 | CSSのプロパティはそれぞれ、文字のレイアウト方向は@{writing-mode}、文字の向きは@{text-orientation}、文字の流れる方向は@{direction}に対応しているのです。 149 | ChromeやSafariでは@{margin-before}や@{margin-after}といったプロパティが宣言されて、値に@{1__qem}が指定されているのです。 150 | 互換性モードで表示するときに@{margin}の相殺をおこなわないためなのです。 151 | 152 | YUI 3 Reset CSSやEric Meyer's Reset CSSなど古めのReset CSSでは@{margin}と@{padding}が0になっているのです。 153 | 新しいReset CSSでは特に宣言がないのです。これは新しく縦書きという概念が出てきたので、Reset CSSで文字の方向や向き、流れる方向を意識しだしたからです。 154 | 結果としてユーザーエージェントスタイルシートをそのまま使ったほうがいいとなったのです。 155 | 156 | == a要素 157 | 158 | a要素は各ブラウザのユーザーエージェントスタイルシートではスタイル宣言がないのです。 159 | normalize.cssやsanitize.css、ressではIEとSafari向けのスタイル宣言をしているです（@{a-reset}）。 160 | 161 | //list[a-reset][a要素に対するReset CSSのスタイル定義]{ 162 | #@mapfile(../codes/reset-css/a-reset.css) 163 | /** 164 | * 1. Remove the gray background on active links in IE 10. 165 | * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. 166 | */ 167 | 168 | a { 169 | background-color: transparent; /* 1 */ 170 | -webkit-text-decoration-skip: objects; /* 2 */ 171 | } 172 | #@end 173 | //} 174 | 175 | @{background-color: transparent;}が宣言されているのは、IE 10でリンクをクリックしたときにグレーの背景がついてしまうのを防ぐためです。 176 | @{-webkit-text-decoration-skip: objects;}という宣言は、英語やロシア語という言葉の一部文字をリンクの文字に指定したとき、下線が途切れてしまうのを防ぐためなのです@{normalize-issue-573}。 177 | //footnote[normalize-issue-573][https://github.com/necolas/normalize.css/pull/573] 178 | 179 | == img要素 180 | 181 | img要素はiOSのSafariでタップしたときにハイライトを適用しないようにしているのです（@{img-safari}）。 182 | 183 | //list[img-safari][img要素に対するSafariのスタイル定義]{ 184 | #@mapfile(../codes/browser/safari/img.css) 185 | #if defined(WTF_PLATFORM_IOS) && WTF_PLATFORM_IOS 186 | img { 187 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 188 | } 189 | :any-link img { 190 | -webkit-tap-highlight-color: inherit; 191 | } 192 | #endif 193 | #@end 194 | //} 195 | 196 | normalize.cssやsanitize.css、ressではIE 10でリンク内に画像があるとborderが適用されるのを防ぐため、@{border-style: none;}が宣言されているです（@{img-normalize}）。 197 | 198 | //list[img-normalize][img要素に対する各種Reset CSSのスタイル定義]{ 199 | #@mapfile(../codes/reset-css/normalize-css/img.css) 200 | /** 201 | * Remove the border on images inside links in IE 10-. 202 | */ 203 | 204 | img { 205 | border-style: none; 206 | } 207 | #@end 208 | //} 209 | 210 | == ul, ol要素 211 | 212 | ulやol要素はFirefoxやChrome、Safariで@{論理margin}と@{論理padding}が宣言されているです（@{ul-firefox}）。 213 | 214 | //list[ul-firefox][ul要素に対するSafariのスタイル定義]{ 215 | #@mapfile(../codes/browser/firefox/ul.css) 216 | ul { 217 | display: block; 218 | list-style-type: disc; 219 | margin-block-start: 1em; 220 | margin-block-end: 1em; 221 | padding-inline-start: 40px; 222 | } 223 | #@end 224 | //} 225 | 226 | ulやol要素が入れ子になったとき、FirefoxとChrome、Safariで宣言しているプロパティは同じなのですが、セレクタの宣言方法が違うのです。 227 | Firefoxでは@{:any()}という疑似クラスを使って、ulやol要素などが入れ子になったときのスタイル宣言をおこなっているです@{mdn-any-pseudo-class}（@{ul-nested-firefox}）。 228 | @{:any()}擬似クラスは、@{CSS Selectors Level 4}では@{:matches()}として仕様策定が進んでいるのです@{css-selectors-4-matches}。 229 | //footnote[mdn-any-pseudo-class][https://developer.mozilla.org/ja/docs/Web/CSS/:any] 230 | //footnote[css-selectors-4-matches][https://drafts.csswg.org/selectors-4/#matches] 231 | 232 | //list[ul-nested-firefox][入れ子になったul要素に対するFirefoxのスタイル定義]{ 233 | #@mapfile(../codes/browser/firefox/ul-nested.css) 234 | /* nested lists have no top/bottom margins */ 235 | :-moz-any(ul, ol, dir, menu, dl) ul, 236 | :-moz-any(ul, ol, dir, menu, dl) ol { 237 | margin-block-start: 0; 238 | margin-block-end: 0; 239 | } 240 | 241 | /* 2 deep unordered lists use a circle */ 242 | :-moz-any(ol, ul, menu, dir) ul { 243 | list-style-type: circle; 244 | } 245 | 246 | /* 3 deep (or more) unordered lists use a square */ 247 | :-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) ul { 248 | list-style-type: square; 249 | } 250 | #@end 251 | //} 252 | 253 | ただ@{:any()}や@{:matches()}の仕様が固まっていないので、ChromeやSafariでは従来どおりの子孫セレクタを使った宣言になっているです（@{ul-nested-chrome}）。 254 | 255 | //list[ul-nested-chrome][入れ子になったul要素に対するChromeやSafariのスタイル定義]{ 256 | #@mapfile(../codes/browser/chrome/ul-nested.css) 257 | ul ul, 258 | ol ul { 259 | list-style-type: circle 260 | } 261 | ol ol ul, 262 | ol ul ul, 263 | ul ol ul, 264 | ul ul ul { 265 | list-style-type: square 266 | } 267 | #@end 268 | //} 269 | 270 | sanitize.cssでは、nav要素が親要素のときにulとol要素に@{list-style: none;}の宣言をしているです（@{sanitize-ul-ol}）。 271 | nav要素内にあるulとol要素に@{list-style}の値はあまり宣言しないので、このような宣言になっているです。 272 | 273 | //list[sanitize-ul-ol][sanitize.cssのulやol要素に対するスタイル宣言]{ 274 | #@mapfile(../codes/reset-css/sanitize-css/ul-ol.css) 275 | /** 276 | * Remove the list style on navigation lists in all browsers (opinionated). 277 | */ 278 | 279 | nav ol, 280 | nav ul { 281 | list-style: none; 282 | } 283 | #@end 284 | //} 285 | 286 | == table要素 287 | 288 | Firefoxでtable要素の非推奨となった属性にスタイル宣言をしているのが面白いのです。 289 | たとえば@{align}や@{frame}、@{rules}が挙げられるです（@{table-firefox-1}）。 290 | 291 | //list[table-firefox-1][Firefoxで宣言されている非推奨の属性に対してのスタイル宣言（一部）]{ 292 | #@mapfile(../codes/browser/firefox/table-1.css) 293 | table[align="left"] { 294 | float: left; 295 | } 296 | 297 | table[align="right"] { 298 | float: right; 299 | text-align: start; 300 | } 301 | 302 | table[rules] { 303 | border-width: thin; 304 | border-style: hidden; 305 | } 306 | #@end 307 | //} 308 | 309 | 他にもFirefoxだけ@{-moz-is-html}という擬似クラスのようなセレクタ宣言があるです（@{table-firefox-2}）。 310 | この宣言は何が起こるのか謎なのです。かしこいわれわれでも分からないことはあるのです@{form-firefox}。 311 | //footnote[form-firefox][https://jsfiddle.net/f3rp4kmu/] 312 | 313 | //list[table-firefox-2][-moz-is-htmlという謎の擬似クラスっぽいセレクタ]{ 314 | #@mapfile(../codes/browser/firefox/table-2.css) 315 | tr > form:-moz-is-html, tbody > form:-moz-is-html, 316 | thead > form:-moz-is-html, tfoot > form:-moz-is-html, 317 | table > form:-moz-is-html { 318 | /* Important: don't show these forms in HTML */ 319 | display: none !important; 320 | } 321 | #@end 322 | //} 323 | 324 | sanitize.cssでは@{border-collapse: collapse;}の宣言があるです（@{sanitize-table}）。 325 | これによってtableの@{border}がセル同士で共有されるです。セル同士をくっつけて表示したいときは便利なのです。 326 | 327 | //list[sanitize-table][sanitize.cssのtable要素に対する宣言]{ 328 | #@mapfile(../codes/reset-css/sanitize-css/table.css) 329 | /** 330 | * Collapse border spacing 331 | */ 332 | 333 | table { 334 | border-collapse: collapse; 335 | } 336 | #@end 337 | //} 338 | 339 | @{border-collapse}の値が表示へどのように影響するのかは@{table-border-collapse}で示すとおりなのです。 340 | 341 | //image[table-border-collapse][border-collapseの宣言によって表示が変わる]{ 342 | //} 343 | 344 | == blockquote要素 345 | 346 | blockquote要素はFirefoxで@{[type=cite]}という属性へスタイル宣言があるのです（@{blockquote-firefox}）。 347 | この属性はいまW3Cの仕様には無いですが、過去にはあってFirefoxではいい感じの見た目になるのです（@{firefox-blockquote-type-cite}）。 348 | 349 | //list[blockquote-firefox][blockquote要素に対してのスタイル宣言]{ 350 | #@mapfile(../codes/browser/firefox/blockquote.css) 351 | blockquote { 352 | display: block; 353 | margin-block-start: 1em; 354 | margin-block-end: 1em; 355 | margin-inline-start: 40px; 356 | margin-inline-end: 40px; 357 | } 358 | 359 | blockquote[type=cite] { 360 | display: block; 361 | margin-block-start: 1em; 362 | margin-block-end: 1em; 363 | margin-inline-start: 0; 364 | margin-inline-end: 0; 365 | padding-inline-start: 1em; 366 | border-inline-start: solid; 367 | border-color: blue; 368 | border-width: thin; 369 | } 370 | #@end 371 | //} 372 | 373 | //image[firefox-blockquote-type-cite][Firefoxでblockquote[type="cite"\]をプレビューしてみた様子]{ 374 | //} 375 | 376 | Eric Meyer's Reset CSSでは、blockquoteやq要素で引用符を消すスタイル宣言があるです（@{eric-meyers-blockquote}）。 377 | 378 | //list[eric-meyers-blockquote][Eric Meyer's Reset CSSのblockquote要素に対するスタイル宣言]{ 379 | #@mapfile(../codes/reset-css/eric-meyers-blockquote.css) 380 | blockquote, q { 381 | quotes: none; 382 | } 383 | blockquote:before, blockquote:after, 384 | q:before, q:after { 385 | content: ''; 386 | content: none; 387 | } 388 | #@end 389 | //} 390 | 391 | == input要素 392 | 393 | input要素はtype属性の値によって動きが大きく変わるのです（@{input-types}）。まるでパンサーカメレオンのようなのです。 394 | input要素関連のスタイル宣言はChromeのユーザーエージェントスタイルシートで1123行中295行、Safariは1221行中421行も充てられているのです@{safari-user-agent-stylesheet-line}。 395 | Firefoxは895行中24行がinput要素関連のスタイル宣言に充てられているです。 396 | //footnote[safari-user-agent-stylesheet-line][SafariはiOS向けのスタイル宣言もあるので行数が多いかもしれないです] 397 | 398 | //image[input-types][input要素はtype属性の値によって挙動が大きく変わる]{ 399 | //} 400 | 401 | Reset CSSのinput要素に対する宣言はnormalize.css、sanitize.css、ressそれぞれで似ていますが微妙に違うのです。 402 | それぞれのライブラリでどのように宣言されているか解説していくです。 403 | 404 | ==={input-normalize} normalize.css 405 | 406 | normalize.cssはブラウザ間の違いをなくす宣言だけなのです（@{normalize-input}）。 407 | これもv6.0.0から作者の意見を入れないようにしたnormalize.cssの特徴が示されているのです。 408 | 409 | //list[normalize-input][あくまでブラウザ間の差異を埋める程度に留めるnormalize.css]{ 410 | #@mapfile(../codes/reset-css/normalize-css/input.css) 411 | /** 412 | * Remove the margin in Firefox and Safari. 413 | */ 414 | 415 | button, 416 | input, 417 | optgroup, 418 | select, 419 | textarea { 420 | margin: 0; 421 | } 422 | 423 | /** 424 | * Show the overflow in IE. 425 | * 1. Show the overflow in Edge. 426 | */ 427 | 428 | button, 429 | input { /* 1 */ 430 | overflow: visible; 431 | } 432 | #@end 433 | //} 434 | 435 | ==={input-sanitize} sanitize.css 436 | 437 | normalize.cssの宣言を元に、@{font-size}や@{line-height}の値として@{inherit}が宣言されているのです（@{sanitize-input}）。 438 | 親要素の宣言を受け継ぐことによって、スタイル宣言することを極力減らすようにしているです。優しいのです。 439 | 440 | //list[sanitize-input][normalize.cssより作者の主張が含まれているsanitize.css]{ 441 | #@mapfile(../codes/reset-css/sanitize-css/input.css) 442 | /** 443 | * Remove the margin in Firefox and Safari. 444 | */ 445 | 446 | button, 447 | input, 448 | optgroup, 449 | select, 450 | textarea { 451 | margin: 0; 452 | } 453 | 454 | /** 455 | * Inherit styling in all browsers (opinionated). 456 | */ 457 | 458 | button, 459 | input, 460 | select, 461 | textarea { 462 | background-color: transparent; 463 | color: inherit; 464 | font-size: inherit; 465 | line-height: inherit; 466 | } 467 | 468 | /** 469 | * Show the overflow in IE. 470 | * 1. Show the overflow in Edge. 471 | */ 472 | 473 | button, 474 | input { /* 1 */ 475 | overflow: visible; 476 | } 477 | #@end 478 | //} 479 | 480 | input要素への宣言として他にないものは@{touch-action: manipulation;}なのです（@{sanitize-fix-tap-delay}）。 481 | ページのスクロールとズームのみを許可する宣言なのですが、IE 10だとタップ時の遅延もなくなるのです。 482 | 483 | //list[sanitize-fix-tap-delay][IE 10でタップ時の遅延を無くすCSS]{ 484 | #@mapfile(../codes/reset-css/sanitize-css/fix-tap-delay.css) 485 | /* 486 | * Remove the tapping delay on clickable elements (opinionated). 487 | * 1. Remove the tapping delay in IE 10. 488 | */ 489 | 490 | a, 491 | area, 492 | button, 493 | input, 494 | label, 495 | select, 496 | summary, 497 | textarea, 498 | [tabindex] { 499 | -ms-touch-action: manipulation; /* 1 */ 500 | touch-action: manipulation; 501 | } 502 | #@end 503 | //} 504 | 505 | ==={input-ress} ress 506 | 507 | ressもsanitize.css、もしくはそれ以上に作者の意見が反映されているのです（@{ress-input}）。 508 | @{[type="button"]}や@{[type="submit"]}、@{[type="search"]}はブラウザのユーザーエージェントスタイルシートで@{border-radius}が適用されているですが、ressでは無かったことになっているです。 509 | 他にも@{background-color}を透過させたり@{border-style}を無くしたり大胆なのです。 510 | 511 | //list[ress-input][normalize.cssと同じく主張が強いress]{ 512 | #@mapfile(../codes/reset-css/ress/input.css) 513 | input { 514 | border-radius: 0; 515 | } 516 | 517 | button, 518 | input, 519 | optgroup, 520 | select, 521 | textarea { 522 | font: inherit; /* Specify font inheritance of form elements */ 523 | } 524 | 525 | /* Remove the default button styling in all browsers */ 526 | button, 527 | input, 528 | select, 529 | textarea { 530 | background-color: transparent; 531 | border-style: none; 532 | color: inherit; 533 | } 534 | #@end 535 | //} 536 | 537 | == select要素 538 | 539 | select要素はChromeとSafariで@{text-transform: none;}の宣言がされているのです。 540 | しかしEdgeとFirefoxでは宣言がないので、normalize.cssとsanitize.cssには同じ宣言があるです（@{normalize-select}）。 541 | 542 | //list[normalize-select][normalize.cssとsanitize.cssではtext-transform: none;の宣言だけ]{ 543 | #@mapfile(../codes/reset-css/normalize-css/select.css) 544 | /** 545 | * Remove the inheritance of text transform in Edge, Firefox, and IE. 546 | * 1. Remove the inheritance of text transform in Firefox. 547 | */ 548 | 549 | button, 550 | select { /* 1 */ 551 | text-transform: none; 552 | } 553 | #@end 554 | //} 555 | 556 | ==={select-ress} ress 557 | 558 | normalize.cssやsanitize.cssと違って自分の道を歩いているのがressなのです。 559 | @{text-transform: none;}も宣言していますが、他にもselect要素らしい見た目を無くす@{appearance}やIE独自の疑似要素へスタイルを宣言しているのです（@{ress-select}）。 560 | @{::-ms-expand}はドロップダウンの項目を見るためのボタンを表す疑似要素で、@{::-ms-value}はselect要素内の文字を表す疑似要素なのです@{ie-pseudo-elements}。 561 | //footnote[ie-pseudo-elements][http://subtech.g.hatena.ne.jp/mayuki/20110923/1316786871] 562 | 563 | //list[ress-select][ressはselect要素でも独自路線]{ 564 | #@mapfile(../codes/reset-css/ress/select.css) 565 | /* Style select like a standard input */ 566 | select { 567 | -moz-appearance: none; /* Firefox 36+ */ 568 | -webkit-appearance: none; /* Chrome 41+ */ 569 | } 570 | 571 | select::-ms-expand { 572 | display: none; /* Internet Explorer 11+ */ 573 | } 574 | 575 | select::-ms-value { 576 | color: currentColor; /* Internet Explorer 11+ */ 577 | } 578 | #@end 579 | //} 580 | 581 | == button要素 582 | 583 | normalize.cssやsanitize.css、ressではWebKitのバグを修正するセレクタ宣言やプロパティと値の宣言をしているです（@{normalize-button}）。 584 | Firefoxでもbutton要素内に画像を置いたときに生まれる@{border}と画像の間にある隙間が埋まるようにしてあるのです@{firefox-form-button}。 585 | #@# prh:disable 586 | //footnote[firefox-form-button][http://jeffreyfrancesco.org/weblog/2011062101/] 587 | 588 | //list[normalize-button][normalize.cssとsanitize.css、ressの共通宣言]{ 589 | @mapfile(../codes/reset-css/normalize-css/button.css) 590 | /** 591 | * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` 592 | * controls in Android 4. 593 | * 2. Correct the inability to style clickable types in iOS and Safari. 594 | */ 595 | 596 | button, 597 | html [type="button"], /* 1 */ 598 | [type="reset"], 599 | [type="submit"] { 600 | -webkit-appearance: button; /* 2 */ 601 | } 602 | 603 | /** 604 | * Remove the inner border and padding in Firefox. 605 | */ 606 | 607 | button::-moz-focus-inner, 608 | [type="button"]::-moz-focus-inner, 609 | [type="reset"]::-moz-focus-inner, 610 | [type="submit"]::-moz-focus-inner { 611 | border-style: none; 612 | padding: 0; 613 | } 614 | 615 | /** 616 | * Restore the focus styles unset by the previous rule. 617 | */ 618 | 619 | button:-moz-focusring, 620 | [type="button"]:-moz-focusring, 621 | [type="reset"]:-moz-focusring, 622 | [type="submit"]:-moz-focusring { 623 | outline: 1px dotted ButtonText; 624 | } 625 | #@#end 626 | //} 627 | 628 | ==={button-ress} ress 629 | 630 | ressはnormalize.cssやsanitize.cssと同じ宣言もあるですが、独自に@{cursor: pointer;}や@{overflow: visible;}が宣言されているです（@{ress-button}）。 631 | @{cursor: pointer;}はユーザーエージェントスタイルシートでカーソルの宣言がないのでressで宣言しているのです。 632 | @{overflow: visible;}はコメントにもあるように、IE8〜11はbutton要素の値として@{hidden}が宣言されているのです。その宣言を無くすために@{overflow: visible;}が宣言されているです。 633 | 634 | //list[ress-button][ressのbutton要素へ対する宣言]{ 635 | #@mapfile(../codes/reset-css/ress/button.css) 636 | /* Apply cursor pointer to button elements */ 637 | button, 638 | [type="button"], 639 | [type="reset"], 640 | [type="submit"], 641 | [role="button"] { 642 | cursor: pointer; 643 | } 644 | 645 | button { 646 | overflow: visible; /* Address `overflow` set to `hidden` in IE 8/9/10/11 */ 647 | } 648 | #@end 649 | //} 650 | 651 | == textarea要素 652 | 653 | textarea要素はnormalize.cssやsanitize.css、ressで似た宣言がされているです。 654 | 655 | ==={textarea-normalize} normalize.css 656 | 657 | normalize.cssの宣言は単純なのです。IE向けにtextarea要素内のスクロールバーを消すだけの宣言だけです（@{normalize-textarea}）。 658 | 659 | //list[normalize-textarea][normalize.cssのtextarea要素へ対する宣言]{ 660 | #@mapfile(../codes/reset-css/normalize-css/textarea.css) 661 | /** 662 | * Remove the default vertical scrollbar in IE. 663 | */ 664 | 665 | textarea { 666 | overflow: auto; 667 | } 668 | #@end 669 | //} 670 | 671 | ==={textarea-sanitize-and-ress} sanitize.cssとress 672 | 673 | sanitize.cssとressは、normalize.cssの宣言に加えてtextarea要素がリサイズできる方向を縦だけにする宣言がされているのです（@{sanitize-and-ress-textarea}）。 674 | 675 | //list[sanitize-and-ress-textarea][sanitize.cssとressのtextarea要素へ対する宣言]{ 676 | #@mapfile(../codes/reset-css/sanitize-css/textarea.css) 677 | /** 678 | * 1. Remove the default vertical scrollbar in IE. 679 | * 2. Change the resize direction on textareas in all browsers (opinionated). 680 | */ 681 | 682 | textarea { 683 | overflow: auto; /* 1 */ 684 | resize: vertical; /* 2 */ 685 | } 686 | #@end 687 | //} 688 | 689 | ==={textarea-yui3} YUI 3 Reset CSS 690 | 691 | #@# prh:disable 692 | 書かれた時期が古いので、IE 7以下で使えるCSSハックが書かれているです（@{yui3-textarea}）。 693 | @{*font-size:100%}という書き方は@ITの「IE 6とIE 7のCSSハック16選」内にある@{アスタリスクハック}@{atmarkit-css}を見るのです。…見なくてもよいのです。 694 | //footnote[atmarkit-css][http://www.atmarkit.co.jp/fwcr/design/benkyo/csshack02/03.html#13] 695 | 696 | //list[yui3-textarea][YUI 3のtextarea要素へ対する宣言]{ 697 | #@mapfile(../codes/reset-css/yui3/textarea.css) 698 | input, 699 | textarea, 700 | select { 701 | font-family:inherit; 702 | font-size:inherit; 703 | font-weight:inherit; 704 | *font-size:100%; /*to enable resizing for IE*/ 705 | } 706 | #@end 707 | //} 708 | 709 | == まとめ 710 | 711 | Reset CSSといってもライブラリによって思想や宣言内容が違うのです。フレンズによって得意なことは違うのです。 712 | その中から自分が作ろうとしているものに適したReset CSSを選ぶのが重要なのです。カレーのスパイスが重要なのと一緒なのです。 713 | 714 | われわれとしては、Eric Meyer's Reset CSSやnormalize.css、sanitize.cssはブラウザ既定の見た目を大幅に上書きしなければ使えるです。 715 | たとえば会社のWebサイトやキャンペーンサイトが挙げられるのです。 716 | 717 | ressは大幅にブラウザ既定の見た目を書き換えたいときに使えるです。たとえばWebアプリやElectronで作るデスクトップアプリなどです。 718 | -------------------------------------------------------------------------------- /articles/config.yml: -------------------------------------------------------------------------------- 1 | # review-epubmaker向けの設定ファイルの例。 2 | # yamlファイルをRe:VIEWファイルのある場所に置き、 3 | # 「review-epubmaker yamlファイル」を実行すると、.epubファイルが 4 | # 生成されます。 5 | # このファイルはUTF-8エンコーディングで記述してください。 6 | 7 | # この設定ファイルでサポートするRe:VIEWのバージョン番号。 8 | # major versionが違うときにはエラーを出す。 9 | review_version: 2.0 10 | 11 | # ブック名(ファイル名になるもの。ASCII範囲の文字を使用) 12 | bookname: book 13 | # 記述言語。省略した場合はja 14 | language: ja 15 | 16 | # 書名 17 | # 読みを入れる例 booktitle: {name: "Re:VIEW EPUBサンプル", file-as: "リビューイーパブサンプル"} 18 | booktitle: Reset CSSフレンズ 19 | 20 | # 著者名。「, 」で区切って複数指定できる 21 | # 読みを入れる例 aut: [{name: "青木峰郎", file-as: "アオキミネロウ"}, {name: "武藤健志", file-as: "ムトウケンシ"}, {name: "高橋征義", file-as: "タカハシマサヨシ"}, {name: "角征典", file-as: "カドマサノリ"}] 22 | aut: O2 Project 23 | edt: kubosho_ 24 | dsr: kino 25 | ill: tomo_e 26 | prt: ねこのしっぽ 27 | 28 | # 刊行日(省略した場合は実行時の日付) 29 | date: 2017-04-09 30 | # 発行年月。YYYY-MM-DD形式による配列指定。省略した場合はdateを使用する 31 | # 複数指定する場合は次のように記述する 32 | # [["初版第1刷の日付", "初版第2刷の日付"], ["第2版第1刷の日付"]] 33 | # 日付の後ろを空白文字で区切り、任意の文字列を置くことも可能。 34 | history: [["2017-04-09"]] 35 | # 権利表記(配列で複数指定可) 36 | rights: (C) 2017 O2 Project 37 | 38 | # デバッグフラグ。nullでないときには一時ファイルをカレントディレクトリに作成し、削除もしない 39 | debug: null 40 | 41 | # 固有IDに使用するドメイン。指定しない場合には、時刻に基づくランダムUUIDが入る 42 | urnid: urn:uid:http://friends.o2p.jp/ 43 | 44 | # Webページ用のディレクトリ指定（既定はwebroot） 45 | docroot: "book" 46 | 47 | # CSSファイル(配列で複数指定可) 48 | stylesheet: ["style.css"] 49 | 50 | # ePUBのバージョン (2か3) 51 | epubversion: 3 52 | 53 | # HTMLのバージョン (4か5。epubversionを3にしたときには5にする) 54 | htmlversion: 5 55 | 56 | # 目次として抽出する見出しレベル 57 | toclevel: 2 58 | 59 | # 採番の設定。採番させたくない見出しには「==[nonum]」のようにnonum指定をする 60 | # 本文でセクション番号を表示する見出しレベル 61 | secnolevel: 2 62 | 63 | # 本文中に目次ページを作成するか。省略した場合はnull (作成しない) 64 | toc: true 65 | 66 | # 表紙にするHTMLファイル。ファイル名を指定すると表紙として入る 67 | # cover: null 68 | 69 | # 裏表紙ファイル (画像はcoversまたはimagesに配置する)。ファイル名を指定すると裏表紙として入る 70 | # backcover: null 71 | 72 | # 表紙に配置し、書籍の影絵にも利用する画像ファイル。省略した場合はnull (画像を使わない)。画像ディレクトリ内に置いてもディレクトリ名は不要(例: cover.jpg) 73 | coverimage: null 74 | 75 | # 奥付を作成するか。デフォルトでは作成されない。trueを指定するとデフォルトの奥付、ファイル名を指定するとそれがcolophon.htmlとしてコピーされる 76 | colophon: true 77 | 78 | # 1ページの行数文字数と1kbごとのページ数を用紙サイズで指定する(A5 or B5)。 79 | page_metric: B5 80 | 81 | epubmaker: 82 | # HTMLファイルの拡張子 83 | htmlext: xhtml 84 | # EPUBで表紙をコンテンツに含めるか。デフォルトでは作成されない。yesにするとiBooks等でも最初に表紙が表示されるようになる 85 | cover_linear: yes 86 | 87 | # LaTeX用のスタイルファイル(styディレクトリ以下に置くこと) 88 | texstyle: techbooster-doujin 89 | 90 | # LaTeX用のdocumentclassを指定する 91 | texdocumentclass: ["jsbook", "b5j,uplatex,twoside,openany"] 92 | 93 | pdfmaker: 94 | colophon: true 95 | 96 | webmaker: 97 | analytics: 98 | google: UA-25380313-9 99 | -------------------------------------------------------------------------------- /articles/credit.re: -------------------------------------------------------------------------------- 1 | = 権利情報 2 | 3 | 次のReset CSSはPublic DomainまたはCC 0ライセンスが適用されています。 4 | 5 | * Eric Meyer's Reset CSS 6 | * sanitize.css 7 | 8 | == MDN 9 | 10 | Licensed under CC-BY-SA 2.5, © 2005-2017 Mozilla Developer Network & Mozilla Contributors. 11 | 12 | @{http://creativecommons.org/licenses/by-sa/2.5/} 13 | 14 | == YUI 3 15 | 16 | The BSD License Copyright, (c) 2013 Yahoo! Inc. All rights reserved. 17 | 18 | @{https://github.com/yui/yui3/blob/master/LICENSE.md} 19 | 20 | == normalize.css 21 | 22 | The MIT License (MIT), Copyright © Nicolas Gallagher and Jonathan Neal. 23 | 24 | @{https://github.com/necolas/normalize.css/blob/master/LICENSE.md} 25 | 26 | == ress 27 | 28 | The MIT License (MIT), Copyright © 2016 Filipe Linhares. 29 | 30 | @{https://github.com/filipelinhares/ress/blob/master/LICENSE.md} 31 | -------------------------------------------------------------------------------- /articles/css/style.scss: -------------------------------------------------------------------------------- 1 | @import "./external/nico/bootstrap"; 2 | 3 | .book-toc { 4 | list-style: none; 5 | margin: 0; 6 | padding: 0; 7 | border-radius: 15px; 8 | 9 | li { 10 | background-color: #fff; 11 | border: solid #ddd; 12 | border-width: 1px 1px 0; 13 | 14 | &:last-child { 15 | border-bottom-width: 1px; 16 | } 17 | 18 | a { 19 | display: block; 20 | padding: 5px 14px; 21 | text-decoration: none; 22 | 23 | &:hover { 24 | background-color: #f9f9f9; 25 | } 26 | } 27 | } 28 | } 29 | 30 | .book-body { 31 | h1:first-of-type { 32 | margin-top: 0; 33 | } 34 | } 35 | 36 | main img { 37 | max-width: 100%; 38 | } 39 | 40 | footer { 41 | background-color: #003760; 42 | color: #fff; 43 | } 44 | 45 | .social-media { 46 | [class$="-icon"] { 47 | svg { 48 | width: 16px; 49 | height: 16px; 50 | } 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /articles/images/firefox-blockquote-type-cite.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/o2project/reset-css-friends/5dc396c8d2791b54465186521c4c7ff10cc7760c/articles/images/firefox-blockquote-type-cite.png -------------------------------------------------------------------------------- /articles/images/firefox-font.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/o2project/reset-css-friends/5dc396c8d2791b54465186521c4c7ff10cc7760c/articles/images/firefox-font.png -------------------------------------------------------------------------------- /articles/images/input-types.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/o2project/reset-css-friends/5dc396c8d2791b54465186521c4c7ff10cc7760c/articles/images/input-types.png -------------------------------------------------------------------------------- /articles/images/safari-font.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/o2project/reset-css-friends/5dc396c8d2791b54465186521c4c7ff10cc7760c/articles/images/safari-font.png -------------------------------------------------------------------------------- /articles/images/table-border-collapse.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/o2project/reset-css-friends/5dc396c8d2791b54465186521c4c7ff10cc7760c/articles/images/table-border-collapse.png -------------------------------------------------------------------------------- /articles/index.re: -------------------------------------------------------------------------------- 1 | = はじめに 2 | 3 | 本書はReset CSSについて4つの視点から説明する本です。 4 | 5 | * そもそもReset CSSとは 6 | * なぜReset CSSを使うのか 7 | * 各Reset CSSの特徴 8 | * 各Reset CSSのスタイル宣言 9 | 10 | == 本書の構成 11 | 12 | 本書は3章から成り立っています。 13 | 14 | 1. Reset CSSとは何か（かばんちゃんとサーバルによる解説） 15 | 1. Reset CSSの特色（アメリカビーバーとオグロプレーリードッグによる解説） 16 | 1. Reset CSSでどのような宣言がされているか（アフリカオオコノハズクとワシミミズクによる解説） 17 | 18 | == お問い合わせ先 19 | 20 | 本書に関するお問い合わせはta2+friends@o2p.jp、もしくはTwitterで@o2pjp宛へお問い合わせください。 21 | 22 | == 免責事項 23 | 24 | 本書に記載された内容は情報の提供のみを目的としています。 25 | したがって、本書を用いた開発・製作・運用は必ずご自身の責任と判断によって行ってください。 26 | これらの情報による開発・製作・運用の結果について著者はいかなる責任も負いません。 27 | -------------------------------------------------------------------------------- /articles/layouts/layout-web.html.erb: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | <%=h @title %> | <%=h @book.config["booktitle"]%> 9 | 10 | <% if @next.present? %>"><% end %> 11 | <% if @prev.present? %>"><% end %> 12 | <% if @stylesheets.present? %> 13 | <% @stylesheets.each do |style| %> 14 | 15 | <% end %> 16 | <% end %> 17 | 18 | <% if @book.config["analytics"].present? && @book.config["analytics"]["google"].present? %> 19 | 27 | <% end%> 28 | 29 | 30 | > 31 |
32 |
33 |
34 | Reset CSSフレンズ 35 |

36 | 紙の本 + PDFをBOOTHで頒布しています。 37 | powered by Re:VIEW 38 |

39 |
40 |
41 |
42 | 43 |
44 |
45 |

46 | <%=h @book.config["booktitle"]%>では、内容の改善や頒布数の決定を目的にGoogle アナリティクスでアクセス情報を匿名のトラフィックデータという形で収集・解析しています。データの収集を無効化したい場合はこちらのリンクより無効にする事ができます。 47 |

48 |
49 | 50 |
51 | 54 | 55 |
56 | <%= @body %> 57 |
58 | 59 | 78 |
79 |
80 | 81 | 114 | 115 | <% if @book.config["analytics"].present? && @book.config["analytics"]["google"].present? %> 116 | 130 | <% end%> 131 | 132 | 133 | -------------------------------------------------------------------------------- /articles/layouts/layout.tex.erb: -------------------------------------------------------------------------------- 1 | \documentclass[<%= @documentclassoption %>]{<%= @documentclass %>} 2 | <%- if @texcompiler == "uplatex" -%> 3 | \usepackage[deluxe,uplatex]{otf} 4 | <%- else -%> 5 | \usepackage[deluxe]{otf} 6 | <%- end -%> 7 | \usepackage[dvipdfmx]{xcolor} 8 | \usepackage[dvipdfmx]{graphicx} 9 | \usepackage{framed} 10 | \usepackage{wrapfig} 11 | \definecolor{shadecolor}{gray}{0.9} 12 | \definecolor{shadecolorb}{gray}{0.1} 13 | \definecolor{reviewgreen}{rgb}{0,0.4,0} 14 | \definecolor{reviewblue}{rgb}{0.2,0.2,0.4} 15 | \definecolor{reviewred}{rgb}{0.7,0,0} 16 | \definecolor{reviewdarkred}{rgb}{0.3,0,0} 17 | \usepackage{lmodern} 18 | \usepackage[T1]{fontenc} 19 | \usepackage{textcomp} 20 | \usepackage[utf8]{inputenc} 21 | \usepackage{ascmac} 22 | \usepackage{float} 23 | \usepackage{alltt} 24 | \usepackage{amsmath} 25 | 26 | %% if you use @{} (underline), use jumoline.sty 27 | %%\usepackage{jumoline} 28 | 29 | \newenvironment{shadedb}{% 30 | \def\FrameCommand{\fboxsep=\FrameSep \colorbox{shadecolorb}}% 31 | \MakeFramed {\FrameRestore}}% 32 | {\endMakeFramed} 33 | 34 | <%- unless ["utbook", "tbook"].include?(@documentclass) -%> 35 | %\usepackage[top=10zw,bottom=12zw,left=10zw,right=10zw]{geometry} 36 | %\usepackage[top=5zw,bottom=5zw,left=1zw,right=1zw]{geometry} 37 | <%- end -%> 38 | 39 | \newcommand{\parasep}{\vspace*{3zh}} 40 | \setlength{\footskip}{30pt} 41 | 42 | <%- if @texcompiler == "uplatex" -%> 43 | \usepackage[dvipdfmx,bookmarks=true,bookmarksnumbered=true,colorlinks=true,% 44 | pdftitle={<%= @config.name_of("booktitle") %>},% 45 | pdfauthor={<%= @config.names_of("aut").join(I18n.t("names_splitter")) %>}]{hyperref} 46 | % uplatexでのBookmarkの文字化け対策（日本語向け） 47 | \usepackage[dvipdfmx]{pxjahyper} 48 | <%- else -%> 49 | %% Bookmarkの文字化け対策（日本語向け） 50 | \ifnum 46273=\euc"B4C1 % 46273 == 0xB4C1 == 漢(EUC-JP) 51 | \usepackage{atbegshi}% 52 | \AtBeginShipoutFirst{\special{pdf:tounicode EUC-UCS2}}% 53 | %%\AtBeginDvi{\special{pdf:tounicode EUC-UCS2}}% 54 | \else 55 | \usepackage{atbegshi}% 56 | \AtBeginShipoutFirst{\special{pdf:tounicode 90ms-RKSJ-UCS2}}% 57 | %%\AtBeginDvi{\special{pdf:tounicode 90ms-RKSJ-UCS2}}% 58 | \fi 59 | 60 | \usepackage[dvipdfm,bookmarks=true,bookmarksnumbered=true,colorlinks=true,% 61 | pdftitle={<%= @config.name_of("booktitle") %>},% 62 | pdfauthor={<%= @config.names_of("aut").join(I18n.t("names_splitter")) %>}]{hyperref} 63 | <%- end -%> 64 | 65 | <%- if ["utbook", "tbook"].include?(@documentclass) -%> 66 | \newcommand{\headfont}{\gtfamily\sffamily\bfseries} 67 | \usepackage{plext} 68 | <%- end -%> 69 | 70 | <%- if config["highlight"] && config["highlight"]["latex"] == "listings" -%> 71 | <%- if config["language"] == "ja" -%> 72 | \usepackage{listings,jlisting} 73 | <%- else -%> 74 | \usepackage{listings} 75 | <%- end -%> 76 | \renewcommand{\lstlistingname}{<%= I18n.t("list")%>} 77 | \lstset{% 78 | breaklines=true,% 79 | breakautoindent=false,% 80 | breakindent=0pt,% 81 | fontadjust=true,% 82 | backgroundcolor=\color{shadecolor},% 83 | frame=single,% 84 | framerule=0pt,% 85 | basicstyle=\ttfamily\scriptsize,% 86 | commentstyle=\color{reviewgreen},% 87 | identifierstyle=\color{reviewblue},% 88 | stringstyle=\color{reviewred},% 89 | keywordstyle=\bfseries\color{reviewdarkred},% 90 | } 91 | 92 | \lstnewenvironment{reviewemlistlst}[1][]{\lstset{#1}}{} 93 | \lstnewenvironment{reviewemlistnumlst}[1][]{\lstset{numbers=left, #1}}{} 94 | \lstnewenvironment{reviewlistlst}[1][]{\lstset{#1}}{} 95 | \lstnewenvironment{reviewlistnumlst}[1][]{\lstset{numbers=left, #1}}{} 96 | \lstnewenvironment{reviewcmdlst}[1][]{\lstset{backgroundcolor=\color{white}, frameround=tttt, frame=trbl, #1}}{} 97 | <%- end -%> 98 | 99 | \newenvironment{reviewimage}{% 100 | \begin{figure}[H] 101 | \begin{center}}{% 102 | \end{center} 103 | \end{figure}} 104 | 105 | \newenvironment{reviewdummyimage}{% 106 | \begin{figure}[H] 107 | \begin{center}\begin{alltt}}{% 108 | \end{alltt}\end{center} 109 | \end{figure}} 110 | 111 | \newenvironment{reviewemlist}{% 112 | \medskip\small\begin{shaded}\setlength{\baselineskip}{1.3zw}\begin{alltt}}{% 113 | \end{alltt}\end{shaded}} 114 | 115 | \newenvironment{reviewlist}{% 116 | \begin{shaded}\small\setlength{\baselineskip}{1.3zw}\begin{alltt}}{% 117 | \end{alltt}\end{shaded}\par\vspace*{0.5zw}} 118 | 119 | \newenvironment{reviewcmd}{% 120 | \color{white}\medskip\small\begin{shadedb}\setlength{\baselineskip}{1.3zw}\begin{alltt}}{% 121 | \end{alltt}\end{shadedb}} 122 | 123 | \newenvironment{reviewbox}{% 124 | \medskip\small\begin{framed}\setlength{\baselineskip}{1.3zw}\begin{alltt}}{% 125 | \end{alltt}\end{framed}} 126 | 127 | \newenvironment{reviewtable}[1]{% 128 | \begin{center}\small\setlength{\baselineskip}{1.2zw} 129 | \begin{tabular}{#1}}{% 130 | \end{tabular} 131 | \end{center}} 132 | 133 | \newenvironment{reviewcolumn}{% 134 | \begin{framed} 135 | }{% 136 | \end{framed} 137 | \vspace{2zw}} 138 | 139 | \newcommand{\reviewcolumnhead}[2]{% 140 | {\noindent\large <%= I18n.t("column_head")%>: #2}} 141 | 142 | \newcommand{\reviewtablecaption}[1]{% 143 | \caption{#1}} 144 | 145 | \newcommand{\reviewimgtablecaption}[1]{% 146 | \caption{#1}\vspace{-3mm}} 147 | 148 | \newcommand{\reviewbackslash}[0]{% 149 | \textbackslash{}} 150 | 151 | \newcommand{\reviewlistcaption}[1]{% 152 | \medskip{\small\noindent #1}\vspace*{-1.3zw}} 153 | 154 | \newcommand{\reviewemlistcaption}[1]{% 155 | \medskip{\small\noindent #1}\vspace*{-1.3zw}} 156 | 157 | \newcommand{\reviewcmdcaption}[1]{% 158 | \medskip{\small\noindent #1}\vspace*{-1.3zw}} 159 | 160 | \newcommand{\reviewindepimagecaption}[1]{% 161 | \begin{center}#1\end{center}} 162 | 163 | \newcommand{\reviewboxcaption}[1]{% 164 | \medskip{\small\noindent #1}\vspace*{-1.3zw}} 165 | 166 | \newcommand{\reviewimageref}[2]{<%= I18n.t("image")%> #1} 167 | \newcommand{\reviewtableref}[2]{<%= I18n.t("table")%> #1} 168 | \newcommand{\reviewlistref}[1]{<%= I18n.t("list")%> #1} 169 | \newcommand{\reviewbibref}[2]{#1} 170 | \newcommand{\reviewcolumnref}[2]{<%= I18n.t("columnname")%> #1} 171 | \newcommand{\reviewsecref}[2]{#1} 172 | 173 | \newcommand{\reviewminicolumntitle}[1]{% 174 | {\large <%= I18n.t("memo_head")%>: #1}\\} 175 | 176 | <%- if @config["toctitle"].present? -%> 177 | \renewcommand{\contentsname}{<%= @config["toctitle"]%>} 178 | <%- end -%> 179 | 180 | \newenvironment{reviewminicolumn}{% 181 | \vspace{1.5zw}\begin{screen}}{% 182 | \end{screen}\vspace{2zw}} 183 | 184 | \newcommand{\reviewkw}[1]{\textbf{\textgt{#1}}} 185 | \newcommand{\reviewami}[1]{\mask{#1}{A}} 186 | \newcommand{\reviewem}[1]{\textbf{#1}} 187 | \newcommand{\reviewstrong}[1]{\textbf{#1}} 188 | \newcommand{\reviewunderline}{\Underline} 189 | 190 | %% @ is ignored in LaTeX with default style 191 | \newcommand{\reviewstrike}[1]{#1} 192 | 193 | %%%% for ulem.sty: 194 | %%\renewcommand{\reviewstrike}[1]{\sout{#1}} 195 | %% 196 | %%%% for jumoline.sty: 197 | %%\renewcommand{\reviewstrike}[1]{\Middleline{#1}} 198 | 199 | \newcommand{\reviewth}[1]{\textgt{#1}} 200 | \newcommand{\reviewtitlefont}[0]{\usefont{T1}{phv}{b}{n}\gtfamily} 201 | \newcommand{\reviewmainfont}[0]{} 202 | \newcommand{\reviewcolophon}[0]{\clearpage} 203 | \newcommand{\reviewappendix}[0]{\appendix} 204 | 205 | \makeatletter 206 | %% maxwidth is the original width if it is less than linewidth 207 | %% otherwise use linewidth (to make sure the graphics do not exceed the margin) 208 | \def\maxwidth{% 209 | \ifdim\Gin@nat@width>\linewidth 210 | \linewidth 211 | \else 212 | \Gin@nat@width 213 | \fi 214 | } 215 | \makeatother 216 | 217 | <%- if @config["usepackage"] -%> 218 | <%= @config["usepackage"] %> 219 | <%- end -%> 220 | 221 | \usepackage[T1]{fontenc} 222 | 223 | \begin{document} 224 | 225 | \reviewmainfont 226 | 227 | \frontmatter 228 | \pagenumbering{arabic} 229 | 230 | <%- if @config["titlepage"] -%> 231 | <%- if @custom_titlepage -%> 232 | <%= @custom_titlepage %> 233 | <%- else -%> 234 | \begin{titlepage} 235 | <%- if @config["coverimage"] -%> 236 | \begin{center} 237 | \includegraphics[<%= @coverimageoption%>]{./images/<%= @config["coverimage"] %>} 238 | \end{center} 239 | \clearpage 240 | <%- end -%> 241 | \thispagestyle{plainhead} 242 | \setcounter{page}{1} 243 | \begin{center}% 244 | \mbox{} \vskip5zw 245 | \reviewtitlefont% 246 | {\Huge <%= @config.name_of("booktitle") %> \par}% 247 | \vskip 15em% 248 | {\huge 249 | \lineskip .75em 250 | \begin{tabular}[t]{c}% 251 | <%= @authors %> 252 | \end{tabular}\par}% 253 | \vfill 254 | {\large <%= @config["date"] %> <%= I18n.t("edition")%>\hspace{2zw}<%= I18n.t("published_by", @config.names_of("pbl").join(I18n.t("names_splitter")))%>\par}% 255 | \vskip4zw\mbox{} 256 | \end{center}% 257 | \end{titlepage} 258 | <%- end -%> 259 | <%- end -%> 260 | 261 | %%% originaltitle 262 | <%- if @config["originaltitlefile"] -%> 263 | <%= @custom_originaltitlepage %> 264 | <%- end -%> 265 | 266 | %%% credit 267 | <%- if @config["creditfile"] -%> 268 | <%= @custom_creditpage %> 269 | <%- end -%> 270 | 271 | %% preface 272 | <%= @input_files["PREDEF"] %> 273 | 274 | <%- if @config["toc"] -%> 275 | \setcounter{tocdepth}{<%= @config["toclevel"] %>} 276 | \tableofcontents 277 | <%- end -%> 278 | 279 | \begingroup 280 | \cleardoublepage 281 | \edef\continuenumber{\endgroup 282 | \noexpand\mainmatter 283 | \setcounter{page}{\the\value{page}}% 284 | } 285 | 286 | \mainmatter 287 | \continuenumber 288 | 289 | \renewcommand{\chaptermark}[1]{\markboth{\prechaptername\thechapter\postchaptername~#1}{}} 290 | <%= @input_files["CHAPS"] %> 291 | \renewcommand{\chaptermark}[1]{\markboth{\appendixname\thechapter~#1}{}} 292 | \reviewappendix 293 | <%= @input_files["APPENDIX"] %> 294 | 295 | %% backmatter begins 296 | <%- if @input_files["POSTDEF"] or @config["colophon"] -%> 297 | \backmatter 298 | <%- end -%> 299 | 300 | <%- if @input_files["POSTDEF"] -%> 301 | <%= @input_files["POSTDEF"] %> 302 | <%- end -%> 303 | 304 | %%% profile 305 | <%- if @config["profile"] -%> 306 | <%= @custom_profilepage %> 307 | <%- end -%> 308 | 309 | %%% advfile 310 | <%- if @config["advfile"] -%> 311 | <%= @custom_advfilepage %> 312 | <%- end -%> 313 | 314 | %%% colophon 315 | <%- if @config["colophon"] -%> 316 | <%- if @custom_colophonpage -%> 317 | <%= @custom_colophonpage %> 318 | <%- else -%> 319 | %% okuduke 320 | \reviewcolophon 321 | \thispagestyle{plainhead} 322 | 323 | \vspace*{\fill} 324 | 325 | {\noindent\reviewtitlefont\Large <%= @config.name_of("booktitle") %>} \\ 326 | \rule[8pt]{14cm}{1pt} \\ 327 | {\noindent 328 | <%= @config["pubhistory"].to_s.gsub(/\n/){"\n\n\\noindent\n"} %> 329 | } 330 | 331 | \begin{tabular}{ll} 332 | <%= @okuduke %> 333 | \end{tabular} 334 | 　\\ 335 | \rule[0pt]{14cm}{1pt} \\ 336 | <%= @config.names_of("rights").join('\\' + '\\') %> \\ 337 | <%- end -%> 338 | <%- end -%> 339 | 340 | %%% backcover 341 | <%- if @config["backcover"] -%> 342 | <%= @custom_backcoverpage %> 343 | <%- end -%> 344 | 345 | \end{document} 346 | -------------------------------------------------------------------------------- /articles/prh.yml: -------------------------------------------------------------------------------- 1 | version: 1 2 | 3 | imports: 4 | - ../prh-rules/media/techbooster.yml 5 | -------------------------------------------------------------------------------- /articles/sty/techbooster-doujin.sty: -------------------------------------------------------------------------------- 1 | %% The MIT License (MIT) 2 | %% Copyright (c) 2015 TechBooster 3 | 4 | \usepackage[most]{tcolorbox} 5 | \tcbuselibrary{breakable} 6 | \renewenvironment{shaded}{ 7 | \vspace{\baselineskip} 8 | \begin{tcolorbox}[breakable, enhanced jigsaw, colback=black!10!white, colframe=black!30!white]} 9 | {\end{tcolorbox}} 10 | \renewenvironment{shadedb}{ 11 | \vspace{\baselineskip} 12 | \begin{tcolorbox}[breakable, enhanced jigsaw, colback=black!80!white, colframe=black, colupper=white, sharp corners, rounded corners=southeast]} 13 | {\end{tcolorbox}} 14 | 15 | %% サンプルコードを更に小さく 16 | \renewenvironment{reviewemlist}{% 17 | \medskip\footnotesize\begin{shaded}\setlength{\baselineskip}{1.2zw}\begin{alltt}}{% 18 | \end{alltt}\end{shaded}} 19 | 20 | \renewenvironment{reviewlist}{% 21 | \begin{shaded}\footnotesize\setlength{\baselineskip}{1.2zw}\begin{alltt}}{% 22 | \end{alltt}\end{shaded}\par\vspace*{0.5zw}} 23 | 24 | \renewenvironment{reviewcmd}{% 25 | \color{white}\medskip\footnotesize\begin{shadedb}\setlength{\baselineskip}{1.2zw}\begin{alltt}}{% 26 | \end{alltt}\end{shadedb}} 27 | 28 | %% from review-pdfmaker 29 | \usepackage{fancyhdr} 30 | \usepackage{ulem} 31 | \pagestyle{fancy} 32 | 33 | \fancyhead{} 34 | \fancyhead[LE]{\gtfamily\sffamily\bfseries\upshape \leftmark} 35 | \fancyhead[RO]{\gtfamily\sffamily\bfseries\upshape \rightmark} 36 | \cfoot{\thepage} 37 | 38 | \renewcommand{\sectionmark}[1]{\markright{\thesection~#1}{}} 39 | \renewcommand{\chaptermark}[1]{% 40 | \if@mainmatter 41 | \markboth{\prechaptername\ \thechapter\ \postchaptername~#1}{} 42 | \else 43 | \markboth{#1}{#1} 44 | \fi} 45 | \renewcommand{\headfont}{\gtfamily\sffamily\bfseries} 46 | 47 | \fancypagestyle{plainhead}{% 48 | \fancyhead{} 49 | \fancyfoot{} % clear all header and footer fields 50 | \fancyfoot[CE,CO]{\thepage} 51 | \renewcommand{\headrulewidth}{0pt} 52 | \renewcommand{\footrulewidth}{0pt}} 53 | 54 | \hypersetup{colorlinks=false} 55 | %%Helveticaを使う 56 | \renewcommand{\sfdefault}{phv} 57 | 58 | \sloppy 59 | 60 | \cfoot{\thepage} 61 | 62 | \def\cleardoublepage{% 63 | \clearpage% 64 | \if@twoside% 65 | \ifodd \c@page \else \hbox{}\thispagestyle{plainhead}\newpage% 66 | \if@twocolumn\hbox{}\thispagestyle{plainhead}\newpage\fi% 67 | \fi% 68 | \fi% 69 | } 70 | 71 | \setlength{\paperheight} {257 truemm} 72 | \setlength{\paperwidth} {182 truemm} 73 | \setlength{\textheight} {190 truemm} 74 | \setlength{\textwidth} {130 truemm} 75 | \setlength{\marginparwidth} {15 truemm} 76 | \setlength{\marginparsep} {2 truemm} 77 | \setlength{\oddsidemargin} {26 truemm} 78 | \setlength{\evensidemargin} {26 truemm} 79 | \setlength{\topmargin} {10 truemm} 80 | \setlength{\headsep} {15 truemm} 81 | \setlength{\headheight} {5 truemm} 82 | \setlength{\hoffset}{-1in} 83 | \setlength{\voffset}{-1in} 84 | \renewcommand{\baselinestretch}{0.96} 85 | 86 | \usepackage{fancyvrb} 87 | \VerbatimFootnotes 88 | \usepackage{seqsplit} 89 | \let\textttorg=\texttt 90 | \def\texttt{\begingroup\obeyspaces\do@texttt} 91 | \def\do@texttt#1{\textttorg{\seqsplit{#1\relax}}\endgroup} 92 | 93 | \newcommand{\captionsize}{\fontsize{9}{9}\selectfont} 94 | \newlength{\captionnumwidth} 95 | \setlength{\captionnumwidth}{6zw} 96 | \newlength{\captionwidth} 97 | \setlength{\captionwidth}{\textwidth} 98 | \addtolength{\captionwidth}{-\captionnumwidth} 99 | \def\captionhead{\sffamily{\color{black!30!white}{▲}}} 100 | \long\def\@makecaption#1#2{% 101 | \addvspace\abovecaptionskip 102 | \buildcaption{!}{#1}{#2} 103 | \vskip\belowcaptionskip 104 | } 105 | \long\def\buildcaption#1#2#3{% 106 | \sbox\@tempboxa{\captionsize\sffamily #3}% 107 | \ifdim \wd\@tempboxa <\captionwidth% 108 | \def\capline{\captionsize\captionhead #2% 109 | \hskip1zw\relax\usebox{\@tempboxa}\mbox{}\relax} 110 | \ifx#1!\relax\centerline{\capline}\else\noindent\capline\fi 111 | \else 112 | \noindent% 113 | \parbox[t]{\captionnumwidth}{% 114 | {\captionsize\captionhead #2% 115 | \hskip1zw}}% 116 | \parbox[t]{\captionwidth}{\captionsize\sffamily #3} 117 | \fi 118 | } 119 | 120 | \long\def\listcaption#1:#2\relax{\buildcaption{}{#1}{#2}} 121 | 122 | \renewcommand{\reviewtablecaption}[1]{% 123 | {\def\captionhead{\sffamily{\color{black!30!white}{▼}}} 124 | \caption{#1}}} 125 | 126 | \renewcommand{\reviewlistcaption}[1]{% 127 | {\def\captionhead{\sffamily{\color{black!30!white}{▼}}} 128 | \medskip{\listcaption#1\relax}\vspace*{-1.3zw}}} 129 | 130 | \renewcommand{\reviewemlistcaption}[1]{% 131 | {\def\captionhead{\sffamily{\color{black!30!white}{▼}}} 132 | \medskip{\buildcaption{}{}{#1}\relax}\vspace*{-1.3zw}}} 133 | 134 | \renewcommand{\reviewcmdcaption}[1]{% 135 | {\def\captionhead{\sffamily{\color{black!30!white}{▼}}} 136 | \medskip{\listcaption#1\relax}\vspace*{-1.3zw}}} 137 | 138 | \renewcommand{\reviewindepimagecaption}[1]{% 139 | \begin{center}#1\end{center}} 140 | 141 | \renewcommand{\reviewboxcaption}[1]{% 142 | {\def\captionhead{\sffamily{\color{black!30!white}{▼}}} 143 | \medskip{\captionsize\captionhead #1}\vspace*{-1.3zw}}} 144 | 145 | 146 | 147 | \renewenvironment{reviewcolumn}{% 148 | \vspace{\baselineskip} 149 | \begin{tcolorbox}[colback=white] 150 | }{% 151 | \end{tcolorbox} 152 | \vspace{\baselineskip} 153 | } 154 | 155 | \renewcommand{\reviewcolumnhead}[2]{% 156 | {\noindent\large\sffamily #2} 157 | \vspace{\baselineskip}} 158 | -------------------------------------------------------------------------------- /bin/setup-redpen.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | 3 | URL=https://api.github.com/repos/redpen-cc/redpen/releases/latest 4 | OUTPUT_TEMP_FILE=redpen.json 5 | 6 | curl -s $URL > $OUTPUT_TEMP_FILE 7 | 8 | FILE_NAME=`cat $OUTPUT_TEMP_FILE | jq -r ".assets[] | select (.name | test(\"${spruce_type}\")) | .name"` 9 | DOWNLOAD_URL=`cat $OUTPUT_TEMP_FILE | jq -r ".assets[] | select (.name | test(\"${spruce_type}\")) | .browser_download_url"` 10 | 11 | curl -OL $DOWNLOAD_URL 12 | tar xvf $FILE_NAME 13 | rm $FILE_NAME $OUTPUT_TEMP_FILE 14 | -------------------------------------------------------------------------------- /codes/browser/body.css: -------------------------------------------------------------------------------- 1 | body { 2 | display: block; 3 | margin: 8px; 4 | } 5 | -------------------------------------------------------------------------------- /codes/browser/chrome/ul-nested.css: -------------------------------------------------------------------------------- 1 | ul ul, 2 | ol ul { 3 | list-style-type: circle 4 | } 5 | ol ol ul, 6 | ol ul ul, 7 | ul ol ul, 8 | ul ul ul { 9 | list-style-type: square 10 | } 11 | -------------------------------------------------------------------------------- /codes/browser/firefox/blockquote.css: -------------------------------------------------------------------------------- 1 | blockquote { 2 | display: block; 3 | margin-block-start: 1em; 4 | margin-block-end: 1em; 5 | margin-inline-start: 40px; 6 | margin-inline-end: 40px; 7 | } 8 | 9 | blockquote[type=cite] { 10 | display: block; 11 | margin-block-start: 1em; 12 | margin-block-end: 1em; 13 | margin-inline-start: 0; 14 | margin-inline-end: 0; 15 | padding-inline-start: 1em; 16 | border-inline-start: solid; 17 | border-color: blue; 18 | border-width: thin; 19 | } 20 | -------------------------------------------------------------------------------- /codes/browser/firefox/table-1.css: -------------------------------------------------------------------------------- 1 | table[align="left"] { 2 | float: left; 3 | } 4 | 5 | table[align="right"] { 6 | float: right; 7 | text-align: start; 8 | } 9 | 10 | table[rules] { 11 | border-width: thin; 12 | border-style: hidden; 13 | } 14 | -------------------------------------------------------------------------------- /codes/browser/firefox/table-2.css: -------------------------------------------------------------------------------- 1 | tr > form:-moz-is-html, tbody > form:-moz-is-html, 2 | thead > form:-moz-is-html, tfoot > form:-moz-is-html, 3 | table > form:-moz-is-html { 4 | /* Important: don't show these forms in HTML */ 5 | display: none !important; 6 | } 7 | -------------------------------------------------------------------------------- /codes/browser/firefox/ul-nested.css: -------------------------------------------------------------------------------- 1 | /* nested lists have no top/bottom margins */ 2 | :-moz-any(ul, ol, dir, menu, dl) ul, 3 | :-moz-any(ul, ol, dir, menu, dl) ol { 4 | margin-block-start: 0; 5 | margin-block-end: 0; 6 | } 7 | 8 | /* 2 deep unordered lists use a circle */ 9 | :-moz-any(ol, ul, menu, dir) ul { 10 | list-style-type: circle; 11 | } 12 | 13 | /* 3 deep (or more) unordered lists use a square */ 14 | :-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) ul { 15 | list-style-type: square; 16 | } 17 | -------------------------------------------------------------------------------- /codes/browser/firefox/ul.css: -------------------------------------------------------------------------------- 1 | ul { 2 | display: block; 3 | list-style-type: disc; 4 | margin-block-start: 1em; 5 | margin-block-end: 1em; 6 | padding-inline-start: 40px; 7 | } 8 | -------------------------------------------------------------------------------- /codes/browser/h1.css: -------------------------------------------------------------------------------- 1 | /* Chrome, Safari */ 2 | h1 { 3 | display: block; 4 | font-size: 2em; 5 | -webkit-margin-before: 0.67__qem; 6 | -webkit-margin-after: 0.67em; 7 | -webkit-margin-start: 0; 8 | -webkit-margin-end: 0; 9 | font-weight: bold 10 | } 11 | :-webkit-any(article,aside,nav,section) h1 { 12 | font-size: 1.5em; 13 | -webkit-margin-before: 0.83__qem; 14 | -webkit-margin-after: 0.83em; 15 | } 16 | :-webkit-any(article,aside,nav,section) :-webkit-any(article,aside,nav,section) 17 | h1 { 18 | font-size: 1.17em; 19 | -webkit-margin-before: 1__qem; 20 | -webkit-margin-after: 1em; 21 | } 22 | 23 | /* Firefox */ 24 | h1 { 25 | display: block; 26 | font-size: 2em; 27 | font-weight: bold; 28 | margin-block-start: .67em; 29 | margin-block-end: .67em; 30 | } 31 | 32 | h2, 33 | :-moz-any(article, aside, nav, section) 34 | h1 { 35 | display: block; 36 | font-size: 1.5em; 37 | font-weight: bold; 38 | margin-block-start: .83em; 39 | margin-block-end: .83em; 40 | } 41 | 42 | h3, 43 | :-moz-any(article, aside, nav, section) 44 | :-moz-any(article, aside, nav, section) 45 | h1 { 46 | display: block; 47 | font-size: 1.17em; 48 | font-weight: bold; 49 | margin-block-start: 1em; 50 | margin-block-end: 1em; 51 | } 52 | -------------------------------------------------------------------------------- /codes/browser/safari/img.css: -------------------------------------------------------------------------------- 1 | #if defined(WTF_PLATFORM_IOS) && WTF_PLATFORM_IOS 2 | img { 3 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 4 | } 5 | :any-link img { 6 | -webkit-tap-highlight-color: inherit; 7 | } 8 | #endif 9 | -------------------------------------------------------------------------------- /codes/reset-css/a-reset.css: -------------------------------------------------------------------------------- 1 | /** 2 | * 1. Remove the gray background on active links in IE 10. 3 | * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. 4 | */ 5 | 6 | a { 7 | background-color: transparent; /* 1 */ 8 | -webkit-text-decoration-skip: objects; /* 2 */ 9 | } 10 | -------------------------------------------------------------------------------- /codes/reset-css/eric-meyers-blockquote.css: -------------------------------------------------------------------------------- 1 | blockquote, q { 2 | quotes: none; 3 | } 4 | blockquote:before, blockquote:after, 5 | q:before, q:after { 6 | content: ''; 7 | content: none; 8 | } 9 | -------------------------------------------------------------------------------- /codes/reset-css/hard-reset.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | -------------------------------------------------------------------------------- /codes/reset-css/normalize-css/button.css: -------------------------------------------------------------------------------- 1 | /** 2 | * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` 3 | * controls in Android 4. 4 | * 2. Correct the inability to style clickable types in iOS and Safari. 5 | */ 6 | 7 | button, 8 | html [type="button"], /* 1 */ 9 | [type="reset"], 10 | [type="submit"] { 11 | -webkit-appearance: button; /* 2 */ 12 | } 13 | 14 | /** 15 | * Remove the inner border and padding in Firefox. 16 | */ 17 | 18 | button::-moz-focus-inner, 19 | [type="button"]::-moz-focus-inner, 20 | [type="reset"]::-moz-focus-inner, 21 | [type="submit"]::-moz-focus-inner { 22 | border-style: none; 23 | padding: 0; 24 | } 25 | 26 | /** 27 | * Restore the focus styles unset by the previous rule. 28 | */ 29 | 30 | button:-moz-focusring, 31 | [type="button"]:-moz-focusring, 32 | [type="reset"]:-moz-focusring, 33 | [type="submit"]:-moz-focusring { 34 | outline: 1px dotted ButtonText; 35 | } 36 | -------------------------------------------------------------------------------- /codes/reset-css/normalize-css/h1.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Correct the font size and margin on `h1` elements within `section` and 3 | * `article` contexts in Chrome, Firefox, and Safari. 4 | */ 5 | 6 | h1 { 7 | font-size: 2em; 8 | margin: 0.67em 0; 9 | } 10 | -------------------------------------------------------------------------------- /codes/reset-css/normalize-css/img.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Remove the border on images inside links in IE 10-. 3 | */ 4 | 5 | img { 6 | border-style: none; 7 | } 8 | -------------------------------------------------------------------------------- /codes/reset-css/normalize-css/input.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Remove the margin in Firefox and Safari. 3 | */ 4 | 5 | button, 6 | input, 7 | optgroup, 8 | select, 9 | textarea { 10 | margin: 0; 11 | } 12 | 13 | /** 14 | * Show the overflow in IE. 15 | * 1. Show the overflow in Edge. 16 | */ 17 | 18 | button, 19 | input { /* 1 */ 20 | overflow: visible; 21 | } 22 | -------------------------------------------------------------------------------- /codes/reset-css/normalize-css/select.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Remove the inheritance of text transform in Edge, Firefox, and IE. 3 | * 1. Remove the inheritance of text transform in Firefox. 4 | */ 5 | 6 | button, 7 | select { /* 1 */ 8 | text-transform: none; 9 | } 10 | -------------------------------------------------------------------------------- /codes/reset-css/normalize-css/textarea.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Remove the default vertical scrollbar in IE. 3 | */ 4 | 5 | textarea { 6 | overflow: auto; 7 | } 8 | -------------------------------------------------------------------------------- /codes/reset-css/ress/button.css: -------------------------------------------------------------------------------- 1 | /* Apply cursor pointer to button elements */ 2 | button, 3 | [type="button"], 4 | [type="reset"], 5 | [type="submit"], 6 | [role="button"] { 7 | cursor: pointer; 8 | } 9 | 10 | button { 11 | overflow: visible; /* Address `overflow` set to `hidden` in IE 8/9/10/11 */ 12 | } 13 | -------------------------------------------------------------------------------- /codes/reset-css/ress/input.css: -------------------------------------------------------------------------------- 1 | input { 2 | border-radius: 0; 3 | } 4 | 5 | button, 6 | input, 7 | optgroup, 8 | select, 9 | textarea { 10 | font: inherit; /* Specify font inheritance of form elements */ 11 | } 12 | 13 | /* Remove the default button styling in all browsers */ 14 | button, 15 | input, 16 | select, 17 | textarea { 18 | background-color: transparent; 19 | border-style: none; 20 | color: inherit; 21 | } 22 | -------------------------------------------------------------------------------- /codes/reset-css/ress/select.css: -------------------------------------------------------------------------------- 1 | /* Style select like a standard input */ 2 | select { 3 | -moz-appearance: none; /* Firefox 36+ */ 4 | -webkit-appearance: none; /* Chrome 41+ */ 5 | } 6 | 7 | select::-ms-expand { 8 | display: none; /* Internet Explorer 11+ */ 9 | } 10 | 11 | select::-ms-value { 12 | color: currentColor; /* Internet Explorer 11+ */ 13 | } 14 | -------------------------------------------------------------------------------- /codes/reset-css/sanitize-css/fix-tap-delay.css: -------------------------------------------------------------------------------- 1 | /* 2 | * Remove the tapping delay on clickable elements (opinionated). 3 | * 1. Remove the tapping delay in IE 10. 4 | */ 5 | 6 | a, 7 | area, 8 | button, 9 | input, 10 | label, 11 | select, 12 | summary, 13 | textarea, 14 | [tabindex] { 15 | -ms-touch-action: manipulation; /* 1 */ 16 | touch-action: manipulation; 17 | } 18 | -------------------------------------------------------------------------------- /codes/reset-css/sanitize-css/html.css: -------------------------------------------------------------------------------- 1 | /** 2 | * 1. Remove repeating backgrounds in all browsers (opinionated). 3 | * 2. Add box sizing inheritence in all browsers (opinionated). 4 | */ 5 | 6 | *, 7 | ::before, 8 | ::after { 9 | background-repeat: no-repeat; /* 1 */ 10 | box-sizing: inherit; /* 2 */ 11 | } 12 | 13 | /** 14 | * 1. Add border box sizing in all browsers (opinionated). 15 | * 2. Add the default cursor in all browsers (opinionated). 16 | * 3. Prevent font size adjustments after orientation changes in IE and iOS. 17 | */ 18 | 19 | html { 20 | box-sizing: border-box; /* 1 */ 21 | cursor: default; /* 2 */ 22 | -ms-text-size-adjust: 100%; /* 3 */ 23 | -webkit-text-size-adjust: 100%; /* 3 */ 24 | } 25 | -------------------------------------------------------------------------------- /codes/reset-css/sanitize-css/input.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Remove the margin in Firefox and Safari. 3 | */ 4 | 5 | button, 6 | input, 7 | optgroup, 8 | select, 9 | textarea { 10 | margin: 0; 11 | } 12 | 13 | /** 14 | * Inherit styling in all browsers (opinionated). 15 | */ 16 | 17 | button, 18 | input, 19 | select, 20 | textarea { 21 | background-color: transparent; 22 | color: inherit; 23 | font-size: inherit; 24 | line-height: inherit; 25 | } 26 | 27 | /** 28 | * Show the overflow in IE. 29 | * 1. Show the overflow in Edge. 30 | */ 31 | 32 | button, 33 | input { /* 1 */ 34 | overflow: visible; 35 | } 36 | -------------------------------------------------------------------------------- /codes/reset-css/sanitize-css/table.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Collapse border spacing 3 | */ 4 | 5 | table { 6 | border-collapse: collapse; 7 | } 8 | -------------------------------------------------------------------------------- /codes/reset-css/sanitize-css/textarea.css: -------------------------------------------------------------------------------- 1 | /** 2 | * 1. Remove the default vertical scrollbar in IE. 3 | * 2. Change the resize direction on textareas in all browsers (opinionated). 4 | */ 5 | 6 | textarea { 7 | overflow: auto; /* 1 */ 8 | resize: vertical; /* 2 */ 9 | } 10 | -------------------------------------------------------------------------------- /codes/reset-css/sanitize-css/ul-ol.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Remove the list style on navigation lists in all browsers (opinionated). 3 | */ 4 | 5 | nav ol, 6 | nav ul { 7 | list-style: none; 8 | } 9 | -------------------------------------------------------------------------------- /codes/reset-css/yui3/h1.css: -------------------------------------------------------------------------------- 1 | h1 { 2 | margin:0; 3 | padding:0; 4 | font-size:100%; 5 | font-weight:normal; 6 | } 7 | -------------------------------------------------------------------------------- /codes/reset-css/yui3/textarea.css: -------------------------------------------------------------------------------- 1 | input, 2 | textarea, 3 | select { 4 | font-family:inherit; 5 | font-size:inherit; 6 | font-weight:inherit; 7 | *font-size:100%; /*to enable resizing for IE*/ 8 | } 9 | -------------------------------------------------------------------------------- /docs/CNAME: -------------------------------------------------------------------------------- 1 | friends.o2p.jp 2 | -------------------------------------------------------------------------------- /docs/ch01.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Reset CSSとは何か | Reset CSSフレンズ 9 | 10 | 11 | 12 | 20 | 21 | 22 | 23 |
24 |
25 |
26 | Reset CSSフレンズ 27 |

28 | 紙の本 + PDFをBOOTHで頒布しています。 29 | powered by Re:VIEW 30 |

31 |
32 |
33 |
34 | 35 |
36 |
37 |

38 | Reset CSSフレンズでは、内容の改善や頒布数の決定を目的にGoogle アナリティクスでアクセス情報を匿名のトラフィックデータという形で収集・解析しています。データの収集を無効化したい場合はこちらのリンクより無効にする事ができます。 39 |

40 |
41 | 42 |
43 | 53 | 54 |
55 |

第1章　Reset CSSとは何か

56 |

ここからReset CSSについて解説するよ！かばんちゃんから教えてもらったことを、できるだけ分かりやすく私が教えるからね！

57 |

Reset CSSっていうのは、Webページを読み込んだときに既定で適用されるスタイル*1をリセットするものだよ！

58 |

Hard resetっていう「ユニバーサル（全称）セレクタを使ってすべてのmarginとpaddingを0にする」ところから始まったんだよ！（リスト1.1）そこから今までさまざまなReset CSSのフレンズが生まれたんだって！すっごーい！

59 |

[*1] ユーザーエージェントスタイルシートとも呼ばれます

60 |
61 |

リスト1.1: 初期のReset CSSであるHard reset

62 | 
* {
 63 |   margin: 0;
 64 |   padding: 0;
 65 | }
 66 |
67 |
68 | 69 |

1.1　なぜReset CSSはユーザーエージェントスタイルシートを上書きできるか

70 |

Reset CSSはユーザーエージェントスタイルシートの宣言を上書きすることで、既定で適用されるスタイルをリセットしているんだよ！なんでリセットできるかって？それはスタイル宣言がされたちほー（オリジン）によって適用されるスタイルの優先順位があるためなんだって。よくわかんないけど、CSS Cascading and Inheritance Level 3（https://www.w3.org/TR/css-cascade-3/#cascading）から優先順位を引用すると次のとおりみたい。

71 |
    72 |
  1. transitionの宣言
    2. 73 |
  2. !important付きのユーザーエージェントスタイルシートでの宣言
    3. 74 |
  3. !important付きの利用者による宣言
    4. 75 |
  4. !important付きの上書き宣言
    5. 76 |
  5. !important付きの作者による宣言
    6. 77 |
  6. animationの宣言
    7. 78 |
  7. 上書き宣言
    8. 79 |
  8. 作者による宣言
    9. 80 |
  9. 利用者による宣言
    10. 81 |
  10. ユーザーエージェントスタイルシートでの宣言
    11. 82 |
83 |

たとえばユーザーエージェントスタイルシートの宣言より、HTMLファイルからリンクされたCSS内の宣言が優先されるんだって。だからユーザーエージェントスタイルシートのスタイル宣言を上書きできるんだよー！…うー、ボスー！ちょっとよく分かんないよー！

84 | 85 |

1.2　なぜReset CSSを使うのか

86 |

Reset CSSを使うのは、ブラウザが既定で読み込むユーザーエージェントスタイルシートがブラウザ間で違いがあるからなんだよ！たとえばh1要素とp要素だけ書いたHTMLをブラウザで見てみるよ。

87 |

するとFirefoxはセリフ*2がないフォントだけど（図1.1）、Safariはセリフがあるフォントだよ（図1.2）。ふっしぎー！

88 |

[*2] 文字の線の端にある小さな飾りのことです

89 |
90 | Firefoxでプレビューしたときの見た目 91 |

92 | 図1.1: Firefoxでプレビューしたときの見た目 93 |

94 |
95 |
96 | Safariでプレビューしたときの見た目 97 |

98 | 図1.2: Safariでプレビューしたときの見た目 99 |

100 |
101 |

こんな感じで単純なHTMLにも見た目に違いはあるんだよ！ブラウザによって得意なことは違うからなんらかのReset CSSライブラリを使うか自分で違いを吸収する必要があるんだってー！

102 | 103 |

1.3　Reset CSSを使わない場面

104 |

Reset CSSを使うのは、ブラウザが既定で適用するスタイルがブラウザ間で違いがあるからだけど、NW.js？やElectron？みたいなChromium？しか無いちほーではReset CSSを使わなくていいんだって！

105 |
106 | 107 | 122 |
123 |
124 | 125 | 158 | 159 | 173 | 174 | 175 | -------------------------------------------------------------------------------- /docs/ch02.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Reset CSSの特色 | Reset CSSフレンズ 9 | 10 | 11 | 12 | 20 | 21 | 22 | 23 |
24 |
25 |
26 | Reset CSSフレンズ 27 |

28 | 紙の本 + PDFをBOOTHで頒布しています。 29 | powered by Re:VIEW 30 |

31 |
32 |
33 |
34 | 35 |
36 |
37 |

38 | Reset CSSフレンズでは、内容の改善や頒布数の決定を目的にGoogle アナリティクスでアクセス情報を匿名のトラフィックデータという形で収集・解析しています。データの収集を無効化したい場合はこちらのリンクより無効にする事ができます。 39 |

40 |
41 | 42 |
43 | 53 | 54 |
55 |

第2章　Reset CSSの特色

56 |

Reset CSSは2004年に生まれて数多くのReset CSSが生まれてきたであります。Reset CSSは年代によって思想や宣言されているスタイルが少しずつ変わっているでありますよ。ここでは有名なReset CSSを7個見ていくでありますよー！うおー！

57 | 58 |

2.1　Hard reset

59 |

Hard resetは2004年に発表された、おそらく最初のReset CSSであります*1！最初のReset CSSだけあって単純であります（リスト2.1）。

60 |
61 |

リスト2.1: Hard reset

62 | 
* {
 63 |   margin: 0;
 64 |   padding: 0;
 65 | }
 66 |
67 |
68 |

Hard resetという名は「A Comprehensive Guide to CSS Resets*2」という記事で出てきたであります。当時の状況はよく分からないので、ここからはわたしの勘によって書くでありますよー！

69 |

[*1] https://web.archive.org/web/20150905184045/http://leftjustified.net/journal/2004/10/07/css-negotiation/

70 |

[*2] http://sixrevisions.com/css/a-comprehensive-guide-to-css-resets/

71 |

Hard resetが発表されたときは、ブラウザ間でmarginやpaddingの値に差があることに関心があったようであります。そのためユニバーサルセレクタでmarginとpaddingを0にして、ブラウザ間のmarginやpaddingの値に差があるのを無かったことにしたようでありますよ。

72 | 73 |

2.2　Eric Meyer's Reset CSS

74 |

Eric MeyerというCSSへ対しとても貢献している人がいるであります。Eric Meyerの実績はすごいでありますよ！*3

75 |
    76 |
  • オライリーから出版されたCSS: The Definitive Guide*4（日本語版はCSS完全ガイド*5）を執筆
    • 77 |
  • 上記の本以外にも多数の本を執筆*6
    • 78 |
  • css-discuss.orgの立ち上げ*7
    • 79 |
  • スライドショー用のファイルフォーマットS5を考案*8
    • 80 |
  • Netscape DevEdgeやCase Western Reserve University、Encyclopedia of Cleveland Historyのプロジェクトリーダーとデザイナーだった
    • 81 |
82 |

[*3] https://www.linkedin.com/in/meyerweb/

83 |

[*4] http://shop.oreilly.com/product/9780596527334.do

84 |

[*5] https://www.oreilly.co.jp/books/487311232X/

85 |

[*6] https://en.wikipedia.org/wiki/Eric_A._Meyer#Bibliography

86 |

[*7] http://www.css-discuss.org/

87 |

[*8] https://en.wikipedia.org/wiki/S5_(file_format)

88 |

最近ではその功績にコミュニティが敬意を払って、6歳で亡くなってしまった娘の名前をCSSの色名beccapurpleとして追加しようと提案されたであります*9。そして本人と亡くなってしまった娘の要望*10によって、rebeccapurpleとしてCSS Color Module Level 4*11に追加されたであります！すごいであります！

89 |

[*9] https://discourse.wicg.io/t/name-663399-becca-purple-in-css4-color/225

90 |

[*10] http://meyerweb.com/eric/thoughts/2014/06/19/rebeccapurple/

91 |

[*11] https://drafts.csswg.org/css-color/#named-colors

92 |

そのEric MeyerがHard resetの問題点を踏まえた上で作ったReset CSSがEric Meyer's Reset CSSであります。Hard resetの問題点は次の2点であります。これらの問題を解決するためにそれぞれの要素ごとにリセットしたのがEric Meyer's Reset CSSであります！

93 |
    94 |
  • ユニバーサルセレクタを使ってmarginやpaddingを0にするやり方がフォーム関連の要素に対してどういった影響があるか分からない
    • 95 |
  • marginやpaddingを0にするだけでなく、フォントに関わる一貫したスタイル宣言をしたい
    • 96 |
97 |

Eric Meyer's Reset CSSのソースコードはhttp://meyerweb.com/eric/tools/css/reset/であります！

98 | 99 |

2.3　YUI 3 Reset CSS

100 |

Yahoo!が主に開発していたYUI libraryに含まれるReset CSSであります！ちなみにYUI 3はこれからメンテナンスをおこなわないというアナウンスをしているのであります*12。

101 |

[*12] https://yahooeng.tumblr.com/post/96098168666/important-announcement-regarding-yui

102 |

他のReset CSSに無いものとして、html要素に対しcolorプロパティやbackgroundプロパティが宣言されているでありますよ。ただYUI 2からReset CSSはほぼ更新されていない*13*14であります。なのでHTML5で追加された要素の宣言は無いであります*15。

103 |

[*13] YUI 2のReset CSSを見てみると2008年から内容がほぼ変わっていないであります

104 |

[*14] https://github.com/yui/yui2/blob/324b3755ea4f3ac643572eb839d85c09801aac5f/build/reset/reset.css

105 |

[*15] https://github.com/yui/yui2/blob/master/src/reset/css/reset.css

106 | 107 |

2.4　HTML5 Doctor Reset CSS

108 |

HTML5を使った開発について発信していたHTML5 Doctorで発表されたReset CSSであります！HTML5 Doctor Reset CSSのソースコードはhttp://html5doctor.com/html-5-reset-stylesheet/であります！

109 |

HTML5 Doctor Reset CSSはEric Meyer's Reset CSSのv1.0を元に作られたものでありますよ。Eric Meyer's Reset CSSのv1.0は作られた時期が2008年2月12日なので、HTML5で追加された要素のスタイル宣言がなかったであります。HTML5 Doctor Reset CSSはそこにHTML5で追加された要素のスタイル宣言を追加しているであります。他にもいろんな要素に独自のスタイル宣言をしているであります！

110 |

ちょっと眠くなったので、ここからはビーバー殿にまかせてわたしは寝るであります。

111 | 112 |

2.5　normalize.css

113 |

プレーリーさんが寝てしまったのでここからはおれっちが説明するっす。

114 |

normalize.cssはそれまでのReset CSSに代わるReset CSSとして出てきたっす。それまでのReset CSSはブラウザが既定で適用するスタイルをほぼすべてリセットしていたっす。

115 |

normalize.cssは今までと違ってブラウザが適用するスタイルで使えそうなものは残しているっす。あとで説明するsanitize.cssやressと違って、作者の意見が無くて純粋にブラウザのスタイルを正規化しているっす*16。

116 |

[*16] v5.0.0まではスタイル宣言に作者の意見が含まれていたのですが、v6.0.0でそれらがすべて取り除かれたっす

117 |

ソースコードにはなぜその宣言をしたか書かれているので読むだけでも勉強になるっす。

118 | 119 |

2.6　sanitize.css

120 |

normalize.cssをNicolas Gallagherとともに作ったJonathan Nealが作ったReset CSSっす。Eric Meyer's Reset CSSやnormalize.cssなどを元に多くの人が書いたスタイル宣言を含んだのがsanitize.cssっすね。たとえばhtml要素にbox-sizing: border-box;を宣言して、ユニバーサルセレクタでbox-sizing: inherit;を宣言しているっす（リスト2.2）。こうすることで特定の要素に対してwidthやheightを宣言するときに値の計算がしやすくなるっす。

121 |
122 |

リスト2.2: sanitize.cssのhtml要素に対する宣言

123 | 
/**
124 |  * 1. Remove repeating backgrounds in all browsers (opinionated).
125 |  * 2. Add box sizing inheritence in all browsers (opinionated).
126 |  */
127 | 
128 | *,
129 | ::before,
130 | ::after {
131 |   background-repeat: no-repeat; /* 1 */
132 |   box-sizing: inherit; /* 2 */
133 | }
134 | 
135 | /**
136 |  * 1. Add border box sizing in all browsers (opinionated).
137 |  * 2. Add the default cursor in all browsers (opinionated).
138 |  * 3. Prevent font size adjustments after orientation changes in IE and iOS.
139 |  */
140 | 
141 | html {
142 |   box-sizing: border-box; /* 1 */
143 |   cursor: default; /* 2 */
144 |   -ms-text-size-adjust: 100%; /* 3 */
145 |   -webkit-text-size-adjust: 100%; /* 3 */
146 | }
147 |
148 |
149 | 150 |

2.7　ress

151 |

最後はA modern CSS resetと名乗るressっすね。ressはnormalize.cssの宣言を引き継ぎつつ、Hard resetのようにユニバーサルセレクタを使ってすべての要素に対しmarginやpaddingを0にしているっす。またsanitize.cssと同じくすべての要素に対してbox-sizing: border-box;を宣言しているっす。こうする利点はsanitize.cssの説明を読んでほしいっす。フォームに関連する要素もA modern CSS resetと名乗るとおり、大胆にユーザーエージェントスタイルシートの宣言をリセットしているっす。

152 |
153 | 154 | 169 |
170 |
171 | 172 | 205 | 206 | 220 | 221 | 222 | -------------------------------------------------------------------------------- /docs/ch03.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Reset CSSでどのような宣言がされているか | Reset CSSフレンズ 9 | 10 | 11 | 12 | 20 | 21 | 22 | 23 |
24 |
25 |
26 | Reset CSSフレンズ 27 |

28 | 紙の本 + PDFをBOOTHで頒布しています。 29 | powered by Re:VIEW 30 |

31 |
32 |
33 |
34 | 35 |
36 |
37 |

38 | Reset CSSフレンズでは、内容の改善や頒布数の決定を目的にGoogle アナリティクスでアクセス情報を匿名のトラフィックデータという形で収集・解析しています。データの収集を無効化したい場合はこちらのリンクより無効にする事ができます。 39 |

40 |
41 | 42 |
43 | 53 | 54 |
55 |

第3章　Reset CSSでどのような宣言がされているか

56 |

われわれはかしこいのでReset CSSでどのような宣言があるか教えるです。その前に教えてほしければ料理をよこすのです。

57 |

…満腹、満足です。解説が終わったらおかわりをよこすのです。

58 |

ブラウザがWeb上のページを読み込むときに既定で適用されるスタイルとして、ユーザーエージェントスタイルシートがあるです。ユーザーエージェントスタイルシートの内容はブラウザごとに次のURLで見られるのです。

59 | 64 |

Reset CSSはユーザーエージェントスタイルシートの宣言をリセットするためにあるです。これからReset CSSのスタイル宣言を一部ユーザーエージェントスタイルシートでの宣言も教えつつ見ていくのです。ちなみに解説するHTMLの要素は（リスト3.1）のみに絞るです。

65 |
66 |

リスト3.1: 解説するHTML要素一覧

67 | 
html, body, img,
 68 | ul, ol, li,
 69 | table, tr, td,
 70 | h1, p, a, blockquote, br,
 71 | section, article, nav, aside,
 72 | input, textarea, button, select
 73 |
74 |
75 | 76 |

3.1　html要素

77 |

まずはhtml要素です。ChromeとSafariではdisplay: block;の宣言だけなのです。Firefoxではdisplay: block;以外にも、unicode-bidi: isolate;という複数の表記方向が混ざる文章をどのように扱うか決める宣言もされているのです。unicode-bidiプロパティの値が表示にどう影響をあたえるかは「CSS: unicode-bidi プロパティ - Unicode文字の表記方向*1」を見るです。

78 |

[*1] http://www.osaka-kyoiku.ac.jp/~joho/html5_ref/css/unicode-bidi_css.php

79 |

sanitize.cssとressは、html要素へ対しbox-sizing: border-box;を宣言した上で、ユニバーサルセレクタへbox-sizing: inherit;を宣言しているです。これでコンテンツ領域にpaddingやborderの値が入るようになるのです。これでボックスサイズの計算がより簡単になるのです。

80 | 81 |

3.2　body要素

82 |

body要素はChrome・Firefox・Safariで同じスタイル宣言なのです（リスト3.2）。

83 |
84 |

リスト3.2: body要素に対するスタイル定義

85 | 
body {
 86 |   display: block;
 87 |   margin: 8px;
 88 | }
 89 |
90 |
91 |

margin: 8px;の宣言は多くのWebサイトでいらない宣言なので、Reset CSSでmargin: 0;と宣言されることが多いのです。margin: 0;と宣言しているReset CSSはEric Meyer's Reset CSS、sanitize.css、YUI 3 Reset CSSがあるです。normalize.cssもv5.0.0まではbody要素に同じ宣言があったです。v6.0.0で削除されて何もなくなったのです。

92 | 93 |

3.3　セクショニング・コンテンツとh1要素

94 |

h1要素は見出しを表す要素の中でもっともランクが高い要素です。section要素やarticle要素といったセクショニング・コンテンツへh1要素を入れ子した場合は、深さに応じてスタイルが変わるのです（リスト3.3）。

95 |
96 |

リスト3.3: h1要素に対するスタイル定義

97 | 
/* Chrome, Safari */
 98 | h1 {
 99 |   display: block;
100 |   font-size: 2em;
101 |   -webkit-margin-before: 0.67__qem;
102 |   -webkit-margin-after: 0.67em;
103 |   -webkit-margin-start: 0;
104 |   -webkit-margin-end: 0;
105 |   font-weight: bold
106 | }
107 | :-webkit-any(article,aside,nav,section) h1 {
108 |   font-size: 1.5em;
109 |   -webkit-margin-before: 0.83__qem;
110 |   -webkit-margin-after: 0.83em;
111 | }
112 | :-webkit-any(article,aside,nav,section) :-webkit-any(article,aside,nav,section)
113 | h1 {
114 |   font-size: 1.17em;
115 |   -webkit-margin-before: 1__qem;
116 |   -webkit-margin-after: 1em;
117 | }
118 | 
119 | /* Firefox */
120 | h1 {
121 |   display: block;
122 |   font-size: 2em;
123 |   font-weight: bold;
124 |   margin-block-start: .67em;
125 |   margin-block-end: .67em;
126 | }
127 | 
128 | h2,
129 | :-moz-any(article, aside, nav, section)
130 | h1 {
131 |   display: block;
132 |   font-size: 1.5em;
133 |   font-weight: bold;
134 |   margin-block-start: .83em;
135 |   margin-block-end: .83em;
136 | }
137 | 
138 | h3,
139 | :-moz-any(article, aside, nav, section)
140 | :-moz-any(article, aside, nav, section)
141 | h1 {
142 |   display: block;
143 |   font-size: 1.17em;
144 |   font-weight: bold;
145 |   margin-block-start: 1em;
146 |   margin-block-end: 1em;
147 | }
148 |
149 |
150 |

normalize.cssやsanitize.cssでは入れ子の深さによってスタイルが変わるのを無くしているです（リスト3.4）。

151 |
152 |

リスト3.4: h1要素に対するnormalize.cssやsanitize.cssのスタイル定義

153 | 
/**
154 |  * Correct the font size and margin on `h1` elements within `section` and
155 |  * `article` contexts in Chrome, Firefox, and Safari.
156 |  */
157 | 
158 | h1 {
159 |   font-size: 2em;
160 |   margin: 0.67em 0;
161 | }
162 |
163 |
164 |

YUI 3 Reset CSSやEric Meyer's Reset CSSでは見出しらしいスタイルをすべて無くしているのです（リスト3.5）。

165 |
166 |

リスト3.5: h1要素に対するYUI 3 Reset CSSやEric Meyer's Reset CSSのスタイル定義

167 | 
h1 {
168 |   margin:0;
169 |   padding:0;
170 |   font-size:100%;
171 |   font-weight:normal;
172 | }
173 |
174 |
175 | 176 |

3.4　p要素

177 |

Firefoxでは文字のレイアウト方向や向き、文字が流れる方向を元にmarginを適用するmargin-block-startやmargin-block-endを宣言しているです。CSSのプロパティはそれぞれ、文字のレイアウト方向はwriting-mode、文字の向きはtext-orientation、文字の流れる方向はdirectionに対応しているのです。ChromeやSafariではmargin-beforeやmargin-afterといったプロパティが宣言されて、値に1__qemが指定されているのです。互換性モードで表示するときにmarginの相殺をおこなわないためなのです。

178 |

YUI 3 Reset CSSやEric Meyer's Reset CSSなど古めのReset CSSではmarginとpaddingが0になっているのです。新しいReset CSSでは特に宣言がないのです。これは新しく縦書きという概念が出てきたので、Reset CSSで文字の方向や向き、流れる方向を意識しだしたからです。結果としてユーザーエージェントスタイルシートをそのまま使ったほうがいいとなったのです。

179 | 180 |

3.5　a要素

181 |

a要素は各ブラウザのユーザーエージェントスタイルシートではスタイル宣言がないのです。normalize.cssやsanitize.css、ressではIEとSafari向けのスタイル宣言をしているです（リスト3.6）。

182 |
183 |

リスト3.6: a要素に対するReset CSSのスタイル定義

184 | 
/**
185 |  * 1. Remove the gray background on active links in IE 10.
186 |  * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
187 |  */
188 | 
189 | a {
190 |   background-color: transparent; /* 1 */
191 |   -webkit-text-decoration-skip: objects; /* 2 */
192 | }
193 |
194 |
195 |

background-color: transparent;が宣言されているのは、IE 10でリンクをクリックしたときにグレーの背景がついてしまうのを防ぐためです。-webkit-text-decoration-skip: objects;という宣言は、英語やロシア語という言葉の一部文字をリンクの文字に指定したとき、下線が途切れてしまうのを防ぐためなのです*2。

196 |

[*2] https://github.com/necolas/normalize.css/pull/573

197 | 198 |

3.6　img要素

199 |

img要素はiOSのSafariでタップしたときにハイライトを適用しないようにしているのです（リスト3.7）。

200 |
201 |

リスト3.7: img要素に対するSafariのスタイル定義

202 | 
#if defined(WTF_PLATFORM_IOS) && WTF_PLATFORM_IOS
203 | img {
204 |   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
205 | }
206 | :any-link img {
207 |   -webkit-tap-highlight-color: inherit;
208 | }
209 | #endif
210 |
211 |
212 |

normalize.cssやsanitize.css、ressではIE 10でリンク内に画像があるとborderが適用されるのを防ぐため、border-style: none;が宣言されているです（リスト3.8）。

213 |
214 |

リスト3.8: img要素に対する各種Reset CSSのスタイル定義

215 | 
/**
216 |  * Remove the border on images inside links in IE 10-.
217 |  */
218 | 
219 | img {
220 |   border-style: none;
221 | }
222 |
223 |
224 | 225 |

3.7　ul, ol要素

226 |

ulやol要素はFirefoxやChrome、Safariで論理marginと論理paddingが宣言されているです（リスト3.9）。

227 |
228 |

リスト3.9: ul要素に対するSafariのスタイル定義

229 | 
ul {
230 |   display: block;
231 |   list-style-type: disc;
232 |   margin-block-start: 1em;
233 |   margin-block-end: 1em;
234 |   padding-inline-start: 40px;
235 | }
236 |
237 |
238 |

ulやol要素が入れ子になったとき、FirefoxとChrome、Safariで宣言しているプロパティは同じなのですが、セレクタの宣言方法が違うのです。Firefoxでは:any()という疑似クラスを使って、ulやol要素などが入れ子になったときのスタイル宣言をおこなっているです*3（リスト3.10）。:any()擬似クラスは、CSS Selectors Level 4では:matches()として仕様策定が進んでいるのです*4。

239 |

[*3] https://developer.mozilla.org/ja/docs/Web/CSS/:any

240 |

[*4] https://drafts.csswg.org/selectors-4/#matches

241 |
242 |

リスト3.10: 入れ子になったul要素に対するFirefoxのスタイル定義

243 | 
/* nested lists have no top/bottom margins */
244 | :-moz-any(ul, ol, dir, menu, dl) ul,
245 | :-moz-any(ul, ol, dir, menu, dl) ol {
246 |   margin-block-start: 0;
247 |   margin-block-end: 0;
248 | }
249 | 
250 | /* 2 deep unordered lists use a circle */
251 | :-moz-any(ol, ul, menu, dir) ul {
252 |   list-style-type: circle;
253 | }
254 | 
255 | /* 3 deep (or more) unordered lists use a square */
256 | :-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) ul {
257 |   list-style-type: square;
258 | }
259 |
260 |
261 |

ただ:any()や:matches()の仕様が固まっていないので、ChromeやSafariでは従来どおりの子孫セレクタを使った宣言になっているです（リスト3.11）。

262 |
263 |

リスト3.11: 入れ子になったul要素に対するChromeやSafariのスタイル定義

264 | 
ul ul,
265 | ol ul {
266 |     list-style-type: circle
267 | }
268 | ol ol ul,
269 | ol ul ul,
270 | ul ol ul,
271 | ul ul ul {
272 |     list-style-type: square
273 | }
274 |
275 |
276 |

sanitize.cssでは、nav要素が親要素のときにulとol要素にlist-style: none;の宣言をしているです（リスト3.12）。nav要素内にあるulとol要素にlist-styleの値はあまり宣言しないので、このような宣言になっているです。

277 |
278 |

リスト3.12: sanitize.cssのulやol要素に対するスタイル宣言

279 | 
/**
280 |  * Remove the list style on navigation lists in all browsers (opinionated).
281 |  */
282 | 
283 | nav ol,
284 | nav ul {
285 |   list-style: none;
286 | }
287 |
288 |
289 | 290 |

3.8　table要素

291 |

Firefoxでtable要素の非推奨となった属性にスタイル宣言をしているのが面白いのです。たとえばalignやframe、rulesが挙げられるです（リスト3.13）。

292 |
293 |

リスト3.13: Firefoxで宣言されている非推奨の属性に対してのスタイル宣言（一部）

294 | 
table[align="left"] {
295 |   float: left;
296 | }
297 | 
298 | table[align="right"] {
299 |   float: right;
300 |   text-align: start;
301 | }
302 | 
303 | table[rules] {
304 |   border-width: thin;
305 |   border-style: hidden;
306 | }
307 |
308 |
309 |

他にもFirefoxだけ-moz-is-htmlという擬似クラスのようなセレクタ宣言があるです（リスト3.14）。この宣言は何が起こるのか謎なのです。かしこいわれわれでも分からないことはあるのです*5。

310 |

[*5] https://jsfiddle.net/f3rp4kmu/

311 |
312 |

リスト3.14: -moz-is-htmlという謎の擬似クラスっぽいセレクタ

313 | 
tr > form:-moz-is-html, tbody > form:-moz-is-html,
314 | thead > form:-moz-is-html, tfoot > form:-moz-is-html,
315 | table > form:-moz-is-html {
316 |   /* Important: don't show these forms in HTML */
317 |   display: none !important;
318 | }
319 |
320 |
321 |

sanitize.cssではborder-collapse: collapse;の宣言があるです（リスト3.15）。これによってtableのborderがセル同士で共有されるです。セル同士をくっつけて表示したいときは便利なのです。

322 |
323 |

リスト3.15: sanitize.cssのtable要素に対する宣言

324 | 
/**
325 |  * Collapse border spacing
326 |  */
327 | 
328 | table {
329 |   border-collapse: collapse;
330 | }
331 |
332 |
333 |

border-collapseの値が表示へどのように影響するのかは図3.1で示すとおりなのです。

334 |
335 | border-collapseの宣言によって表示が変わる 336 |

337 | 図3.1: border-collapseの宣言によって表示が変わる 338 |

339 |
340 | 341 |

3.9　blockquote要素

342 |

blockquote要素はFirefoxで[type=cite]という属性へスタイル宣言があるのです（リスト3.16）。この属性はいまW3Cの仕様には無いですが、過去にはあってFirefoxではいい感じの見た目になるのです（図3.2）。

343 |
344 |

リスト3.16: blockquote要素に対してのスタイル宣言

345 | 
blockquote {
346 |   display: block;
347 |   margin-block-start: 1em;
348 |   margin-block-end: 1em;
349 |   margin-inline-start: 40px;
350 |   margin-inline-end: 40px;
351 | }
352 | 
353 | blockquote[type=cite] {
354 |   display: block;
355 |   margin-block-start: 1em;
356 |   margin-block-end: 1em;
357 |   margin-inline-start: 0;
358 |   margin-inline-end: 0;
359 |   padding-inline-start: 1em;
360 |   border-inline-start: solid;
361 |   border-color: blue;
362 |   border-width: thin;
363 | }
364 |
365 |
366 |
367 | Firefoxでblockquote[type=&quot;cite&quot;]をプレビューしてみた様子 368 |

369 | 図3.2: Firefoxでblockquote[type="cite"]をプレビューしてみた様子 370 |

371 |
372 |

Eric Meyer's Reset CSSでは、blockquoteやq要素で引用符を消すスタイル宣言があるです（リスト3.17）。

373 |
374 |

リスト3.17: Eric Meyer's Reset CSSのblockquote要素に対するスタイル宣言

375 | 
blockquote, q {
376 |   quotes: none;
377 | }
378 | blockquote:before, blockquote:after,
379 | q:before, q:after {
380 |   content: '';
381 |   content: none;
382 | }
383 |
384 |
385 | 386 |

3.10　input要素

387 |

input要素はtype属性の値によって動きが大きく変わるのです（図3.3）。まるでパンサーカメレオンのようなのです。input要素関連のスタイル宣言はChromeのユーザーエージェントスタイルシートで1123行中295行、Safariは1221行中421行も充てられているのです*6。Firefoxは895行中24行がinput要素関連のスタイル宣言に充てられているです。

388 |

[*6] SafariはiOS向けのスタイル宣言もあるので行数が多いかもしれないです

389 |
390 | input要素はtype属性の値によって挙動が大きく変わる 391 |

392 | 図3.3: input要素はtype属性の値によって挙動が大きく変わる 393 |

394 |
395 |

Reset CSSのinput要素に対する宣言はnormalize.css、sanitize.css、ressそれぞれで似ていますが微妙に違うのです。それぞれのライブラリでどのように宣言されているか解説していくです。

396 | 397 |

normalize.css

398 |

normalize.cssはブラウザ間の違いをなくす宣言だけなのです（リスト3.18）。これもv6.0.0から作者の意見を入れないようにしたnormalize.cssの特徴が示されているのです。

399 |
400 |

リスト3.18: あくまでブラウザ間の差異を埋める程度に留めるnormalize.css

401 | 
/**
402 |  * Remove the margin in Firefox and Safari.
403 |  */
404 | 
405 | button,
406 | input,
407 | optgroup,
408 | select,
409 | textarea {
410 |   margin: 0;
411 | }
412 | 
413 | /**
414 |  * Show the overflow in IE.
415 |  * 1. Show the overflow in Edge.
416 |  */
417 | 
418 | button,
419 | input { /* 1 */
420 |   overflow: visible;
421 | }
422 |
423 |
424 | 425 |

sanitize.css

426 |

normalize.cssの宣言を元に、font-sizeやline-heightの値としてinheritが宣言されているのです（リスト3.19）。親要素の宣言を受け継ぐことによって、スタイル宣言することを極力減らすようにしているです。優しいのです。

427 |
428 |

リスト3.19: normalize.cssより作者の主張が含まれているsanitize.css

429 | 
/**
430 | * Remove the margin in Firefox and Safari.
431 | */
432 | 
433 | button,
434 | input,
435 | optgroup,
436 | select,
437 | textarea {
438 |   margin: 0;
439 | }
440 | 
441 | /**
442 | * Inherit styling in all browsers (opinionated).
443 | */
444 | 
445 | button,
446 | input,
447 | select,
448 | textarea {
449 |   background-color: transparent;
450 |   color: inherit;
451 |   font-size: inherit;
452 |   line-height: inherit;
453 | }
454 | 
455 | /**
456 | * Show the overflow in IE.
457 | * 1. Show the overflow in Edge.
458 | */
459 | 
460 | button,
461 | input { /* 1 */
462 |   overflow: visible;
463 | }
464 |
465 |
466 |

input要素への宣言として他にないものはtouch-action: manipulation;なのです（リスト3.20）。ページのスクロールとズームのみを許可する宣言なのですが、IE 10だとタップ時の遅延もなくなるのです。

467 |
468 |

リスト3.20: IE 10でタップ時の遅延を無くすCSS

469 | 
/*
470 |  * Remove the tapping delay on clickable elements (opinionated).
471 |  * 1. Remove the tapping delay in IE 10.
472 |  */
473 | 
474 | a,
475 | area,
476 | button,
477 | input,
478 | label,
479 | select,
480 | summary,
481 | textarea,
482 | [tabindex] {
483 |   -ms-touch-action: manipulation; /* 1 */
484 |   touch-action: manipulation;
485 | }
486 |
487 |
488 | 489 |

ress

490 |

ressもsanitize.css、もしくはそれ以上に作者の意見が反映されているのです（リスト3.21）。[type="button"]や[type="submit"]、[type="search"]はブラウザのユーザーエージェントスタイルシートでborder-radiusが適用されているですが、ressでは無かったことになっているです。他にもbackground-colorを透過させたりborder-styleを無くしたり大胆なのです。

491 |
492 |

リスト3.21: normalize.cssと同じく主張が強いress

493 | 
input {
494 |   border-radius: 0;
495 | }
496 | 
497 | button,
498 | input,
499 | optgroup,
500 | select,
501 | textarea {
502 |   font: inherit; /* Specify font inheritance of form elements */
503 | }
504 | 
505 | /* Remove the default button styling in all browsers */
506 | button,
507 | input,
508 | select,
509 | textarea {
510 |   background-color: transparent;
511 |   border-style: none;
512 |   color: inherit;
513 | }
514 |
515 |
516 | 517 |

3.11　select要素

518 |

select要素はChromeとSafariでtext-transform: none;の宣言がされているのです。しかしEdgeとFirefoxでは宣言がないので、normalize.cssとsanitize.cssには同じ宣言があるです（リスト3.22）。

519 |
520 |

リスト3.22: normalize.cssとsanitize.cssではtext-transform: none;の宣言だけ

521 | 
/**
522 |  * Remove the inheritance of text transform in Edge, Firefox, and IE.
523 |  * 1. Remove the inheritance of text transform in Firefox.
524 |  */
525 | 
526 | button,
527 | select { /* 1 */
528 |   text-transform: none;
529 | }
530 |
531 |
532 | 533 |

ress

534 |

normalize.cssやsanitize.cssと違って自分の道を歩いているのがressなのです。text-transform: none;も宣言していますが、他にもselect要素らしい見た目を無くすappearanceやIE独自の疑似要素へスタイルを宣言しているのです（リスト3.23）。::-ms-expandはドロップダウンの項目を見るためのボタンを表す疑似要素で、::-ms-valueはselect要素内の文字を表す疑似要素なのです*7。

535 |

[*7] http://subtech.g.hatena.ne.jp/mayuki/20110923/1316786871

536 |
537 |

リスト3.23: ressはselect要素でも独自路線

538 | 
/* Style select like a standard input */
539 | select {
540 |   -moz-appearance: none; /* Firefox 36+ */
541 |   -webkit-appearance: none; /* Chrome 41+ */
542 | }
543 | 
544 | select::-ms-expand {
545 |   display: none; /* Internet Explorer 11+ */
546 | }
547 | 
548 | select::-ms-value {
549 |   color: currentColor; /* Internet Explorer 11+ */
550 | }
551 |
552 |
553 | 554 |

3.12　button要素

555 |

normalize.cssやsanitize.css、ressではWebKitのバグを修正するセレクタ宣言やプロパティと値の宣言をしているです（リスト3.24）。Firefoxでもbutton要素内に画像を置いたときに生まれるborderと画像の間にある隙間が埋まるようにしてあるのです*8。

556 |

[*8] http://jeffreyfrancesco.org/weblog/2011062101/

557 |
558 |

リスト3.24: normalize.cssとsanitize.css、ressの共通宣言

559 | 
@mapfile(../codes/reset-css/normalize-css/button.css)
560 | /**
561 |  * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
562 |  *    controls in Android 4.
563 |  * 2. Correct the inability to style clickable types in iOS and Safari.
564 |  */
565 | 
566 | button,
567 | html [type="button"], /* 1 */
568 | [type="reset"],
569 | [type="submit"] {
570 |   -webkit-appearance: button; /* 2 */
571 | }
572 | 
573 | /**
574 |  * Remove the inner border and padding in Firefox.
575 |  */
576 | 
577 | button::-moz-focus-inner,
578 | [type="button"]::-moz-focus-inner,
579 | [type="reset"]::-moz-focus-inner,
580 | [type="submit"]::-moz-focus-inner {
581 |   border-style: none;
582 |   padding: 0;
583 | }
584 | 
585 | /**
586 |  * Restore the focus styles unset by the previous rule.
587 |  */
588 | 
589 | button:-moz-focusring,
590 | [type="button"]:-moz-focusring,
591 | [type="reset"]:-moz-focusring,
592 | [type="submit"]:-moz-focusring {
593 |   outline: 1px dotted ButtonText;
594 | }
595 |
596 |
597 | 598 |

ress

599 |

ressはnormalize.cssやsanitize.cssと同じ宣言もあるですが、独自にcursor: pointer;やoverflow: visible;が宣言されているです（リスト3.25）。cursor: pointer;はユーザーエージェントスタイルシートでカーソルの宣言がないのでressで宣言しているのです。overflow: visible;はコメントにもあるように、IE8〜11はbutton要素の値としてhiddenが宣言されているのです。その宣言を無くすためにoverflow: visible;が宣言されているです。

600 |
601 |

リスト3.25: ressのbutton要素へ対する宣言

602 | 
/* Apply cursor pointer to button elements */
603 | button,
604 | [type="button"],
605 | [type="reset"],
606 | [type="submit"],
607 | [role="button"] {
608 |   cursor: pointer;
609 | }
610 | 
611 | button {
612 |   overflow: visible; /* Address `overflow` set to `hidden` in IE 8/9/10/11 */
613 | }
614 |
615 |
616 | 617 |

3.13　textarea要素

618 |

textarea要素はnormalize.cssやsanitize.css、ressで似た宣言がされているです。

619 | 620 |

normalize.css

621 |

normalize.cssの宣言は単純なのです。IE向けにtextarea要素内のスクロールバーを消すだけの宣言だけです（リスト3.26）。

622 |
623 |

リスト3.26: normalize.cssのtextarea要素へ対する宣言

624 | 
/**
625 |  * Remove the default vertical scrollbar in IE.
626 |  */
627 | 
628 | textarea {
629 |   overflow: auto;
630 | }
631 |
632 |
633 | 634 |

sanitize.cssとress

635 |

sanitize.cssとressは、normalize.cssの宣言に加えてtextarea要素がリサイズできる方向を縦だけにする宣言がされているのです（リスト3.27）。

636 |
637 |

リスト3.27: sanitize.cssとressのtextarea要素へ対する宣言

638 | 
/**
639 |  * 1. Remove the default vertical scrollbar in IE.
640 |  * 2. Change the resize direction on textareas in all browsers (opinionated).
641 |  */
642 | 
643 | textarea {
644 |   overflow: auto; /* 1 */
645 |   resize: vertical; /* 2 */
646 | }
647 |
648 |
649 | 650 |

YUI 3 Reset CSS

651 |

書かれた時期が古いので、IE 7以下で使えるCSSハックが書かれているです（リスト3.28）。*font-size:100%という書き方は@ITの「IE 6とIE 7のCSSハック16選」内にあるアスタリスクハック*9を見るのです。…見なくてもよいのです。

652 |

[*9] http://www.atmarkit.co.jp/fwcr/design/benkyo/csshack02/03.html#13

653 |
654 |

リスト3.28: YUI 3のtextarea要素へ対する宣言

655 | 
input,
656 | textarea,
657 | select {
658 |   font-family:inherit;
659 |   font-size:inherit;
660 |   font-weight:inherit;
661 |   *font-size:100%; /*to enable resizing for IE*/
662 | }
663 |
664 |
665 | 666 |

3.14　まとめ

667 |

Reset CSSといってもライブラリによって思想や宣言内容が違うのです。フレンズによって得意なことは違うのです。その中から自分が作ろうとしているものに適したReset CSSを選ぶのが重要なのです。カレーのスパイスが重要なのと一緒なのです。

668 |

われわれとしては、Eric Meyer's Reset CSSやnormalize.css、sanitize.cssはブラウザ既定の見た目を大幅に上書きしなければ使えるです。たとえば会社のWebサイトやキャンペーンサイトが挙げられるのです。

669 |

ressは大幅にブラウザ既定の見た目を書き換えたいときに使えるです。たとえばWebアプリやElectronで作るデスクトップアプリなどです。

670 |
671 | 672 | 687 |
688 |
689 | 690 | 723 | 724 | 738 | 739 | 740 | -------------------------------------------------------------------------------- /docs/credit.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 権利情報 | Reset CSSフレンズ 9 | 10 | 11 | 12 | 20 | 21 | 22 | 23 |
24 |
25 |
26 | Reset CSSフレンズ 27 |

28 | 紙の本 + PDFをBOOTHで頒布しています。 29 | powered by Re:VIEW 30 |

31 |
32 |
33 |
34 | 35 |
36 |
37 |

38 | Reset CSSフレンズでは、内容の改善や頒布数の決定を目的にGoogle アナリティクスでアクセス情報を匿名のトラフィックデータという形で収集・解析しています。データの収集を無効化したい場合はこちらのリンクより無効にする事ができます。 39 |

40 |
41 | 42 |
43 | 53 | 54 |
55 |

権利情報

56 |

次のReset CSSはPublic DomainまたはCC 0ライセンスが適用されています。

57 |
    58 |
  • Eric Meyer's Reset CSS
    • 59 |
  • sanitize.css
    • 60 |
61 | 62 |

MDN

63 |

Licensed under CC-BY-SA 2.5, © 2005-2017 Mozilla Developer Network & Mozilla Contributors.

64 |

http://creativecommons.org/licenses/by-sa/2.5/

65 | 66 |

YUI 3

67 |

The BSD License Copyright, (c) 2013 Yahoo! Inc. All rights reserved.

68 |

https://github.com/yui/yui3/blob/master/LICENSE.md

69 | 70 |

normalize.css

71 |

The MIT License (MIT), Copyright © Nicolas Gallagher and Jonathan Neal.

72 |

https://github.com/necolas/normalize.css/blob/master/LICENSE.md

73 | 74 |

ress

75 |

The MIT License (MIT), Copyright © 2016 Filipe Linhares.

76 |

https://github.com/filipelinhares/ress/blob/master/LICENSE.md

77 |
78 | 79 | 89 |
90 |
91 | 92 | 125 | 126 | 140 | 141 | 142 | -------------------------------------------------------------------------------- /docs/images/firefox-blockquote-type-cite.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/o2project/reset-css-friends/5dc396c8d2791b54465186521c4c7ff10cc7760c/docs/images/firefox-blockquote-type-cite.png -------------------------------------------------------------------------------- /docs/images/firefox-font.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/o2project/reset-css-friends/5dc396c8d2791b54465186521c4c7ff10cc7760c/docs/images/firefox-font.png -------------------------------------------------------------------------------- /docs/images/input-types.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/o2project/reset-css-friends/5dc396c8d2791b54465186521c4c7ff10cc7760c/docs/images/input-types.png -------------------------------------------------------------------------------- /docs/images/safari-font.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/o2project/reset-css-friends/5dc396c8d2791b54465186521c4c7ff10cc7760c/docs/images/safari-font.png -------------------------------------------------------------------------------- /docs/images/table-border-collapse.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/o2project/reset-css-friends/5dc396c8d2791b54465186521c4c7ff10cc7760c/docs/images/table-border-collapse.png -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | はじめに | Reset CSSフレンズ 9 | 10 | 11 | 12 | 20 | 21 | 22 | 23 |
24 |
25 |
26 | Reset CSSフレンズ 27 |

28 | 紙の本 + PDFをBOOTHで頒布しています。 29 | powered by Re:VIEW 30 |

31 |
32 |
33 |
34 | 35 |
36 |
37 |

38 | Reset CSSフレンズでは、内容の改善や頒布数の決定を目的にGoogle アナリティクスでアクセス情報を匿名のトラフィックデータという形で収集・解析しています。データの収集を無効化したい場合はこちらのリンクより無効にする事ができます。 39 |

40 |
41 | 42 |
43 | 53 | 54 |
55 |

はじめに

56 |

本書はReset CSSについて4つの視点から説明する本です。

57 |
    58 |
  • そもそもReset CSSとは
    • 59 |
  • なぜReset CSSを使うのか
    • 60 |
  • 各Reset CSSの特徴
    • 61 |
  • 各Reset CSSのスタイル宣言
    • 62 |
63 | 64 |

本書の構成

65 |

本書は3章から成り立っています。

66 |
    67 |
  1. Reset CSSとは何か（かばんちゃんとサーバルによる解説）
    2. 68 |
  2. Reset CSSの特色（アメリカビーバーとオグロプレーリードッグによる解説）
    3. 69 |
  3. Reset CSSでどのような宣言がされているか（アフリカオオコノハズクとワシミミズクによる解説）
    4. 70 |
71 | 72 |

お問い合わせ先

73 |

本書に関するお問い合わせはta2+friends@o2p.jp、もしくはTwitterで@o2pjp宛へお問い合わせください。

74 | 75 |

免責事項

76 |

本書に記載された内容は情報の提供のみを目的としています。したがって、本書を用いた開発・製作・運用は必ずご自身の責任と判断によって行ってください。これらの情報による開発・製作・運用の結果について著者はいかなる責任も負いません。

77 |
78 | 79 | 89 |
90 |
91 | 92 | 125 | 126 | 140 | 141 | 142 | -------------------------------------------------------------------------------- /docs/titlepage.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | | Reset CSSフレンズ 9 | 10 | 11 |
12 | 24 |
25 |
26 |
27 |
28 |

Reset CSSフレンズ

O2 Project

ねこのしっぽ

29 | 31 | 36 |
37 |
38 |
39 |
40 | 41 | 42 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | const exec = require('child_process').exec 2 | const execSync = require('child_process').execSync 3 | const gulp = require('gulp') 4 | const sass = require('gulp-sass') 5 | const del = require('del') 6 | 7 | const repositoryName = 'o2project/reset-css-friends' 8 | const repository = process.env.GH_TOKEN 9 | ? `https://${process.env.GH_TOKEN}@github.com/${repositoryName}` 10 | : `git@github.com:${repositoryName}` 11 | 12 | const targetDir = 'articles' 13 | const tempDir = 'temp' 14 | const webrootDir = 'book' 15 | const publishBranch = 'master' 16 | const publishDir = 'docs' 17 | 18 | const redpenBin = 'redpen-distribution-*/bin/redpen' 19 | const redpenTargetFile = '*.re' 20 | const redpenConfigFile = 'redpen-conf-ja.xml' 21 | 22 | const reviewConfig = 'config.yml' 23 | const reviewPrefix = 'bundle exec' 24 | const reviewPreproc = `${reviewPrefix} review-preproc --replace` 25 | const reviewCompile = `${reviewPrefix} review-compile` 26 | const reviewWebMaker = `${reviewPrefix} review-webmaker` 27 | const reviewPdfMaker = `${reviewPrefix} review-pdfmaker` 28 | const reviewEpubMaker = `${reviewPrefix} review-epubmaker` 29 | 30 | gulp.task('clean', done => { 31 | del([`${targetDir}/${webrootDir}`]) 32 | .then(paths => { 33 | console.log('Deleted files and folders:\n', paths.join('\n')) 34 | done() 35 | }) 36 | }) 37 | 38 | gulp.task('preproc', done => { 39 | process.chdir(targetDir) 40 | 41 | exec(`${reviewPreproc} *.re`, (error) => { 42 | if (error != null) { 43 | console.error(error) 44 | } 45 | done() 46 | }) 47 | }) 48 | 49 | gulp.task('sass', () => { 50 | return gulp.src('./articles/css/*.scss') 51 | .pipe(sass().on('error', sass.logError)) 52 | .pipe(gulp.dest('./articles/')); 53 | }) 54 | 55 | gulp.task('web', ['sass', 'preproc'], done => { 56 | exec(`${reviewWebMaker} ${reviewConfig}`, (error) => { 57 | if (error != null) { 58 | console.error(error) 59 | } 60 | done() 61 | }) 62 | }) 63 | 64 | gulp.task('pdf', ['preproc'], done => { 65 | exec(`${reviewPdfMaker} ${reviewConfig}`, (error) => { 66 | if (error != null) { 67 | console.error(error) 68 | } 69 | done() 70 | }) 71 | }) 72 | 73 | gulp.task('redpen', done => { 74 | exec(`${redpenBin} -c ${redpenConfigFile} ${targetDir}/${redpenTargetFile}`, (error, stdout, stderr) => { 75 | // RedPen outputs log in stderr 76 | const stdOutput = stdout.replace(/\r?\n/g, '') 77 | if (error == null && stderr == null && stdOutput === '') { 78 | done() 79 | } 80 | 81 | // RedPen outputs error message in stdout 82 | if (stderr != null && stdOutput !== '') { 83 | console.error(stdout) 84 | setImmediate(() => process.exit(1)) 85 | } 86 | }) 87 | }) 88 | 89 | gulp.task('deploy', () => { 90 | execSync(`mkdir ${tempDir} || rm -rf ${tempDir}`) 91 | execSync(`git clone --quiet ${repository} ${tempDir} 2> /dev/null`) 92 | execSync(`npm run web`) 93 | execSync(`rm -rf ${tempDir}/${publishDir}/`) 94 | execSync(`mkdir ${tempDir}/${publishDir}/`) 95 | execSync(`echo friends.o2p.jp > ${tempDir}/${publishDir}/CNAME`) 96 | execSync(`cp ${targetDir}/${webrootDir}/*.* ${tempDir}/${publishDir}`) 97 | execSync(`cp -r ${targetDir}/${webrootDir}/images ${tempDir}/${publishDir}`) 98 | 99 | const sha = execSync('git rev-parse --verify HEAD').toString().substring(0, 7) 100 | 101 | process.chdir(tempDir) 102 | 103 | const remote = execSync('git remote').toString().replace(/\r?\n/g, '') 104 | 105 | execSync(`git add -A`) 106 | execSync(`git commit -m '[ci skip] update Web preview with ${sha}'`) 107 | execSync(`git push -u --quiet ${remote} ${publishBranch}`) 108 | }) 109 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "reset-css-friends", 3 | "version": "0.0.1", 4 | "description": "Reset CSSフレンズっていうのは、Reset CSSやそのほかのライブラリについてかくほんだよー！", 5 | "scripts": { 6 | "test": "gulp redpen", 7 | "setup": "bundle install --path vendor/bundle && npm install && ./bin/setup-redpen.sh", 8 | "deploy": "gulp deploy", 9 | "clean": "gulp clean", 10 | "pdf": "gulp pdf", 11 | "web": "gulp web" 12 | }, 13 | "repository": { 14 | "type": "git", 15 | "url": "git+ssh://git@github.com:o2project/reset-css-friends.git" 16 | }, 17 | "keywords": [ 18 | "book", 19 | "css", 20 | "reset-css", 21 | "kemono-friends" 22 | ], 23 | "author": "O2 Project", 24 | "license": "MIT", 25 | "private": true, 26 | "devDependencies": { 27 | "del": "^2.2.1", 28 | "gulp": "^3.9.1", 29 | "gulp-sass": "^3.1.0" 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /redpen-conf-ja.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /redpen-distribution-1.7.6/bin/redpen: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | ## 3 | ## RedPen startup script 4 | ## 5 | 6 | SCRIPT="$0" 7 | 8 | # SCRIPT may be an arbitrarily deep series of symlinks. Loop until we have the concrete path. 9 | while [ -h "$SCRIPT" ] ; do 10 | ls=`ls -ld "$SCRIPT"` 11 | # Drop everything prior to -> 12 | link=`expr "$ls" : '.*-> \(.*\)$'` 13 | if expr "$link" : '/.*' > /dev/null; then 14 | SCRIPT="$link" 15 | else 16 | SCRIPT=`dirname "$SCRIPT"`/"$link" 17 | fi 18 | done 19 | 20 | # Find RedPen home 21 | REDPEN_HOME=`dirname "$SCRIPT"`/.. 22 | 23 | # Make REDPEN_HOME absolute 24 | export REDPEN_HOME=`cd "$REDPEN_HOME"; pwd` 25 | REDPEN_CLASSPATH=$REDPEN_HOME/conf/*:$REDPEN_HOME/lib/* 26 | 27 | JAVA_CMD=java 28 | JAVA_OPTS="$JAVA_OPTS -Dlogback.configurationFile=$REDPEN_HOME/conf/logback.xml -Dfile.encoding=UTF-8" 29 | 30 | which $JAVA_CMD >/dev/null 31 | if [ $? != 0 ]; then 32 | if [ -z "$JAVA_HOME" ]; then 33 | echo "Error: JAVA_HOME is not defined. Can not start RedPen" 1>&2 34 | exit 1 35 | else 36 | JAVA_CMD=$JAVA_HOME/bin/java 37 | 38 | if [ ! -x "$JAVA_CMD" ]; then 39 | echo "Error: $JAVA_CMD is not execututable. Can not start RedPen" 1>&2 40 | exit 1 41 | fi 42 | fi 43 | fi 44 | 45 | exec "$JAVA_CMD" $JAVA_OPTS \ 46 | -classpath "$REDPEN_CLASSPATH" \ 47 | cc.redpen.Main \ 48 | "$@" 49 | -------------------------------------------------------------------------------- /redpen-distribution-1.7.6/bin/redpen-server: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | ## 3 | ## RedPen Server startup script 4 | ## 5 | 6 | # SCRIPT may be an arbitrarily deep series of symlinks. Loop until we have the concrete path. 7 | SCRIPT="$0" 8 | while [ -h "$SCRIPT" ] ; do 9 | ls=`ls -ld "$SCRIPT"` 10 | # Drop everything prior to -> 11 | link=`expr "$ls" : '.*-> \(.*\)$'` 12 | if expr "$link" : '/.*' > /dev/null; then 13 | SCRIPT="$link" 14 | else 15 | SCRIPT=`dirname "$SCRIPT"`/"$link" 16 | fi 17 | done 18 | 19 | # Find RedPen home 20 | REDPEN_HOME=`dirname "$SCRIPT"`/.. 21 | 22 | # Make REDPEN_HOME absolute 23 | export REDPEN_HOME=`cd "$REDPEN_HOME"; pwd` 24 | 25 | ##################################################### 26 | # 27 | # Configurations 28 | # 29 | ##################################################### 30 | 31 | # When this key is registered RedPen server is able to by http access. 32 | # If you do not want such behavior, please comment out STOP_KEY. 33 | STOP_KEY=redpen.stop 34 | 35 | # Port number for RedPen server 36 | REDPEN_PORT=8080 37 | 38 | # RedPen log file 39 | REDPEN_LOG_DIR=$REDPEN_HOME/logs 40 | REDPEN_LOG_FILENAME=redpen.log 41 | 42 | # RedPen configuration file 43 | # NOTE: If you want to specify RedPen configuration file, please uncomment out the following line. 44 | # NOTE: the configuration file need to be under REDPEN_HOME. 45 | # REDPEN_CONF_FILE=conf/redpen-conf-en.xml 46 | 47 | ##################################################### 48 | # 49 | # Main procedure 50 | # 51 | ##################################################### 52 | 53 | # set command 54 | COMMAND=start 55 | if [ -n "$1" ]; then 56 | COMMAND=$1 57 | fi 58 | 59 | JAVA_OPTS="$JAVA_OPTS -Dfile.encoding=UTF-8" 60 | REDPEN_WAR_FILE="$REDPEN_HOME/bin/redpen-server.war" 61 | JAVA_CMD=java 62 | 63 | which $JAVA_CMD >/dev/null 64 | if [ $? != 0 ]; then 65 | if [ -z "$JAVA_HOME" ]; then 66 | echo "Error: JAVA_HOME is not defined. Can not start RedPen" 1>&2 67 | exit 1 68 | else 69 | JAVA_CMD=$JAVA_HOME/bin/java 70 | 71 | if [ ! -x "$JAVA_CMD" ]; then 72 | echo "Error: $JAVA_CMD is not execututable. Can not start RedPen" 1>&2 73 | exit 1 74 | fi 75 | fi 76 | fi 77 | 78 | if [ ! -e "$REDPEN_LOG_DIR" ]; then 79 | echo "not found log dir: $REDPEN_LOG_DIR" 1>&2 80 | echo "creating log dir: $REDPEN_LOG_DIR" 1>&2 81 | mkdir $REDPEN_LOG_DIR 2>/dev/null 82 | if [ -e "$REDPEN_LOG_DIR" ]; then 83 | echo "created log dir: $REDPEN_LOG_DIR" 1>&2 84 | else 85 | REDPEN_LOG_DIR=/tmp 86 | echo "temporarily changed log dir: $REDPEN_LOG_DIR" 1>&2 87 | fi 88 | fi 89 | REDPEN_LOG_FILE="$REDPEN_LOG_DIR/$REDPEN_LOG_FILENAME" 90 | 91 | if [ $COMMAND = "start" ]; then 92 | if [ -n "$STOP_KEY" ]; then 93 | echo "starting RedPen server with stop key..." 1>&2 94 | if [ -z $REDPEN_CONF_FILE ]; then 95 | echo "starting RedPen server without specified configuration file..." 1>&2 96 | exec "$JAVA_CMD" -jar $JAVA_OPTS $REDPEN_WAR_FILE -p $REDPEN_PORT -key $STOP_KEY >> $REDPEN_LOG_FILE 2>&1 & 97 | else 98 | echo "starting RedPen server specifying a configuration file " $REDPEN_CONF_FILE " ..." 1>&2 99 | exec "$JAVA_CMD" -jar $JAVA_OPTS $REDPEN_WAR_FILE -p $REDPEN_PORT -key $STOP_KEY -c $REDPEN_CONF_FILE >> $REDPEN_LOG_FILE 2>&1 & 100 | fi 101 | exit 0 102 | fi 103 | echo "starting RedPen server without stop key..." 1>&2 104 | exec "$JAVA_CMD" -jar $JAVA_OPTS $REDPEN_WAR_FILE -p $REDPEN_PORT >> $REDPEN_LOG_FILE 2>&1 & 105 | exit 0 106 | elif [ $COMMAND = "stop" ]; then 107 | echo "stopping RedPen server" 1>&2 108 | curl -d "token=redpen.stop" http://localhost:$REDPEN_PORT/shutdown >> $REDPEN_LOG_FILE 2>&1 109 | exit 0 110 | else 111 | echo "Invalid command: $COMMAND" 1>&2 112 | exit 1 113 | fi 114 | -------------------------------------------------------------------------------- /redpen-distribution-1.7.6/bin/redpen-server.bat: -------------------------------------------------------------------------------- 1 | @echo off 2 | rem 3 | rem RedPen Server startup script 4 | rem 5 | 6 | rem Find RedPen home 7 | set REDPEN_HOME=%~dp0\.. 8 | 9 | rem Make REDPEN_HOME absolute 10 | pushd %REDPEN_HOME% 11 | set REDPEN_HOME=%CD% 12 | popd 13 | 14 | 15 | rem 16 | rem 17 | rem Configurations 18 | rem 19 | rem 20 | 21 | rem Port number for RedPen server 22 | set REDPEN_PORT=8080 23 | 24 | rem RedPen log file 25 | set REDPEN_LOG_DIR=%REDPEN_HOME%\logs 26 | set REDPEN_LOG_FILENAME=redpen.log 27 | 28 | rem RedPen configuration file 29 | rem NOTE: If you want to specify RedPen configuration file, please uncomment out the following line. 30 | rem NOTE: the configuration file need to be under REDPEN_HOME. 31 | rem set REDPEN_CONF_FILE=%REDPEN_HOME%\conf\redpen-conf-en.xml 32 | 33 | rem 34 | rem 35 | rem Main procedure 36 | rem 37 | rem 38 | 39 | rem set command 40 | set COMMAND=start 41 | if not [%1] == [] ( 42 | set COMMAND=%1 43 | ) 44 | 45 | set JAVA_OPTS=%JAVAOPTS% -Dfile.encoding=UTF-8 46 | set REDPEN_WAR_FILE=%REDPEN_HOME%\bin\redpen-server.war 47 | set JAVA_CMD=java.exe 48 | 49 | set JAVA_CMD_AT= 50 | @for %%i in (%JAVA_CMD%) do @if NOT "%%~$PATH:i"=="" set JAVA_CMD_AT="%%~$PATH" 51 | if ["%JAVA_CMD_AT%"] == [] ( 52 | if ["%JAVA_HOME%"] == [] ( 53 | echo Error: JAVA_HOME is not defined. Can not start RedPen 54 | exit /b 1 55 | ) else ( 56 | set JAVA_CMD="%JAVA_HOME%\bin\java.exe" 57 | rem Assuming java.exe in its HOME is always executable under the Windows 58 | ) 59 | ) 60 | 61 | if not exist "%REDPEN_LOG_DIR%" ( 62 | echo not found log dir: %REDPEN_LOG_DIR% 63 | echo creating log dir: %REDPEN_LOG_DIR% 64 | mkdir "%REDPEN_LOG_DIR%" 2>nul 65 | if exist "%REDPEN_LOG_DIR%" ( 66 | echo created log dir: %REDPEN_LOG_DIR% 67 | ) else ( 68 | if not ["%TEMP%"] == [] ( 69 | set REDPEN_LOG_DIR="%TEMP%" 70 | echo temporarily changed log dir: %REDPEN_LOG_DIR% 71 | ) else ( 72 | echo Error: TEMP is not defined. Can not start RedPen 73 | exit /b 1 74 | ) 75 | ) 76 | ) 77 | set REDPEN_LOG_FILE=%REDPEN_LOG_DIR%\%REDPEN_LOG_FILENAME% 78 | 79 | if ["%COMMAND%"] == ["start"] ( 80 | echo starting RedPen server [Ctrl-C to stop]... 81 | if not exist "%REDPEN_CONF_FILE%" ( 82 | echo starting RedPen server without specified configuration file... 83 | "%JAVA_CMD%" -jar %JAVA_OPTS% "%REDPEN_WAR_FILE%" -p %REDPEN_PORT% >> "%REDPEN_LOG_FILE%" 84 | ) else ( 85 | echo starting RedPen server specifying a configuration file %REDPEN_CONF_FILE% ... 86 | "%JAVA_CMD%" -jar %JAVA_OPTS% "%REDPEN_WAR_FILE%" -p %REDPEN_PORT% -c %REDPEN_CONF_FILE% >> "%REDPEN_LOG_FILE%" 87 | ) 88 | ) else ( 89 | echo Invalid command: %COMMAND% 90 | exit /b 1 91 | ) 92 | -------------------------------------------------------------------------------- /redpen-distribution-1.7.6/bin/redpen-server.war: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/o2project/reset-css-friends/5dc396c8d2791b54465186521c4c7ff10cc7760c/redpen-distribution-1.7.6/bin/redpen-server.war -------------------------------------------------------------------------------- /redpen-distribution-1.7.6/bin/redpen.bat: -------------------------------------------------------------------------------- 1 | @echo off 2 | 3 | SETLOCAL 4 | 5 | if NOT DEFINED JAVA_HOME goto err 6 | 7 | set SCRIPT_DIR=%~dp0 8 | 9 | for %%I in ("%SCRIPT_DIR%..") do set REDPEN_HOME=%%~dpfI 10 | 11 | set REDPEN_CLASSPATH=%REDPEN_HOME%/conf;%REDPEN_HOME%/lib/* 12 | set JAVA_OPTS=%JAVA_OPTS% -Dfile.encoding=UTF-8 13 | 14 | "%JAVA_HOME%\bin\java" %JAVA_OPTS% -classpath "%REDPEN_CLASSPATH%" cc.redpen.Main %* 15 | goto finally 16 | 17 | :err 18 | echo Error: JAVA_HOME is not defined. Can not start RedPen 19 | pause 20 | 21 | :finally 22 | ENDLOCAL 23 | -------------------------------------------------------------------------------- /redpen-distribution-1.7.6/conf/logback.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | System.err 5 | 6 | [%d{yyyy-MM-dd HH:mm:ss.SSS}][%-5level] %class - %msg%n 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /redpen-distribution-1.7.6/conf/redpen-conf-en.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /redpen-distribution-1.7.6/conf/redpen-conf-ja.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /redpen-distribution-1.7.6/conf/redpen-conf-plugin.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /redpen-distribution-1.7.6/js/test/redpen.js: -------------------------------------------------------------------------------- 1 | var http = require('http'); 2 | 3 | exports.callRedPen = function (request, assertion) { 4 | var options = { 5 | hostname: 'localhost', port: 8080, 6 | path: '/rest/document/validate/json', 7 | method: 'POST', 8 | headers: {'Content-Type': 'application/json'} 9 | }; 10 | 11 | var req = http.request(options, function (res) { 12 | var data = ''; 13 | res.on('data', function (chunk) { 14 | data += chunk; 15 | }); 16 | res.on('end', function () { 17 | errorSentences = JSON.parse(data).errors; 18 | assertion(errorSentences); 19 | }); 20 | }); 21 | req.write(JSON.stringify(request)); 22 | req.end(); 23 | 24 | } -------------------------------------------------------------------------------- /redpen-distribution-1.7.6/js/test/validator-js-test.js: -------------------------------------------------------------------------------- 1 | /* 2 | tests validator.js implementation. 3 | 4 | steps to run this test: 5 | 1. install mocha 6 | $ npm install -g mocha 7 | 8 | 2. run RedPen in server mode 9 | $ cd $REDPEN_HOME/bin 10 | $ ./redpen-server 11 | 12 | 3. rename validator.js.example to enable the validator implementation 13 | $ cd $REDPEN_HOME/js 14 | $ mv validator.js.example validator.js 15 | 16 | 4. run mocha 17 | $ cd $REDPEN_HOME/js 18 | $ mocha 19 | 20 | */ 21 | var assert = require('assert'); 22 | var redpen = require('./redpen'); 23 | 24 | describe('redpen-test', function () { 25 | it('test validator.js', function (done) { 26 | var request = { 27 | "document": "This sentence contains toolongword. This sentence doesn't contain too long word.", 28 | "format": "json2", 29 | "documentParser": "PLAIN", 30 | "config": { 31 | "lang": "en", 32 | "validators": { 33 | "JavaScript": {} 34 | 35 | } 36 | } 37 | }; 38 | var assertion = function (errorSentences) { 39 | // only one sentence contains error 40 | assert.equal(errorSentences.length, 1); 41 | firstErrorSentence = errorSentences[0]; 42 | assert.equal(firstErrorSentence.sentence, 'This sentence contains toolongword.'); 43 | // there is one too word exceeds 10 chalacteres long 44 | assert.equal(1, firstErrorSentence.errors.length); 45 | assert.equal('[validator.js] word [toolongword.] is too long. length: 12', firstErrorSentence.errors[0].message); 46 | done(); 47 | }; 48 | 49 | redpen.callRedPen(request, assertion); 50 | }); 51 | }); 52 | 53 | -------------------------------------------------------------------------------- /redpen-distribution-1.7.6/js/validator.js.example: -------------------------------------------------------------------------------- 1 | function validateSentence(sentence) { 2 | var content = sentence.getContent().split(" "); 3 | for(var i = 0; i= 10){ 5 | addError("word [" + content[i] +"] is too long. length: " + content[i].length, sentence); 6 | } 7 | } 8 | } 9 | 10 | // optionally, you can implement validation logic for document, section 11 | /* 12 | function preValidateSentence(sentence) { 13 | } 14 | function preValidateSection(section) { 15 | } 16 | function validateDocument(document) { 17 | } 18 | function validateSection(section) { 19 | } 20 | */ 21 | -------------------------------------------------------------------------------- /redpen-distribution-1.7.6/lib/annotations-2.0.1.jar: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/o2project/reset-css-friends/5dc396c8d2791b54465186521c4c7ff10cc7760c/redpen-distribution-1.7.6/lib/annotations-2.0.1.jar -------------------------------------------------------------------------------- /redpen-distribution-1.7.6/lib/asm-5.0.3.jar: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/o2project/reset-css-friends/5dc396c8d2791b54465186521c4c7ff10cc7760c/redpen-distribution-1.7.6/lib/asm-5.0.3.jar -------------------------------------------------------------------------------- /redpen-distribution-1.7.6/lib/asm-analysis-5.0.3.jar: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/o2project/reset-css-friends/5dc396c8d2791b54465186521c4c7ff10cc7760c/redpen-distribution-1.7.6/lib/asm-analysis-5.0.3.jar -------------------------------------------------------------------------------- /redpen-distribution-1.7.6/lib/asm-tree-5.0.3.jar: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/o2project/reset-css-friends/5dc396c8d2791b54465186521c4c7ff10cc7760c/redpen-distribution-1.7.6/lib/asm-tree-5.0.3.jar -------------------------------------------------------------------------------- /redpen-distribution-1.7.6/lib/asm-util-5.0.3.jar: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/o2project/reset-css-friends/5dc396c8d2791b54465186521c4c7ff10cc7760c/redpen-distribution-1.7.6/lib/asm-util-5.0.3.jar -------------------------------------------------------------------------------- /redpen-distribution-1.7.6/lib/commons-cli-1.2.jar: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/o2project/reset-css-friends/5dc396c8d2791b54465186521c4c7ff10cc7760c/redpen-distribution-1.7.6/lib/commons-cli-1.2.jar -------------------------------------------------------------------------------- /redpen-distribution-1.7.6/lib/commons-io-2.4.jar: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/o2project/reset-css-friends/5dc396c8d2791b54465186521c4c7ff10cc7760c/redpen-distribution-1.7.6/lib/commons-io-2.4.jar -------------------------------------------------------------------------------- /redpen-distribution-1.7.6/lib/commons-lang3-3.4.jar: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/o2project/reset-css-friends/5dc396c8d2791b54465186521c4c7ff10cc7760c/redpen-distribution-1.7.6/lib/commons-lang3-3.4.jar -------------------------------------------------------------------------------- /redpen-distribution-1.7.6/lib/guava-15.0.jar: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/o2project/reset-css-friends/5dc396c8d2791b54465186521c4c7ff10cc7760c/redpen-distribution-1.7.6/lib/guava-15.0.jar -------------------------------------------------------------------------------- /redpen-distribution-1.7.6/lib/javassist-3.19.0-GA.jar: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/o2project/reset-css-friends/5dc396c8d2791b54465186521c4c7ff10cc7760c/redpen-distribution-1.7.6/lib/javassist-3.19.0-GA.jar -------------------------------------------------------------------------------- /redpen-distribution-1.7.6/lib/json-20080701.jar: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/o2project/reset-css-friends/5dc396c8d2791b54465186521c4c7ff10cc7760c/redpen-distribution-1.7.6/lib/json-20080701.jar -------------------------------------------------------------------------------- /redpen-distribution-1.7.6/lib/kuromoji-core-0.9.0.jar: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/o2project/reset-css-friends/5dc396c8d2791b54465186521c4c7ff10cc7760c/redpen-distribution-1.7.6/lib/kuromoji-core-0.9.0.jar -------------------------------------------------------------------------------- /redpen-distribution-1.7.6/lib/kuromoji-ipadic-0.9.0.jar: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/o2project/reset-css-friends/5dc396c8d2791b54465186521c4c7ff10cc7760c/redpen-distribution-1.7.6/lib/kuromoji-ipadic-0.9.0.jar -------------------------------------------------------------------------------- /redpen-distribution-1.7.6/lib/logback-classic-1.1.1.jar: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/o2project/reset-css-friends/5dc396c8d2791b54465186521c4c7ff10cc7760c/redpen-distribution-1.7.6/lib/logback-classic-1.1.1.jar -------------------------------------------------------------------------------- /redpen-distribution-1.7.6/lib/logback-core-1.1.1.jar: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/o2project/reset-css-friends/5dc396c8d2791b54465186521c4c7ff10cc7760c/redpen-distribution-1.7.6/lib/logback-core-1.1.1.jar -------------------------------------------------------------------------------- /redpen-distribution-1.7.6/lib/parboiled-core-1.1.7.jar: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/o2project/reset-css-friends/5dc396c8d2791b54465186521c4c7ff10cc7760c/redpen-distribution-1.7.6/lib/parboiled-core-1.1.7.jar -------------------------------------------------------------------------------- /redpen-distribution-1.7.6/lib/parboiled-java-1.1.7.jar: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/o2project/reset-css-friends/5dc396c8d2791b54465186521c4c7ff10cc7760c/redpen-distribution-1.7.6/lib/parboiled-java-1.1.7.jar -------------------------------------------------------------------------------- /redpen-distribution-1.7.6/lib/pegdown-1.6.0.jar: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/o2project/reset-css-friends/5dc396c8d2791b54465186521c4c7ff10cc7760c/redpen-distribution-1.7.6/lib/pegdown-1.6.0.jar -------------------------------------------------------------------------------- /redpen-distribution-1.7.6/lib/redpen-cli-1.7.6.jar: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/o2project/reset-css-friends/5dc396c8d2791b54465186521c4c7ff10cc7760c/redpen-distribution-1.7.6/lib/redpen-cli-1.7.6.jar -------------------------------------------------------------------------------- /redpen-distribution-1.7.6/lib/redpen-core-1.7.6.jar: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/o2project/reset-css-friends/5dc396c8d2791b54465186521c4c7ff10cc7760c/redpen-distribution-1.7.6/lib/redpen-core-1.7.6.jar -------------------------------------------------------------------------------- /redpen-distribution-1.7.6/lib/reflections-0.9.10.jar: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/o2project/reset-css-friends/5dc396c8d2791b54465186521c4c7ff10cc7760c/redpen-distribution-1.7.6/lib/reflections-0.9.10.jar -------------------------------------------------------------------------------- /redpen-distribution-1.7.6/lib/slf4j-api-1.7.6.jar: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/o2project/reset-css-friends/5dc396c8d2791b54465186521c4c7ff10cc7760c/redpen-distribution-1.7.6/lib/slf4j-api-1.7.6.jar -------------------------------------------------------------------------------- /redpen-distribution-1.7.6/sample-doc/en/sampledoc-en.asciidoc: -------------------------------------------------------------------------------- 1 | = Instances Overview 2 | Author's Name 3 | v1.2, 2015-08 4 | 5 | This is the optional preamble (an untitled section body). Useful for writing simple sectionless documents consisting only of a preamble. 6 | 7 | NOTE: The abstract, preface, appendix, bibliography, glossary and index section titles are significant ('specialsections'). 8 | 9 | :numbered!: 10 | [abstract] 11 | [suppress='Contraction WeakExpression'] 12 | == Instances 13 | In this article, we'll call a computer server that works as a member of a cluster an _instance_. for example, as shown in this http://redpen.ignored.url/[mishpelled link], each instance in distributed search engines stores the the fractions of data. 14 | 15 | Such distriubuted systems need a component to merge the preliminary results from member instnaces. 16 | -------------------------------------------------------------------------------- /redpen-distribution-1.7.6/sample-doc/en/sampledoc-en.md: -------------------------------------------------------------------------------- 1 | 2 | # Distributed system 3 | Some software tools work in more than one machine, and such distributed (cluster)systems can handle huge data or tasks, because such software tools make use of large amount of computer resources. 4 | In this article, we'll call a computer server that works as a member of a cluster an "instance". for example, each instance in distributed search engines stores the the fractions of data. 5 | Such distriubuted systems need a component to merge the preliminary results from member instnaces. 6 | -------------------------------------------------------------------------------- /redpen-distribution-1.7.6/sample-doc/en/sampledoc-en.re: -------------------------------------------------------------------------------- 1 | #@# @suppress Contraction WeakExpression 2 | = Distributed system 3 | Some software tools work in more than one machine, and such distributed (cluster)systems can handle huge data or tasks, because such software tools make use of large amount of computer resources. 4 | In this article, we'll call a computer server that works as a member of a cluster an @{instance}. for example, each instance in distributed search engines stores the the fractions of data. 5 | Such distriubuted systems need a component to merge the preliminary results from member instnaces. 6 | -------------------------------------------------------------------------------- /redpen-distribution-1.7.6/sample-doc/en/sampledoc-en.tex: -------------------------------------------------------------------------------- 1 | \documentclass[a4paper, 10pt]{article} 2 | 3 | \usepackage{url} 4 | \usepackage{color} 5 | \usepackage{listings} 6 | 7 | \title{Distributed System} 8 | \author{Takahiko Ito} 9 | 10 | \begin{document} 11 | \maketitle 12 | \begin{abstract} 13 | This article covers distributed systems. 14 | \end{abstract} 15 | 16 | % @suppress Contraction WeakExpression 17 | \section{Summary} 18 | 19 | Some software tools work in more than one machine, and such distributed (cluster)systems can handle huge data or tasks, because such software tools make use of large amount of computer resources. 20 | In this article, we'll call a computer server that works as a member of a cluster an ``instance''. for example, each instance in distributed search engines stores the the fractions of data. 21 | Such distriubuted systems need a component to merge the preliminary results from member instnaces. 22 | 23 | %% \bibliographystyle{plain} 24 | %% \bibliography{reference} 25 | 26 | \end{document} 27 | -------------------------------------------------------------------------------- /redpen-distribution-1.7.6/sample-doc/en/sampledoc-en.txt: -------------------------------------------------------------------------------- 1 | Some software tools work in more than one machine, and such distributed (cluster)systems can handle huge data or tasks, because such software tools make use of large amount of computer resources. 2 | In this article, we'll call a computer server that works as a member of a cluster an "instance". for example, each instance in distributed search engines stores the the fractions of data. 3 | Such distriubuted systems need a component to merge the preliminary results from member instnaces. 4 | 5 | -------------------------------------------------------------------------------- /redpen-distribution-1.7.6/sample-doc/ja/sampledoc-ja.asciidoc: -------------------------------------------------------------------------------- 1 | [abstract] 2 | [suppress='SpaceBetweenAlphabeticalWord'] 3 | = 分散処理 4 | 最近利用されているソフトウェアの中には複数の計算機上で動作（分散）するものが多く存在し、 5 | このような分散ソフトウェアは複数の計算機で動作することで大量のデータを扱えたり，高負荷な状況に対処できたりします。 6 | 本稿では,複数の計算機（クラスタ）でで動作する各サーバーを_「インスタンス」_と呼びまます。 7 | 8 | たとえば検索エンジンやデータベースではインデックスを複数のインスタンスで分割して保持します。 9 | このような場合、各インデクスの結果をマージして_clientプログラム_に渡す機構が必要となります。 10 | -------------------------------------------------------------------------------- /redpen-distribution-1.7.6/sample-doc/ja/sampledoc-ja.md: -------------------------------------------------------------------------------- 1 | 2 | # 分散処理 3 | 最近利用されているソフトウェアの中には複数の計算機上で動作（分散）するものが多く存在し、このような分散ソフトウェアは複数の計算機で動作することで大量のデータを扱えたり、高負荷な状況に対処できたりします。 4 | 本稿では,複数の計算機（クラスタ）でで動作する各サーバーを**インスタンス**と呼びまます。 5 | たとえば検索エンジンやデータベースではインデックスを複数のインスタンスで分割して保持します。 6 | このような場合、各インデクスの結果をマージしてclientプログラムに渡す機構が必要となります。 7 | -------------------------------------------------------------------------------- /redpen-distribution-1.7.6/sample-doc/ja/sampledoc-ja.re: -------------------------------------------------------------------------------- 1 | #@# @suppress SpaceBetweenAlphabeticalWord 2 | = 分散処理 3 | 最近利用されているソフトウェアの中には複数の計算機上で動作（分散）するものが多く存在し、このような分散ソフトウェアは複数の計算機で動作することで大量のデータを扱えたり、 4 | 高負荷な状況に対処できたりします。本稿では,複数の計算機（クラスタ）でで動作する各サーバーを@{インスタンス}と呼びまます。 5 | たとえば検索エンジンやデータベースではインデックスを複数のインスタンスで分割して保持します。 6 | このような場合、各インデクスの結果をマージしてclientプログラムに渡す機構が必要となります。 7 | -------------------------------------------------------------------------------- /redpen-distribution-1.7.6/sample-doc/ja/sampledoc-ja.tex: -------------------------------------------------------------------------------- 1 | \documentclass[a4paper, 10pt]{jarticle} 2 | 3 | \usepackage{url} 4 | \usepackage{color} 5 | \usepackage{listings} 6 | 7 | \title{分散システムについて} 8 | \author{伊藤 敬彦} 9 | 10 | \begin{document} 11 | \maketitle 12 | \begin{abstract} 13 | 本稿では分散システムついて解説します。 14 | \end{abstract} 15 | 16 | % @suppress SpaceBetweenAlphabeticalWord 17 | \section{要約} 18 | 最近利用されているソフトウェアの中には複数の計算機上で動作（分散）するものが多く存在し、このような分散ソフトウェアは複数の計算機で動作することで大量のデータを扱えたり，高負荷な状況に対処できたりします。 19 | 本稿では,複数の計算機（クラスタ）でで動作する各サーバーを「インスタンス」と呼びまます。 20 | たとえば検索エンジンやデータベースではインデックスを複数のインスタンスで分割して保持します。 21 | このような場合、各インデクスの結果をマージしてclientプログラムに渡す機構が必要となります。 22 | 23 | %% \bibliographystyle{plain} 24 | %% \bibliography{reference,reference-j} 25 | 26 | \end{document} 27 | -------------------------------------------------------------------------------- /redpen-distribution-1.7.6/sample-doc/ja/sampledoc-ja.txt: -------------------------------------------------------------------------------- 1 | 最近利用されているソフトウェアの中には複数の計算機上で動作（分散）するものが多く存在し、このような分散ソフトウェアは複数の計算機で動作することで大量のデータを扱えたり，高負荷な状況に対処できたりします。 2 | 本稿では,複数の計算機（クラスタ）でで動作する各サーバーを「インスタンス」と呼びまます。 3 | たとえば検索エンジンやデータベースではインデックスを複数のインスタンスで分割して保持します。 4 | このような場合、各インデクスの結果をマージしてclientプログラムに渡す機構が必要となります。 5 | -------------------------------------------------------------------------------- /travis_key.enc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/o2project/reset-css-friends/5dc396c8d2791b54465186521c4c7ff10cc7760c/travis_key.enc --------------------------------------------------------------------------------