├── LICENSE ├── README.md ├── css └── style.css ├── img └── icons │ ├── facebook@2x.png │ ├── nicovideo@2x.png │ ├── novelist@2x.png │ ├── piapro@2x.png │ ├── pixiv@2x.png │ ├── soundcloud@2x.png │ ├── tinami@2x.png │ ├── tumblr@2x.png │ └── twitter@2x.png ├── index.html ├── js └── func.js └── scss ├── _media-queries.scss ├── _mixin.scss ├── _normalize.scss └── style.scss /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2014 oui 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in 13 | all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | OSHIRASE 2 | ======== 3 | 4 | アンソロジーや合同誌、オンリーイベントなどの告知サイトのためのHTMLテンプレートです。デモページは[こちら](http://monsier-oui.github.io/OSHIRASE/demo.html) 5 | 6 | ## 使い方 7 | 1. [ここ](https://github.com/monsier-oui/OSHIRASE/archive/master.zip)からダウンロードする 8 | * index.html をテキストエディタで開いて必要な情報を書く 9 | ※ソースはガンガン削ったり足したりしてオッケーです。叩き台として使ってください。 10 | * サーバにアップロードする 11 | 12 | ### 用意する画像ファイル 13 | * 表紙 14 | * イメージイラスト(横幅2000px推奨) 15 | * 内容サンプル(小さすぎるとジャギるので600px四方くらい推奨) 16 | * バナー 17 | * フライヤー(あれば) 18 | 19 | ## 作業上の注意 20 | ファイルの編集には必ずテキストエディタ(メモ帳、ビルダーはNG)を使ってください。普段テキストエディタを使わない方へのオススメは、Windowsなら[サクラエディタ](http://sakura-editor.sourceforge.net/)、Macなら[CotEditor](http://coteditor.github.io/)。 21 | 22 | ## 動作確認環境 23 | * Firefox 35 24 | * Google Chrome 40 25 | * iPhone Safari 26 | 27 | ## ワンポイント解説 28 | ### 画像ファイルの指定について 29 | アイキャッチ、サンプルはimg要素ではなく、div要素の背景画像として指定します。たとえばimgフォルダのimage.jpgを表示させたいなら、`style="background-image: url('img/image.jpg');"`と書きます。 30 | 31 | ### フォントについて 32 | 33 | 一部の要素に[Google Fonts](https://www.google.com/fonts)を利用しています。他のフォントに変えたい場合は、Google FontsからCSSファイルを呼び出すコードと、`style.css`で指定している`font-family`プロパティを修正してください。 34 | 35 | ### OGPについて 36 | 37 | OGPは、ざっくり言えばTwitterやFacebookに投稿したときにサムネイルやページ概要を自動で表示してくれる機能です。詳しくは以下の記事が参考になると思います。 38 | 39 | [OGP設定がしてあれば10分で設定完了！ツイートをより魅力的にしてくれる「Twitterカード」の設定方法｜Tips*Blog｜株式会社コプロシステム](http://www.coprosystem.co.jp/tipsblog/2014/05/01.html) 40 | 41 | Twitterへの申請は承認までちょっと時間がかかる(1日〜数日?くらい?)こともあるので、申請だけでも先にしておいたほうがよさそうです。 42 | 43 | もちろん、いらない!ということであればヘッダの記述ごと削除していただいて構いません。 44 | 45 | ### ソーシャルメディアアイコンについて 46 | 47 | [こちら](http://wolfrosch.com/works/webdesign/socialicons)から以下のアイコンをお借りして同梱しています。 48 | 49 | * pixiv 50 | * novelist 51 | * TINAMI 52 | * Twitter 53 | * Facebook 54 | * tumblr 55 | * ピアプロ 56 | * ニコニコ動画 57 | * soundcloud 58 | 59 | 他のサービスのアイコンが必要であれば追加でダウンロードして、`style.css`の984行目あたりにクラスを追加してください。 60 | 61 | ``` 62 | .icon-XXX { /* XXX=サービスの名前 */ 63 | background-image: url(../img/icons/XXX@2x.png); 64 | } 65 | ``` 66 | 67 | そして、アイコンを追加したいところに下記を追加します。 68 | 69 | ``` 70 | 71 | ``` 72 | 73 | ### Enterページ的なやつについて 74 | 75 | 同人サイトによくあるEnterページ的なやつです。Cookieに訪問フラグを記憶し、2回め以降の訪問では表示しません。この機能が不要であれば、下記を`index.html`から削除してください。 76 | 77 | ``` 78 |
79 |

80 |

81 |
82 | ``` 83 | 84 | Enterボタンをバナーなどの画像に変更したい場合は、img要素に`id="button-enter"`を追加してください。 85 | 86 | ## License 87 | This software is released under the MIT License. 88 | 89 | ### 同梱物のライセンス 90 | 91 | * [Normalize.css](http://necolas.github.io/normalize.css/) - MIT License 92 | * [Media Queries Mixins for Sass](http://paranoida.github.io/sass-mediaqueries/) - MIT License 93 | * [ミニ・ソーシャル・アイコン](http://wolfrosch.com/works/webdesign/socialicons) - Public Domain 94 | 95 | ## 更新履歴 96 | ### 2015/2/24 97 | * Enterページ的なやつを追加実装 98 | 99 | ### 2014/6/26 100 | * Android端末にも対応した(はず…) 101 | 102 | ### 2014/6/22 103 | * リリース -------------------------------------------------------------------------------- /css/style.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | /*! normalize.css v3.0.1 | MIT License | git.io/normalize */ 3 | /** 4 | * 1. Set default font family to sans-serif. 5 | * 2. Prevent iOS text size adjust after orientation change, without disabling 6 | * user zoom. 7 | */ 8 | html { 9 | font-family: sans-serif; 10 | /* 1 */ 11 | -ms-text-size-adjust: 100%; 12 | /* 2 */ 13 | -webkit-text-size-adjust: 100%; 14 | /* 2 */ 15 | } 16 | 17 | /** 18 | * Remove default margin. 19 | */ 20 | body { 21 | margin: 0; 22 | } 23 | 24 | /* HTML5 display definitions 25 | ========================================================================== */ 26 | /** 27 | * Correct `block` display not defined for any HTML5 element in IE 8/9. 28 | * Correct `block` display not defined for `details` or `summary` in IE 10/11 and Firefox. 29 | * Correct `block` display not defined for `main` in IE 11. 30 | */ 31 | article, 32 | aside, 33 | details, 34 | figcaption, 35 | figure, 36 | footer, 37 | header, 38 | hgroup, 39 | main, 40 | nav, 41 | section, 42 | summary { 43 | display: block; 44 | } 45 | 46 | /** 47 | * 1. Correct `inline-block` display not defined in IE 8/9. 48 | * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. 49 | */ 50 | audio, 51 | canvas, 52 | progress, 53 | video { 54 | display: inline-block; 55 | /* 1 */ 56 | vertical-align: baseline; 57 | /* 2 */ 58 | } 59 | 60 | /** 61 | * Prevent modern browsers from displaying `audio` without controls. 62 | * Remove excess height in iOS 5 devices. 63 | */ 64 | audio:not([controls]) { 65 | display: none; 66 | height: 0; 67 | } 68 | 69 | /** 70 | * Address `[hidden]` styling not present in IE 8/9/10. 71 | * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22. 72 | */ 73 | [hidden], 74 | template { 75 | display: none; 76 | } 77 | 78 | /* Links 79 | ========================================================================== */ 80 | /** 81 | * Remove the gray background color from active links in IE 10. 82 | */ 83 | a { 84 | background: transparent; 85 | } 86 | 87 | /** 88 | * Improve readability when focused and also mouse hovered in all browsers. 89 | */ 90 | a:active, 91 | a:hover { 92 | outline: 0; 93 | } 94 | 95 | /* Text-level semantics 96 | ========================================================================== */ 97 | /** 98 | * Address styling not present in IE 8/9/10/11, Safari, and Chrome. 99 | */ 100 | abbr[title] { 101 | border-bottom: 1px dotted; 102 | } 103 | 104 | /** 105 | * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. 106 | */ 107 | b, 108 | strong { 109 | font-weight: bold; 110 | } 111 | 112 | /** 113 | * Address styling not present in Safari and Chrome. 114 | */ 115 | dfn { 116 | font-style: italic; 117 | } 118 | 119 | /** 120 | * Address variable `h1` font-size and margin within `section` and `article` 121 | * contexts in Firefox 4+, Safari, and Chrome. 122 | */ 123 | h1 { 124 | font-size: 2em; 125 | margin: 0.67em 0; 126 | } 127 | 128 | /** 129 | * Address styling not present in IE 8/9. 130 | */ 131 | mark { 132 | background: #ff0; 133 | color: #000; 134 | } 135 | 136 | /** 137 | * Address inconsistent and variable font size in all browsers. 138 | */ 139 | small { 140 | font-size: 80%; 141 | } 142 | 143 | /** 144 | * Prevent `sub` and `sup` affecting `line-height` in all browsers. 145 | */ 146 | sub, 147 | sup { 148 | font-size: 75%; 149 | line-height: 0; 150 | position: relative; 151 | vertical-align: baseline; 152 | } 153 | 154 | sup { 155 | top: -0.5em; 156 | } 157 | 158 | sub { 159 | bottom: -0.25em; 160 | } 161 | 162 | /* Embedded content 163 | ========================================================================== */ 164 | /** 165 | * Remove border when inside `a` element in IE 8/9/10. 166 | */ 167 | img { 168 | border: 0; 169 | } 170 | 171 | /** 172 | * Correct overflow not hidden in IE 9/10/11. 173 | */ 174 | svg:not(:root) { 175 | overflow: hidden; 176 | } 177 | 178 | /* Grouping content 179 | ========================================================================== */ 180 | /** 181 | * Address margin not present in IE 8/9 and Safari. 182 | */ 183 | figure { 184 | margin: 1em 40px; 185 | } 186 | 187 | /** 188 | * Address differences between Firefox and other browsers. 189 | */ 190 | hr { 191 | -moz-box-sizing: content-box; 192 | box-sizing: content-box; 193 | height: 0; 194 | } 195 | 196 | /** 197 | * Contain overflow in all browsers. 198 | */ 199 | pre { 200 | overflow: auto; 201 | } 202 | 203 | /** 204 | * Address odd `em`-unit font size rendering in all browsers. 205 | */ 206 | code, 207 | kbd, 208 | pre, 209 | samp { 210 | font-family: monospace, monospace; 211 | font-size: 1em; 212 | } 213 | 214 | /* Forms 215 | ========================================================================== */ 216 | /** 217 | * Known limitation: by default, Chrome and Safari on OS X allow very limited 218 | * styling of `select`, unless a `border` property is set. 219 | */ 220 | /** 221 | * 1. Correct color not being inherited. 222 | * Known issue: affects color of disabled elements. 223 | * 2. Correct font properties not being inherited. 224 | * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. 225 | */ 226 | button, 227 | input, 228 | optgroup, 229 | select, 230 | textarea { 231 | color: inherit; 232 | /* 1 */ 233 | font: inherit; 234 | /* 2 */ 235 | margin: 0; 236 | /* 3 */ 237 | } 238 | 239 | /** 240 | * Address `overflow` set to `hidden` in IE 8/9/10/11. 241 | */ 242 | button { 243 | overflow: visible; 244 | } 245 | 246 | /** 247 | * Address inconsistent `text-transform` inheritance for `button` and `select`. 248 | * All other form control elements do not inherit `text-transform` values. 249 | * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. 250 | * Correct `select` style inheritance in Firefox. 251 | */ 252 | button, 253 | select { 254 | text-transform: none; 255 | } 256 | 257 | /** 258 | * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` 259 | * and `video` controls. 260 | * 2. Correct inability to style clickable `input` types in iOS. 261 | * 3. Improve usability and consistency of cursor style between image-type 262 | * `input` and others. 263 | */ 264 | button, 265 | html input[type="button"], 266 | input[type="reset"], 267 | input[type="submit"] { 268 | -webkit-appearance: button; 269 | /* 2 */ 270 | cursor: pointer; 271 | /* 3 */ 272 | } 273 | 274 | /** 275 | * Re-set default cursor for disabled elements. 276 | */ 277 | button[disabled], 278 | html input[disabled] { 279 | cursor: default; 280 | } 281 | 282 | /** 283 | * Remove inner padding and border in Firefox 4+. 284 | */ 285 | button::-moz-focus-inner, 286 | input::-moz-focus-inner { 287 | border: 0; 288 | padding: 0; 289 | } 290 | 291 | /** 292 | * Address Firefox 4+ setting `line-height` on `input` using `!important` in 293 | * the UA stylesheet. 294 | */ 295 | input { 296 | line-height: normal; 297 | } 298 | 299 | /** 300 | * It's recommended that you don't attempt to style these elements. 301 | * Firefox's implementation doesn't respect box-sizing, padding, or width. 302 | * 303 | * 1. Address box sizing set to `content-box` in IE 8/9/10. 304 | * 2. Remove excess padding in IE 8/9/10. 305 | */ 306 | input[type="checkbox"], 307 | input[type="radio"] { 308 | box-sizing: border-box; 309 | /* 1 */ 310 | padding: 0; 311 | /* 2 */ 312 | } 313 | 314 | /** 315 | * Fix the cursor style for Chrome's increment/decrement buttons. For certain 316 | * `font-size` values of the `input`, it causes the cursor style of the 317 | * decrement button to change from `default` to `text`. 318 | */ 319 | input[type="number"]::-webkit-inner-spin-button, 320 | input[type="number"]::-webkit-outer-spin-button { 321 | height: auto; 322 | } 323 | 324 | /** 325 | * 1. Address `appearance` set to `searchfield` in Safari and Chrome. 326 | * 2. Address `box-sizing` set to `border-box` in Safari and Chrome 327 | * (include `-moz` to future-proof). 328 | */ 329 | input[type="search"] { 330 | -webkit-appearance: textfield; 331 | /* 1 */ 332 | -moz-box-sizing: content-box; 333 | -webkit-box-sizing: content-box; 334 | /* 2 */ 335 | box-sizing: content-box; 336 | } 337 | 338 | /** 339 | * Remove inner padding and search cancel button in Safari and Chrome on OS X. 340 | * Safari (but not Chrome) clips the cancel button when the search input has 341 | * padding (and `textfield` appearance). 342 | */ 343 | input[type="search"]::-webkit-search-cancel-button, 344 | input[type="search"]::-webkit-search-decoration { 345 | -webkit-appearance: none; 346 | } 347 | 348 | /** 349 | * Define consistent border, margin, and padding. 350 | */ 351 | fieldset { 352 | border: 1px solid #c0c0c0; 353 | margin: 0 2px; 354 | padding: 0.35em 0.625em 0.75em; 355 | } 356 | 357 | /** 358 | * 1. Correct `color` not being inherited in IE 8/9/10/11. 359 | * 2. Remove padding so people aren't caught out if they zero out fieldsets. 360 | */ 361 | legend { 362 | border: 0; 363 | /* 1 */ 364 | padding: 0; 365 | /* 2 */ 366 | } 367 | 368 | /** 369 | * Remove default vertical scrollbar in IE 8/9/10/11. 370 | */ 371 | textarea { 372 | overflow: auto; 373 | } 374 | 375 | /** 376 | * Don't inherit the `font-weight` (applied by a rule above). 377 | * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. 378 | */ 379 | optgroup { 380 | font-weight: bold; 381 | } 382 | 383 | /* Tables 384 | ========================================================================== */ 385 | /** 386 | * Remove most spacing between table cells. 387 | */ 388 | table { 389 | border-collapse: collapse; 390 | border-spacing: 0; 391 | } 392 | 393 | td, 394 | th { 395 | padding: 0; 396 | } 397 | 398 | /* Main 399 | ========================================================================== */ 400 | * { 401 | box-sizing: border-box; 402 | } 403 | 404 | html { 405 | font-size: 12px; 406 | } 407 | 408 | body { 409 | background: #ffffff; 410 | color: #555555; 411 | font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif; 412 | } 413 | 414 | #body-wrapper { 415 | display: table; 416 | table-layout: fixed; 417 | position: relative; 418 | height: 100%; 419 | width: 100%; 420 | } 421 | 422 | .wrapper { 423 | margin: 37.5px 0; 424 | padding: 37.5px; 425 | } 426 | 427 | /* リンク */ 428 | a { 429 | color: #1ba5a5; 430 | text-decoration: none; 431 | } 432 | a:not(#scroll-to-top):not(.btn):not(.banner):hover { 433 | border-bottom: 3px solid #f9d76d; 434 | } 435 | 436 | /* 画像 */ 437 | img { 438 | vertical-align: top; 439 | } 440 | 441 | /* 見出し */ 442 | h1, 443 | h2, 444 | h3, 445 | h4, 446 | h5, 447 | h6 { 448 | clear: both; 449 | -webkit-font-smoothing: antialiased; 450 | } 451 | 452 | h1, 453 | h2 { 454 | font-family: "Merriweather", Georgia, "Times New Roman", Times, serif; 455 | } 456 | 457 | h1 { 458 | font-size: 3.6rem; 459 | font-weight: 900; 460 | line-height: 1.12rem; 461 | text-align: center; 462 | } 463 | 464 | h2 { 465 | display: flex; 466 | align-items: center; 467 | text-align: center; 468 | color: #aaaaaa; 469 | font-size: 2.4rem; 470 | font-weight: normal; 471 | } 472 | h2:before, h2:after { 473 | border-top: 1px solid #aaaaaa; 474 | content: ''; 475 | display: inline; 476 | /* for IE */ 477 | flex-grow: 1; 478 | } 479 | h2:before { 480 | margin-right: 0.5em; 481 | } 482 | h2:after { 483 | margin-left: 0.5em; 484 | } 485 | 486 | /* 寄せ */ 487 | .left { 488 | text-align: left; 489 | } 490 | 491 | .center { 492 | text-align: center; 493 | } 494 | 495 | .right { 496 | text-align: right; 497 | } 498 | 499 | /* セクション */ 500 | section { 501 | display: block; 502 | margin-bottom: 5rem; 503 | display: block; 504 | *zoom: 1; 505 | } 506 | section:after { 507 | content: "."; 508 | display: block; 509 | visibility: hidden; 510 | height: 0; 511 | font-size: 0; 512 | clear: both; 513 | } 514 | 515 | /* 定義リスト */ 516 | dl { 517 | margin: 20px auto; 518 | overflow: hidden; 519 | position: relative; 520 | } 521 | dl dt { 522 | float: left; 523 | width: 28%; 524 | clear: both; 525 | padding: 3px 2% 15px 0; 526 | position: relative; 527 | } 528 | dl dd { 529 | float: right; 530 | width: 67%; 531 | margin: 0; 532 | padding: 3px 0 15px 3%; 533 | } 534 | dl.contact-form dt { 535 | width: 36%; 536 | text-align: right; 537 | position: relative; 538 | top: 5px; 539 | } 540 | dl.contact-form dd { 541 | width: 62%; 542 | } 543 | 544 | /* 整形済みテキスト */ 545 | pre { 546 | padding: 0.5rem; 547 | width: 98%; 548 | background: #ebebeb; 549 | border: 1px solid #d6d6d6; 550 | border-radius: 0.2em; 551 | font-size: 0.9em; 552 | font-family: Consolas, 'Courier New', Courier, Monaco, monospace; 553 | white-space: pre; 554 | white-space: pre-wrap; 555 | } 556 | 557 | /* Enterページ的なやつ */ 558 | #enter { 559 | margin: 0; 560 | position: absolute; 561 | background-color: #ffffff; 562 | transition: all 0.8s ease-out; 563 | z-index: -1; 564 | top: 0; 565 | right: 0; 566 | bottom: 0; 567 | left: 0; 568 | padding: 20% 2em; 569 | opacity: 0; 570 | filter: alpha(opacity=0); 571 | } 572 | #enter.show { 573 | z-index: 99999; 574 | opacity: 1; 575 | filter: alpha(opacity=100); 576 | } 577 | 578 | #button-enter { 579 | margin-top: 2em; 580 | } 581 | 582 | /* アイキャッチ */ 583 | #eyecatch { 584 | margin: 0 auto; 585 | height: 600px; 586 | background-repeat: no-repeat; 587 | background-size: cover; 588 | background-position: top; 589 | position: relative; 590 | color: #ffffff; 591 | } 592 | #eyecatch h1 { 593 | margin: 0; 594 | padding: 0; 595 | line-height: 480px; 596 | } 597 | 598 | /* ナビゲーションメニュー */ 599 | #navbar { 600 | margin: 0; 601 | padding: 0; 602 | position: absolute; 603 | z-index: 999; 604 | top: 0; 605 | width: 100%; 606 | background-color: #141414; 607 | } 608 | 609 | #nav { 610 | margin: 0; 611 | padding: 0; 612 | list-style: none; 613 | padding: 0; 614 | float: left; 615 | } 616 | #nav li { 617 | list-style-image: none; 618 | list-style-type: none; 619 | margin-left: 0; 620 | } 621 | #nav li { 622 | display: inline-block; 623 | *display: inline; 624 | *zoom: 1; 625 | margin: 0; 626 | position: relative; 627 | font-family: "Roboto", sans-serif; 628 | font-weight: bold; 629 | text-transform: uppercase; 630 | background-color: transparent; 631 | } 632 | #nav a { 633 | position: relative; 634 | display: block; 635 | padding: 10px 15px; 636 | text-decoration: none; 637 | box-sizing: border-box; 638 | color: #ffffff; 639 | } 640 | #nav a:hover { 641 | border: 0px !important; 642 | } 643 | #nav a:hover .nav-label { 644 | border-bottom: 3px solid #f9d76d; 645 | } 646 | 647 | #nav-opener { 648 | display: none; 649 | } 650 | 651 | #nav-opener-check { 652 | display: none; 653 | } 654 | 655 | /* 最上部へスクロールするボタン */ 656 | #scroll-to-top { 657 | position: fixed; 658 | z-index: 99; 659 | bottom: 10px; 660 | right: 10px; 661 | font-size: 5rem; 662 | text-decoration: none; 663 | color: rgba(0, 0, 0, 0.6); 664 | border-radius: 0.4em; 665 | transition: all 0.3s 0.2s; 666 | } 667 | #scroll-to-top:hover { 668 | color: rgba(0, 0, 0, 0.8); 669 | } 670 | 671 | /* ダミー */ 672 | .dummy { 673 | text-align: center; 674 | position: relative; 675 | } 676 | .dummy:before { 677 | content: ''; 678 | display: block; 679 | width: 100%; 680 | vertical-align: middle; 681 | z-index: 0; 682 | background-color: #efefef; 683 | background-image: linear-gradient(-45deg, #1ba5a5 25%, #aaaaaa 25%, #aaaaaa 50%, #1ba5a5 50%, #1ba5a5 75%, #aaaaaa 75%, #aaaaaa); 684 | background-size: 16px 16px; 685 | } 686 | .dummy:after { 687 | color: #ffffff; 688 | font-family: "Roboto", sans-serif; 689 | z-index: 1; 690 | position: absolute; 691 | top: 50%; 692 | right: 0; 693 | left: 0; 694 | } 695 | .dummy * { 696 | position: absolute; 697 | top: 0; 698 | right: 0; 699 | bottom: 0; 700 | left: 0; 701 | z-index: 2; 702 | } 703 | 704 | /* 紙ものを格納する要素 */ 705 | .paper { 706 | margin: 0 1rem 1rem 0; 707 | float: left; 708 | width: 36%; 709 | height: auto; 710 | } 711 | .paper img { 712 | width: 100%; 713 | min-width: 250px; 714 | height: auto; 715 | } 716 | .paper.dummy:before { 717 | padding-top: 141.4%; 718 | } 719 | .paper.dummy:after { 720 | content: 'Now Printing'; 721 | font-size: 2.4rem; 722 | } 723 | 724 | /* 概要 */ 725 | #spec { 726 | display: block; 727 | *zoom: 1; 728 | } 729 | #spec:after { 730 | content: "."; 731 | display: block; 732 | visibility: hidden; 733 | height: 0; 734 | font-size: 0; 735 | clear: both; 736 | } 737 | #spec dt:before { 738 | content: ""; 739 | width: 30px; 740 | position: absolute; 741 | border-top: 1px solid #333; 742 | top: -5px; 743 | right: -15px; 744 | } 745 | #spec dt:after { 746 | content: ""; 747 | width: 5px; 748 | height: 5px; 749 | background: #333; 750 | position: absolute; 751 | border-radius: 50%; 752 | top: -7px; 753 | right: -3px; 754 | } 755 | #spec:before { 756 | content: ""; 757 | width: 1px; 758 | position: absolute; 759 | border-left: 1px solid #333; 760 | top: 0; 761 | bottom: 0; 762 | left: 28%; 763 | } 764 | #spec ul { 765 | margin: 0; 766 | padding: 0; 767 | } 768 | 769 | /* ソーシャルメディア */ 770 | #share { 771 | margin: 0; 772 | padding: 0; 773 | margin-top: 2rem; 774 | list-style: none; 775 | padding: 0; 776 | text-align: center; 777 | } 778 | #share li { 779 | list-style-image: none; 780 | list-style-type: none; 781 | margin-left: 0; 782 | } 783 | #share li { 784 | display: inline-block; 785 | *display: inline; 786 | *zoom: 1; 787 | } 788 | 789 | .btn i { 790 | margin-right: 0.2rem; 791 | } 792 | 793 | .btn.twitter { 794 | background-color: #55acee; 795 | } 796 | .btn.twitter:hover, .btn.twitter:active { 797 | background-color: #7abef2; 798 | } 799 | 800 | .btn.facebook { 801 | background-color: #3b5998; 802 | } 803 | .btn.facebook:hover, .btn.facebook:active { 804 | background-color: #466ab5; 805 | } 806 | 807 | .btn.line { 808 | background-color: #00c300; 809 | display: none; 810 | } 811 | .btn.line:hover, .btn.line:active { 812 | background-color: #00ec00; 813 | } 814 | 815 | .social-count { 816 | margin: 0 auto 12px auto; 817 | padding: 8px 0; 818 | position: relative; 819 | width: 95%; 820 | color: #777777; 821 | font-size: 1.1em; 822 | text-align: center; 823 | background: #ffffff; 824 | border: 1px solid #efefef; 825 | border-radius: 0.3rem; 826 | } 827 | .social-count:after, .social-count:before { 828 | position: absolute; 829 | top: 100%; 830 | left: 50%; 831 | border: solid transparent; 832 | content: ' '; 833 | height: 0; 834 | width: 0; 835 | pointer-events: none; 836 | } 837 | .social-count:after { 838 | border-color: rgba(255, 255, 255, 0); 839 | border-top-color: #ffffff; 840 | border-width: 10px; 841 | margin-left: -10px; 842 | } 843 | .social-count:before { 844 | border-color: rgba(175, 175, 175, 0); 845 | border-top-color: #efefef; 846 | border-width: 11px; 847 | margin-left: -11px; 848 | } 849 | .social-count a { 850 | color: #555555; 851 | display: block; 852 | width: 80%; 853 | margin: auto; 854 | } 855 | 856 | /* サンプル一覧 */ 857 | #sample-list { 858 | list-style: none; 859 | padding: 0; 860 | margin: 0 auto; 861 | text-align: center; 862 | display: block; 863 | *zoom: 1; 864 | } 865 | #sample-list li { 866 | list-style-image: none; 867 | list-style-type: none; 868 | margin-left: 0; 869 | } 870 | #sample-list:after { 871 | content: "."; 872 | display: block; 873 | visibility: hidden; 874 | height: 0; 875 | font-size: 0; 876 | clear: both; 877 | } 878 | #sample-list li { 879 | display: inline-block; 880 | *display: inline; 881 | *zoom: 1; 882 | position: relative; 883 | overflow: hidden; 884 | width: 32.7%; 885 | margin: 0.3%; 886 | float: left; 887 | border-radius: 0.5rem; 888 | } 889 | #sample-list li .sample-caption.on { 890 | bottom: 0; 891 | } 892 | 893 | .sample-img { 894 | background-size: cover; 895 | background-position: center 20%; 896 | background-repeat: no-repeat; 897 | -webkit-background-clip: padding-box; 898 | background-clip: padding-box; 899 | } 900 | .sample-img:before { 901 | content: ''; 902 | display: block; 903 | padding-top: 100%; 904 | } 905 | 906 | .banner { 907 | display: inline-block; 908 | *display: inline; 909 | *zoom: 1; 910 | width: 200px; 911 | } 912 | .banner.dummy:after { 913 | margin-top: -6%; 914 | top: 50%; 915 | } 916 | .banner.dummy:before { 917 | padding-top: 20%; 918 | border-radius: 0.25rem; 919 | } 920 | .banner.dummy:after { 921 | content: 'no banner'; 922 | font-size: 13px; 923 | } 924 | 925 | .sample-caption { 926 | position: absolute; 927 | bottom: -70%; 928 | left: 0; 929 | z-index: 2; 930 | padding: 0.5rem; 931 | width: 100%; 932 | height: 100%; 933 | color: #ffffff; 934 | background: rgba(0, 0, 0, 0.6); 935 | text-align: left; 936 | transition: all 0.5s 0.2s; 937 | } 938 | .sample-caption p { 939 | margin: 0; 940 | padding: 0; 941 | margin-bottom: 0.2rem; 942 | z-index: 9; 943 | opacity: 0; 944 | filter: alpha(opacity=0); 945 | transition: all 0.5s 0.2s; 946 | } 947 | .sample-caption img { 948 | width: 200px; 949 | } 950 | 951 | .caption-toggle { 952 | float: right; 953 | font-size: 2rem; 954 | cursor: pointer; 955 | z-index: 99; 956 | transition: all 0.5s 0.2s; 957 | } 958 | .caption-toggle:before { 959 | content: '\f0fe'; 960 | } 961 | .on .caption-toggle:before { 962 | content: '\f146'; 963 | } 964 | .caption-toggle + p { 965 | opacity: 1; 966 | filter: alpha(opacity=100); 967 | } 968 | 969 | .on p { 970 | opacity: 1; 971 | filter: alpha(opacity=100); 972 | } 973 | 974 | /* ソーシャルメディアアイコン */ 975 | .icon-pixiv { 976 | background: url(../img/icons/pixiv@2x.png); 977 | } 978 | 979 | .icon-twitter { 980 | background: url(../img/icons/twitter@2x.png); 981 | } 982 | 983 | .icon-novelist { 984 | background-image: url(../img/icons/novelist@2x.png); 985 | } 986 | 987 | .icon-tinami { 988 | background-image: url(../img/icons/tinami@2x.png); 989 | } 990 | 991 | .icon-tumblr { 992 | background-image: url(../img/icons/tumblr@2x.png); 993 | } 994 | 995 | .icon-facebook { 996 | background-image: url(../img/icons/facebook@2x.png); 997 | } 998 | 999 | .icon-piapro { 1000 | background-image: url(../img/icons/piapro@2x.png); 1001 | } 1002 | 1003 | .icon-soundcloud { 1004 | background-image: url(../img/icons/soundcloud@2x.png); 1005 | } 1006 | 1007 | .icon-nicovideo { 1008 | background-image: url(../img/icons/nicovideo@2x.png); 1009 | } 1010 | 1011 | .icon-disabled { 1012 | filter: grayscale(100%); 1013 | -webkit-filter: grayscale(100%); 1014 | } 1015 | 1016 | .icon-social { 1017 | display: inline-block; 1018 | width: 20px; 1019 | height: 20px; 1020 | vertical-align: text-top; 1021 | background-size: 100%; 1022 | background-repeat: no-repeat; 1023 | background-position: center; 1024 | } 1025 | 1026 | /* テキストボックス、テキストエリア */ 1027 | input[type='text'], 1028 | textarea { 1029 | padding: 0.3rem; 1030 | width: 24rem; 1031 | max-width: 95%; 1032 | border: 1px solid #aaaaaa; 1033 | border-radius: 0.3rem; 1034 | outline: none; 1035 | } 1036 | input[type='text']:focus, 1037 | textarea:focus { 1038 | border-color: #1ba5a5; 1039 | } 1040 | 1041 | textarea { 1042 | height: 7rem; 1043 | } 1044 | 1045 | /* ボタン */ 1046 | button, 1047 | input[type='submit'], 1048 | input[type='reset'], 1049 | .btn { 1050 | margin: 3px; 1051 | padding: 0.7rem 2rem; 1052 | font-size: 1.1rem; 1053 | outline: none; 1054 | border: none; 1055 | border-radius: 0.3em; 1056 | display: inline-block; 1057 | *display: inline; 1058 | *zoom: 1; 1059 | color: #ffffff; 1060 | font-family: "Roboto", sans-serif; 1061 | text-transform: uppercase; 1062 | box-shadow: inset 0 -0.2rem rgba(0, 0, 0, 0.1); 1063 | transition: all 0.2s ease-out; 1064 | cursor: pointer; 1065 | background-color: #aaaaaa; 1066 | } 1067 | button:hover, button:active, 1068 | input[type='submit']:hover, 1069 | input[type='submit']:active, 1070 | input[type='reset']:hover, 1071 | input[type='reset']:active, 1072 | .btn:hover, 1073 | .btn:active { 1074 | background-color: #bebebe; 1075 | } 1076 | button:hover, 1077 | input[type='submit']:hover, 1078 | input[type='reset']:hover, 1079 | .btn:hover { 1080 | text-decoration: none; 1081 | } 1082 | button:active, 1083 | input[type='submit']:active, 1084 | input[type='reset']:active, 1085 | .btn:active { 1086 | box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4); 1087 | } 1088 | button .icon, 1089 | input[type='submit'] .icon, 1090 | input[type='reset'] .icon, 1091 | .btn .icon { 1092 | margin: 0.1rem; 1093 | width: 1rem; 1094 | height: 1rem; 1095 | } 1096 | 1097 | button[type='submit'], 1098 | input[type='submit'], 1099 | .submit { 1100 | background-color: #1ba5a5; 1101 | } 1102 | button[type='submit']:hover, button[type='submit']:active, 1103 | input[type='submit']:hover, 1104 | input[type='submit']:active, 1105 | .submit:hover, 1106 | .submit:active { 1107 | background-color: #21c8c8; 1108 | } 1109 | 1110 | /* チェックボックス、ラジオボタン */ 1111 | input[type="checkbox"], 1112 | input[type="radio"] { 1113 | opacity: 0; 1114 | filter: alpha(opacity=0); 1115 | position: absolute; 1116 | } 1117 | input[type="checkbox"] + i, 1118 | input[type="radio"] + i { 1119 | margin-right: 0.2rem; 1120 | font-size: 1.2rem; 1121 | width: 1.2rem; 1122 | vertical-align: middle; 1123 | } 1124 | 1125 | input[type="checkbox"] + i:before { 1126 | content: '\f096'; 1127 | } 1128 | input[type="checkbox"]:checked + i:before { 1129 | content: "\f14a"; 1130 | } 1131 | 1132 | input[type="radio"] + i:before { 1133 | content: '\f10c'; 1134 | } 1135 | input[type="radio"]:checked + i:before { 1136 | content: "\f192"; 1137 | } 1138 | 1139 | /* フッター */ 1140 | #footer { 1141 | margin-bottom: 0; 1142 | background: #aaaaaa; 1143 | color: #ffffff; 1144 | } 1145 | #footer > div { 1146 | margin: 0; 1147 | padding: 1rem; 1148 | width: 50%; 1149 | float: left; 1150 | } 1151 | 1152 | #credit { 1153 | margin-top: 2rem; 1154 | text-align: center; 1155 | clear: both; 1156 | font-family: "Merriweather", Georgia, "Times New Roman", Times, serif; 1157 | font-size: 0.9rem; 1158 | } 1159 | 1160 | @media screen and (min-width: 1200px) { 1161 | #sample-list li { 1162 | width: 24%; 1163 | } 1164 | 1165 | .wrapper:not(#footer) { 1166 | margin: 0 auto; 1167 | width: 1200px; 1168 | } 1169 | } 1170 | @media only screen and (-webkit-min-device-pixel-ratio: 1.5) and (max-device-width: 1080px), only screen and (min--moz-device-pixel-ratio: 1.5) and (max-device-width: 1080px), only screen and (-o-min-device-pixel-ratio: 1.5 / 1) and (max-device-width: 1080px), only screen and (min-resolution: 144dpi) and (max-device-width: 1080px), only screen and (min-resolution: 1.5dppx) and (max-device-width: 1080px) { 1171 | /* ラッパ */ 1172 | .wrapper { 1173 | padding: 0.5rem; 1174 | } 1175 | 1176 | /* ナビゲーションバー */ 1177 | #navbar { 1178 | position: fixed; 1179 | min-height: 45px; 1180 | font-size: 1.8rem; 1181 | box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); 1182 | } 1183 | 1184 | #nav { 1185 | margin: 0; 1186 | padding: 0; 1187 | width: 86%; 1188 | } 1189 | #nav li { 1190 | margin: 0; 1191 | padding: 0; 1192 | display: block; 1193 | } 1194 | #nav li a { 1195 | padding: 0.8rem 0.6em; 1196 | } 1197 | #nav li a:active { 1198 | background-color: #f9d76d; 1199 | } 1200 | 1201 | #nav-opener { 1202 | display: block; 1203 | position: relative; 1204 | float: right; 1205 | margin: 0 10px 0 0; 1206 | padding: 10px; 1207 | color: #ffffff; 1208 | line-height: 1; 1209 | } 1210 | 1211 | #nav-opener-check + ul { 1212 | overflow: hidden; 1213 | transition: all 1s 0.5s; 1214 | opacity: 0; 1215 | max-height: 0; 1216 | } 1217 | #nav-opener-check:checked + ul { 1218 | opacity: 1; 1219 | max-height: 50rem; 1220 | } 1221 | 1222 | /* アイキャッチ */ 1223 | #eyecatch { 1224 | margin-top: 45px; 1225 | height: 400px; 1226 | } 1227 | 1228 | /* 紙もの */ 1229 | .paper { 1230 | margin: 0 auto; 1231 | width: 100%; 1232 | float: none; 1233 | } 1234 | 1235 | /* LINEボタンはスマホのみ表示 */ 1236 | .btn.line { 1237 | display: block; 1238 | } 1239 | 1240 | /* サンプル一覧 */ 1241 | #sample-list li { 1242 | width: 100%; 1243 | margin: 0.2rem 0; 1244 | } 1245 | 1246 | .sample-img:before { 1247 | padding-top: 45%; 1248 | } 1249 | 1250 | .icon-social { 1251 | width: 40px; 1252 | height: 40px; 1253 | } 1254 | 1255 | /* dl要素 */ 1256 | dl dt, 1257 | dl dd, 1258 | dl.contact-form dt, 1259 | dl.contact-form dd { 1260 | display: block; 1261 | width: 100%; 1262 | } 1263 | dl dt, 1264 | dl.contact-form dt { 1265 | text-align: left; 1266 | } 1267 | dl dt:before, dl dt:after, 1268 | dl.contact-form dt:before, 1269 | dl.contact-form dt:after { 1270 | display: none; 1271 | } 1272 | dl:before, 1273 | dl.contact-form:before { 1274 | display: none; 1275 | } 1276 | 1277 | /* フッター */ 1278 | #footer > div { 1279 | width: 100%; 1280 | float: none; 1281 | } 1282 | } 1283 | @media screen and (max-width: 580px) { 1284 | /* ラッパ */ 1285 | .wrapper { 1286 | padding: 0.5rem; 1287 | } 1288 | 1289 | /* ナビゲーションバー */ 1290 | #navbar { 1291 | position: fixed; 1292 | min-height: 45px; 1293 | font-size: 1.8rem; 1294 | box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); 1295 | } 1296 | 1297 | #nav { 1298 | margin: 0; 1299 | padding: 0; 1300 | width: 86%; 1301 | } 1302 | #nav li { 1303 | margin: 0; 1304 | padding: 0; 1305 | display: block; 1306 | } 1307 | #nav li a { 1308 | padding: 0.8rem 0.6em; 1309 | } 1310 | #nav li a:active { 1311 | background-color: #f9d76d; 1312 | } 1313 | 1314 | #nav-opener { 1315 | display: block; 1316 | position: relative; 1317 | float: right; 1318 | margin: 0 10px 0 0; 1319 | padding: 10px; 1320 | color: #ffffff; 1321 | line-height: 1; 1322 | } 1323 | 1324 | #nav-opener-check + ul { 1325 | overflow: hidden; 1326 | transition: all 1s 0.5s; 1327 | opacity: 0; 1328 | max-height: 0; 1329 | } 1330 | #nav-opener-check:checked + ul { 1331 | opacity: 1; 1332 | max-height: 50rem; 1333 | } 1334 | 1335 | /* アイキャッチ */ 1336 | #eyecatch { 1337 | margin-top: 45px; 1338 | height: 400px; 1339 | } 1340 | 1341 | /* 紙もの */ 1342 | .paper { 1343 | margin: 0 auto; 1344 | width: 100%; 1345 | float: none; 1346 | } 1347 | 1348 | /* LINEボタンはスマホのみ表示 */ 1349 | .btn.line { 1350 | display: block; 1351 | } 1352 | 1353 | /* サンプル一覧 */ 1354 | #sample-list li { 1355 | width: 100%; 1356 | margin: 0.2rem 0; 1357 | } 1358 | 1359 | .sample-img:before { 1360 | padding-top: 45%; 1361 | } 1362 | 1363 | .icon-social { 1364 | width: 40px; 1365 | height: 40px; 1366 | } 1367 | 1368 | /* dl要素 */ 1369 | dl dt, 1370 | dl dd, 1371 | dl.contact-form dt, 1372 | dl.contact-form dd { 1373 | display: block; 1374 | width: 100%; 1375 | } 1376 | dl dt, 1377 | dl.contact-form dt { 1378 | text-align: left; 1379 | } 1380 | dl dt:before, dl dt:after, 1381 | dl.contact-form dt:before, 1382 | dl.contact-form dt:after { 1383 | display: none; 1384 | } 1385 | dl:before, 1386 | dl.contact-form:before { 1387 | display: none; 1388 | } 1389 | 1390 | /* フッター */ 1391 | #footer > div { 1392 | width: 100%; 1393 | float: none; 1394 | } 1395 | } 1396 | -------------------------------------------------------------------------------- /img/icons/facebook@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/monsier-oui/OSHIRASE/16ef47379ae52d27785cfe755b3e93a4d9fcf809/img/icons/facebook@2x.png -------------------------------------------------------------------------------- /img/icons/nicovideo@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/monsier-oui/OSHIRASE/16ef47379ae52d27785cfe755b3e93a4d9fcf809/img/icons/nicovideo@2x.png -------------------------------------------------------------------------------- /img/icons/novelist@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/monsier-oui/OSHIRASE/16ef47379ae52d27785cfe755b3e93a4d9fcf809/img/icons/novelist@2x.png -------------------------------------------------------------------------------- /img/icons/piapro@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/monsier-oui/OSHIRASE/16ef47379ae52d27785cfe755b3e93a4d9fcf809/img/icons/piapro@2x.png -------------------------------------------------------------------------------- /img/icons/pixiv@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/monsier-oui/OSHIRASE/16ef47379ae52d27785cfe755b3e93a4d9fcf809/img/icons/pixiv@2x.png -------------------------------------------------------------------------------- /img/icons/soundcloud@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/monsier-oui/OSHIRASE/16ef47379ae52d27785cfe755b3e93a4d9fcf809/img/icons/soundcloud@2x.png -------------------------------------------------------------------------------- /img/icons/tinami@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/monsier-oui/OSHIRASE/16ef47379ae52d27785cfe755b3e93a4d9fcf809/img/icons/tinami@2x.png -------------------------------------------------------------------------------- /img/icons/tumblr@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/monsier-oui/OSHIRASE/16ef47379ae52d27785cfe755b3e93a4d9fcf809/img/icons/tumblr@2x.png -------------------------------------------------------------------------------- /img/icons/twitter@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/monsier-oui/OSHIRASE/16ef47379ae52d27785cfe755b3e93a4d9fcf809/img/icons/twitter@2x.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 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 | 46 | 47 | 48 |
49 |
50 |

51 | 52 | 53 | 54 | 55 |
56 |

About

57 |
58 | 59 |
60 |
61 |
タイトル
62 |
63 |
内容
64 |
65 |
発行日
66 |
67 |
頒布予定
68 |
69 |
    70 |
  • 71 |
  • 72 |
  • 73 |
74 |
75 |
装丁
76 |
77 |
価格
78 |
79 |
主催
80 |
81 |
82 |

執筆者募集について

83 |

84 | 85 |

86 |

参加資格

87 | 91 |

リンクについて

92 |

下記のバナーに限り、転載、直リンクを可とします。

93 | 94 | 
<a href="" title="" target="_blank"><img src="" alt="" width="200px" height="40px" /></a>
95 | 108 |
109 | 110 | 111 | 112 |
113 |

Sample

114 | 132 |
133 | 134 | 135 | 136 |
137 |

Order

138 |

自家通販

139 |

140 | 141 |

142 |
143 |
お名前(本名)
144 |
145 |
メールアドレス
146 |
147 |
郵便番号
148 |
149 |
住所
150 |
151 |
冊数
152 |
153 |
備考
154 |
155 |
156 |
157 |

158 | 159 | 160 |

161 | 162 |

書店委託

163 |

164 | 165 |

166 |
167 | 168 | 169 | 170 |
171 |

Flier

172 |
173 | 174 |
175 |

配布イベント

176 |
177 |
178 |
179 |
180 |
181 |
182 |

配布サークル募集

183 |

184 |
185 | 186 | 187 | 188 |
189 |

Contact

190 |
191 |
お名前
192 |
193 |
メールアドレス
194 |
195 |
本文
196 |
197 |
198 |
199 |
200 |

201 | 202 | 203 |

204 |
205 | 206 | 207 | 220 | 221 |
222 | 223 | 224 | 225 | 226 | 227 | -------------------------------------------------------------------------------- /js/func.js: -------------------------------------------------------------------------------- 1 | $(document).ready(function(){ 2 | // Enterページ的なやつ 3 | if($('#enter').length > 0){ // 要素が存在していたら処理を行う 4 | // 訪問済みかCookieで判定 5 | var flag = false; 6 | var cookies = document.cookie; 7 | if(cookies.length>0){ 8 | cookies = cookies.split(';'); 9 | for(var i in cookies){ 10 | if(cookies[i].indexOf('entered') > -1){ 11 | flag = true; 12 | } 13 | } 14 | } 15 | 16 | // Enterページ的なやつを表示 17 | if(!flag){ 18 | $('#enter').addClass('show'); 19 | } 20 | 21 | // Enterボタンクリックで訪問済みフラグ樹立 22 | $('#button-enter').click(function(){ 23 | // Cookieでフラグをたてる 24 | var path = location.pathname.split('/'); 25 | if(path[path.length-1] != ''){ 26 | path[path.length-1] = ''; 27 | path = path.join('/'); 28 | } 29 | var extime = new Date().getTime(); 30 | extime = new Date(extime + (60*60*24*180*1000)); // 有効期限=180日 31 | extime = extime.toUTCString(); 32 | document.cookie = 'entered=true; path='+path+'; expires='+extime+'; '; 33 | 34 | // スクロール位置を初期化 35 | if($(window).scrollTop()>0){ 36 | $(window).delay(1000).scrollTop(0,0); 37 | } 38 | 39 | // Enterページ的なやつをはずす 40 | $('#enter').removeClass('show'); 41 | }); 42 | } 43 | 44 | // ナビゲーションリンクをクリックしてスクロールする 45 | $('#nav a[href^="#"]').click(function(event){ 46 | var id = $(this).attr("href"); 47 | var offset = 60; 48 | var target = $(id).offset().top - offset; 49 | $('html, body').animate({scrollTop:target}, 300); 50 | event.preventDefault(); 51 | //メニュー開閉用チェックボックスをfalseにする 52 | $('#nav-opener-check').prop({'checked': false}); 53 | return false; 54 | }); 55 | // 最上部リンク 56 | var btnToTop = $('#scroll-to-top'); 57 | btnToTop.hide(); 58 | $(window).scroll(function () { 59 | if ($(this).scrollTop() > 300) { 60 | btnToTop.fadeIn(); 61 | }else{ 62 | btnToTop.fadeOut(); 63 | } 64 | }); 65 | btnToTop.click(function () { 66 | $('body, html').animate({scrollTop:0}, 500, 'swing'); 67 | return false; 68 | }); 69 | 70 | // サムネイルクリックでキャプション表示 71 | $('.caption-toggle').click(function(event){ 72 | $(this).parent('.sample-caption').toggleClass('on'); 73 | }); 74 | 75 | //ソーシャルなんとか 76 | var url = location.href; 77 | var title = encodeURIComponent(document.title); 78 | //ツイートボタン 79 | $('#tweet').click(function(){ 80 | window.open('http://twitter.com/share?text='+title+'&url='+url, 'tweetwindow', 'width=550, height=420'); 81 | }); 82 | //ツイート数 83 | //JSONの読み込み 84 | $.ajax({ 85 | type: 'GET', 86 | url: 'http://urls.api.twitter.com/1/urls/count.json', 87 | data: { 88 | url : encodeURI(url), 89 | noncache: new Date() 90 | }, 91 | dataType: 'jsonp', 92 | success: function(data) { 93 | $('#count-tweet').find('a').text(data.count).attr({'href': 'https://twitter.com/search?q='+url+'&src=typd'}); 94 | } 95 | }); 96 | //いいねボタン 97 | $('#like').click(function(){ 98 | window.open('http://www.facebook.com/sharer.php?u='+url+'&t='+title, 'sharewindow', 'width=550, height=420'); 99 | }); 100 | //シェア数 101 | var count; 102 | $.ajax({ 103 | url:'http://graph.facebook.com/?id=' + url, 104 | dataType:"jsonp", 105 | success:function(obj){ 106 | if(typeof(obj.shares) == 'undefined'){ 107 | count = 0; 108 | }else{ 109 | count = obj.shares; 110 | } 111 | $('#count-like').text(count); 112 | } 113 | }); 114 | //LINEで送るボタン 115 | $('#line').click(function(){ 116 | window.location.href = 'line://msg/text/'+title+' '+url; 117 | }); 118 | }); -------------------------------------------------------------------------------- /scss/_media-queries.scss: -------------------------------------------------------------------------------- 1 | // --------------------------------------------------------------------------------------------------------------------- 2 | // 3 | // Author: Rafal Bromirski 4 | // www: http://paranoida.com/ 5 | // twitter: http://twitter.com/paranoida 6 | // dribbble: http://dribbble.com/paranoida 7 | // 8 | // Licensed under a MIT License 9 | // 10 | // --------------------------------------------------------------------------------------------------------------------- 11 | // 12 | // Requirements: 13 | // Sass 3.2.0+ 14 | // 15 | // Version: 16 | // 1.3 // developed on 14/11/2013 17 | // 18 | // Mixins: 19 | // @ min-screen(width) // shortcut for @media screen and (min-width ...) 20 | // @ max-screen(width) // shortcut for @media screen and (max-width ...) 21 | // @ screen(min-width, max-width) // shortcut for @media screen and (min-width ...) and (max-width ...) 22 | // --- 23 | // @ min-screen-height(height) // shortcut for @media screen and (min-height ...) 24 | // @ max-screen-height(height) // shortcut for @media screen and (max-height ...) 25 | // @ screen-height(min-height, max-height) // shortcut for @media screen and (min-height ...) and (max-height ...) 26 | // --- 27 | // @ iphone3 // only iPhone (2, 3G, 3GS) landscape & portrait 28 | // @ iphone3(landscape) // only iPhone (2, 3G, 3GS) only landscape 29 | // @ iphone3(portrait) // only iPhone (2, 3G, 3GS) only portrait 30 | // --- 31 | // @ iphone4 // only iPhone (4, 4S) landscape & portrait 32 | // @ iphone4(landscape) // only iPhone (4, 4S) only landscape 33 | // @ iphone4(portrait) // only iPhone (4, 4S) only portrait 34 | // --- 35 | // @ iphone5 // only iPhone (5) landscape & portrait 36 | // @ iphone5(landscape) // only iPhone (5) only landscape 37 | // @ iphone5(portrait) // only iPhone (5) only portrait 38 | // --- 39 | // @ ipad // all iPads (1, 2, 3, 4, Mini) landscape & portrait 40 | // @ ipad(landscape) // all iPads (1, 2, 3, 4, Mini) only landscape 41 | // @ ipad(portrait) // all iPads (1, 2, 3, 4, Mini) only portrait 42 | // --- 43 | // @ ipad-retina // only iPad (3, 4) landscape & portrait 44 | // @ ipad-retina(landscape) // only iPad (3, 4) only landscape 45 | // @ ipad-retina(portrait) // only iPad (3, 4) only portrait 46 | // --- 47 | // @ hdpi(ratio) // devices with hidpi displays (default ratio: 1.3) 48 | // 49 | // --------------------------------------------------------------------------------------------------------------------- 50 | 51 | // --------------------------------------------------------------------------------------------------------------------- 52 | // --- screen ---------------------------------------------------------------------------------------------------------- 53 | // --------------------------------------------------------------------------------------------------------------------- 54 | 55 | @mixin screen($resMin, $resMax) 56 | { 57 | @media screen and (min-width: $resMin) and (max-width: $resMax) 58 | { 59 | @content; 60 | } 61 | } 62 | 63 | @mixin max-screen($res) 64 | { 65 | @media screen and (max-width: $res) 66 | { 67 | @content; 68 | } 69 | } 70 | 71 | @mixin min-screen($res) 72 | { 73 | @media screen and (min-width: $res) 74 | { 75 | @content; 76 | } 77 | } 78 | 79 | @mixin screen-height($resMin, $resMax) 80 | { 81 | @media screen and (min-height: $resMin) and (max-height: $resMax) 82 | { 83 | @content; 84 | } 85 | } 86 | 87 | @mixin max-screen-height($res) 88 | { 89 | @media screen and (max-height: $res) 90 | { 91 | @content; 92 | } 93 | } 94 | 95 | @mixin min-screen-height($res) 96 | { 97 | @media screen and (min-height: $res) 98 | { 99 | @content; 100 | } 101 | } 102 | 103 | // --------------------------------------------------------------------------------------------------------------------- 104 | // --- hdpi ------------------------------------------------------------------------------------------------------------ 105 | // --------------------------------------------------------------------------------------------------------------------- 106 | 107 | // Based on bourbon hidpi-media-queries file (https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/css3/_hidpi-media-query.scss) 108 | // HiDPI mixin. Default value set to 1.3 to target Google Nexus 7 (http://bjango.com/articles/min-device-pixel-ratio/) 109 | 110 | @mixin hdpi($ratio: 1.3) 111 | { 112 | $deviceMaxWidth: 1080px; 113 | 114 | @media only screen and (-webkit-min-device-pixel-ratio: $ratio) and (max-device-width: $deviceMaxWidth), 115 | only screen and (min--moz-device-pixel-ratio: $ratio) and (max-device-width: $deviceMaxWidth), 116 | only screen and (-o-min-device-pixel-ratio: #{$ratio}/1) and (max-device-width: $deviceMaxWidth), 117 | only screen and (min-resolution: #{round($ratio*96)}dpi) and (max-device-width: $deviceMaxWidth), 118 | only screen and (min-resolution: #{$ratio}dppx) and (max-device-width: $deviceMaxWidth) 119 | { 120 | @content; 121 | } 122 | } 123 | 124 | // --------------------------------------------------------------------------------------------------------------------- 125 | // --- iphone ---------------------------------------------------------------------------------------------------------- 126 | // --------------------------------------------------------------------------------------------------------------------- 127 | 128 | @mixin iphone3($orientation: all) 129 | { 130 | $deviceMinWidth: 320px; 131 | $deviceMaxWidth: 480px; 132 | $devicePixelRatio: 1; 133 | 134 | @if $orientation == all 135 | { 136 | @media only screen and (min-device-width: $deviceMinWidth) and (max-device-width: $deviceMaxWidth) 137 | and (-webkit-device-pixel-ratio: $devicePixelRatio) 138 | { 139 | @content; 140 | } 141 | } 142 | @else 143 | { 144 | @media only screen and (min-device-width: $deviceMinWidth) and (max-device-width: $deviceMaxWidth) 145 | and (-webkit-device-pixel-ratio: $devicePixelRatio) and (orientation:#{$orientation}) 146 | { 147 | @content; 148 | } 149 | } 150 | } 151 | 152 | // --------------------------------------------------------------------------------------------------------------------- 153 | // --- iphone-retina --------------------------------------------------------------------------------------------------- 154 | // --------------------------------------------------------------------------------------------------------------------- 155 | 156 | @mixin iphone4($orientation: all) 157 | { 158 | $deviceMinWidth: 320px; 159 | $deviceMaxWidth: 480px; 160 | $devicePixelRatio: 2; 161 | $deviceAspectRatio: '2/3'; 162 | 163 | @if $orientation == all 164 | { 165 | @media only screen and (min-device-width: $deviceMinWidth) and (max-device-width: $deviceMaxWidth) 166 | and (-webkit-device-pixel-ratio: $devicePixelRatio) and (device-aspect-ratio: $deviceAspectRatio) 167 | { 168 | @content; 169 | } 170 | } 171 | @else 172 | { 173 | @media only screen and (min-device-width: $deviceMinWidth) and (max-device-width: $deviceMaxWidth) 174 | and (-webkit-device-pixel-ratio: $devicePixelRatio) and (device-aspect-ratio: 2/3) and (orientation:#{$orientation}) 175 | { 176 | @content; 177 | } 178 | } 179 | } 180 | 181 | // --------------------------------------------------------------------------------------------------------------------- 182 | // --- iphone-5 -------------------------------------------------------------------------------------------------------- 183 | // --------------------------------------------------------------------------------------------------------------------- 184 | 185 | @mixin iphone5($orientation: all) 186 | { 187 | $deviceMinWidth: 320px; 188 | $deviceMaxWidth: 568px; 189 | $devicePixelRatio: 2; 190 | $deviceAspectRatio: '40/71'; 191 | 192 | @if $orientation == all 193 | { 194 | @media only screen and (min-device-width: $deviceMinWidth) and (max-device-width: $deviceMaxWidth) 195 | and (-webkit-device-pixel-ratio: $devicePixelRatio) and (device-aspect-ratio: $deviceAspectRatio) 196 | { 197 | @content; 198 | } 199 | } 200 | @else 201 | { 202 | @media only screen and (min-device-width: $deviceMinWidth) and (max-device-width: $deviceMaxWidth) 203 | and (-webkit-device-pixel-ratio: $devicePixelRatio) and (device-aspect-ratio: $deviceAspectRatio) and (orientation:#{$orientation}) 204 | { 205 | @content; 206 | } 207 | } 208 | } 209 | 210 | // --------------------------------------------------------------------------------------------------------------------- 211 | // --- ipads (all) ----------------------------------------------------------------------------------------------------- 212 | // --------------------------------------------------------------------------------------------------------------------- 213 | 214 | @mixin ipad($orientation: all) 215 | { 216 | $deviceMinWidth: 768px; 217 | $deviceMaxWidth: 1024px; 218 | 219 | @if $orientation == all 220 | { 221 | @media only screen and (min-device-width: $deviceMinWidth) and (max-device-width: $deviceMaxWidth) 222 | { 223 | @content; 224 | } 225 | } 226 | @else 227 | { 228 | @media only screen and (min-device-width: $deviceMinWidth) and (max-device-width: $deviceMaxWidth) 229 | and (orientation:#{$orientation}) 230 | { 231 | @content; 232 | } 233 | } 234 | } 235 | 236 | // --------------------------------------------------------------------------------------------------------------------- 237 | // --- ipad-retina ----------------------------------------------------------------------------------------------------- 238 | // --------------------------------------------------------------------------------------------------------------------- 239 | 240 | @mixin ipad-retina($orientation: all) 241 | { 242 | $deviceMinWidth: 768px; 243 | $deviceMaxWidth: 1024px; 244 | $devicePixelRatio: 2; 245 | 246 | @if $orientation == all 247 | { 248 | @media only screen and (min-device-width: $deviceMinWidth) and (max-device-width: $deviceMaxWidth) 249 | and (-webkit-device-pixel-ratio: $devicePixelRatio) 250 | { 251 | @content; 252 | } 253 | } 254 | @else 255 | { 256 | @media only screen and (min-device-width: $deviceMinWidth) and (max-device-width: $deviceMaxWidth) 257 | and (-webkit-device-pixel-ratio: $devicePixelRatio) and (orientation:#{$orientation}) 258 | { 259 | @content; 260 | } 261 | } 262 | } 263 | 264 | 265 | 266 | @mixin sumaho { 267 | /* ラッパ */ 268 | .wrapper { 269 | padding: 0.5rem; 270 | } 271 | 272 | /* ナビゲーションバー */ 273 | #navbar { 274 | position: fixed; 275 | min-height: 45px; 276 | font-size: 1.8rem; 277 | box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); 278 | } 279 | #nav { 280 | @include no-margin; 281 | width: 86%; 282 | li { 283 | @include no-margin; 284 | display: block; 285 | a { 286 | padding: 0.8rem 0.6em; 287 | } 288 | a:active { 289 | background-color: $color-yellow; 290 | } 291 | } 292 | } 293 | #nav-opener { 294 | display: block; 295 | position: relative; 296 | float: right; 297 | margin: 0 10px 0 0; 298 | padding: 10px; 299 | color: $color-white; 300 | line-height: 1; 301 | } 302 | #nav-opener-check { 303 | &+ul { 304 | overflow: hidden; 305 | @include transition(1s, 0.5s); 306 | opacity: 0; 307 | max-height: 0; 308 | } 309 | &:checked+ul { 310 | opacity: 1; 311 | max-height: 50rem; 312 | } 313 | } 314 | 315 | /* アイキャッチ */ 316 | #eyecatch { 317 | margin-top: 45px; 318 | height: 400px; 319 | } 320 | 321 | /* 紙もの */ 322 | .paper { 323 | margin: 0 auto; 324 | width: 100%; 325 | float: none; 326 | } 327 | 328 | /* LINEボタンはスマホのみ表示 */ 329 | .btn.line { 330 | display: block; 331 | } 332 | 333 | /* サンプル一覧 */ 334 | #sample-list { 335 | li { 336 | width: 100%; 337 | margin: 0.2rem 0; 338 | } 339 | } 340 | .sample-img { 341 | &:before { 342 | padding-top: 45%; 343 | } 344 | } 345 | .icon-social { 346 | width: 40px; 347 | height: 40px; 348 | } 349 | 350 | /* dl要素 */ 351 | dl, 352 | dl.contact-form { 353 | dt, 354 | dd { 355 | display: block; 356 | width: 100%; 357 | } 358 | dt { 359 | text-align: left; 360 | &:before, 361 | &:after { 362 | display: none; 363 | } 364 | } 365 | &:before { 366 | display: none; 367 | } 368 | } 369 | 370 | /* フッター */ 371 | #footer { 372 | &>div { 373 | width: 100%; 374 | float: none; 375 | } 376 | } 377 | 378 | } 379 | 380 | @include min-screen(1200px) { 381 | #sample-list li { 382 | width: 24%; 383 | } 384 | .wrapper:not(#footer) { 385 | margin: 0 auto; 386 | width: 1200px; 387 | } 388 | } 389 | 390 | @include hdpi(1.5) { 391 | @include sumaho; 392 | } 393 | 394 | @include max-screen(580px) { 395 | @include sumaho; 396 | } -------------------------------------------------------------------------------- /scss/_mixin.scss: -------------------------------------------------------------------------------- 1 | //======================== 2 | // Mixins 3 | //======================== 4 | 5 | // clear 6 | @mixin clear { 7 | clear: both; 8 | } 9 | @mixin clearfix { 10 | display: block; 11 | *zoom: 1; 12 | &:after { 13 | content: "."; 14 | display: block; 15 | visibility: hidden; 16 | height: 0; 17 | font-size: 0; 18 | clear: both; 19 | } 20 | } 21 | 22 | // inline-block 23 | @mixin inline-block { 24 | display: inline-block; 25 | *display: inline; 26 | *zoom: 1; 27 | } 28 | 29 | // 余白をつめる 30 | @mixin no-margin { 31 | margin: 0; 32 | padding: 0; 33 | } 34 | 35 | // リスト頭を消す 36 | @mixin no-bullets { 37 | list-style: none; 38 | padding: 0; 39 | li { 40 | list-style-image: none; 41 | list-style-type: none; 42 | margin-left: 0; 43 | } 44 | } 45 | 46 | // hover時の色変え 47 | @mixin background-color-hover($color: #AAAAAA) { 48 | background-color: $color; 49 | &:hover, 50 | &:active { 51 | background-color: lighten($color, 8%); 52 | } 53 | } 54 | 55 | // 角丸 56 | @mixin border-radius($radius) { 57 | border-radius: $radius; 58 | } 59 | 60 | // 透過 61 | @mixin opacity($opacity) { 62 | opacity: $opacity; 63 | $ms-opacity: $opacity*100; 64 | filter: alpha(opacity=$ms-opacity); 65 | } 66 | 67 | // トランジション 68 | @mixin transition($duration:0.2s, $ease:ease-out) { 69 | transition: all $duration $ease; 70 | } -------------------------------------------------------------------------------- /scss/_normalize.scss: -------------------------------------------------------------------------------- 1 | /*! normalize.css v3.0.1 | MIT License | git.io/normalize */ 2 | 3 | /** 4 | * 1. Set default font family to sans-serif. 5 | * 2. Prevent iOS text size adjust after orientation change, without disabling 6 | * user zoom. 7 | */ 8 | 9 | html { 10 | font-family: sans-serif; /* 1 */ 11 | -ms-text-size-adjust: 100%; /* 2 */ 12 | -webkit-text-size-adjust: 100%; /* 2 */ 13 | } 14 | 15 | /** 16 | * Remove default margin. 17 | */ 18 | 19 | body { 20 | margin: 0; 21 | } 22 | 23 | /* HTML5 display definitions 24 | ========================================================================== */ 25 | 26 | /** 27 | * Correct `block` display not defined for any HTML5 element in IE 8/9. 28 | * Correct `block` display not defined for `details` or `summary` in IE 10/11 and Firefox. 29 | * Correct `block` display not defined for `main` in IE 11. 30 | */ 31 | 32 | article, 33 | aside, 34 | details, 35 | figcaption, 36 | figure, 37 | footer, 38 | header, 39 | hgroup, 40 | main, 41 | nav, 42 | section, 43 | summary { 44 | display: block; 45 | } 46 | 47 | /** 48 | * 1. Correct `inline-block` display not defined in IE 8/9. 49 | * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. 50 | */ 51 | 52 | audio, 53 | canvas, 54 | progress, 55 | video { 56 | display: inline-block; /* 1 */ 57 | vertical-align: baseline; /* 2 */ 58 | } 59 | 60 | /** 61 | * Prevent modern browsers from displaying `audio` without controls. 62 | * Remove excess height in iOS 5 devices. 63 | */ 64 | 65 | audio:not([controls]) { 66 | display: none; 67 | height: 0; 68 | } 69 | 70 | /** 71 | * Address `[hidden]` styling not present in IE 8/9/10. 72 | * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22. 73 | */ 74 | 75 | [hidden], 76 | template { 77 | display: none; 78 | } 79 | 80 | /* Links 81 | ========================================================================== */ 82 | 83 | /** 84 | * Remove the gray background color from active links in IE 10. 85 | */ 86 | 87 | a { 88 | background: transparent; 89 | } 90 | 91 | /** 92 | * Improve readability when focused and also mouse hovered in all browsers. 93 | */ 94 | 95 | a:active, 96 | a:hover { 97 | outline: 0; 98 | } 99 | 100 | /* Text-level semantics 101 | ========================================================================== */ 102 | 103 | /** 104 | * Address styling not present in IE 8/9/10/11, Safari, and Chrome. 105 | */ 106 | 107 | abbr[title] { 108 | border-bottom: 1px dotted; 109 | } 110 | 111 | /** 112 | * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. 113 | */ 114 | 115 | b, 116 | strong { 117 | font-weight: bold; 118 | } 119 | 120 | /** 121 | * Address styling not present in Safari and Chrome. 122 | */ 123 | 124 | dfn { 125 | font-style: italic; 126 | } 127 | 128 | /** 129 | * Address variable `h1` font-size and margin within `section` and `article` 130 | * contexts in Firefox 4+, Safari, and Chrome. 131 | */ 132 | 133 | h1 { 134 | font-size: 2em; 135 | margin: 0.67em 0; 136 | } 137 | 138 | /** 139 | * Address styling not present in IE 8/9. 140 | */ 141 | 142 | mark { 143 | background: #ff0; 144 | color: #000; 145 | } 146 | 147 | /** 148 | * Address inconsistent and variable font size in all browsers. 149 | */ 150 | 151 | small { 152 | font-size: 80%; 153 | } 154 | 155 | /** 156 | * Prevent `sub` and `sup` affecting `line-height` in all browsers. 157 | */ 158 | 159 | sub, 160 | sup { 161 | font-size: 75%; 162 | line-height: 0; 163 | position: relative; 164 | vertical-align: baseline; 165 | } 166 | 167 | sup { 168 | top: -0.5em; 169 | } 170 | 171 | sub { 172 | bottom: -0.25em; 173 | } 174 | 175 | /* Embedded content 176 | ========================================================================== */ 177 | 178 | /** 179 | * Remove border when inside `a` element in IE 8/9/10. 180 | */ 181 | 182 | img { 183 | border: 0; 184 | } 185 | 186 | /** 187 | * Correct overflow not hidden in IE 9/10/11. 188 | */ 189 | 190 | svg:not(:root) { 191 | overflow: hidden; 192 | } 193 | 194 | /* Grouping content 195 | ========================================================================== */ 196 | 197 | /** 198 | * Address margin not present in IE 8/9 and Safari. 199 | */ 200 | 201 | figure { 202 | margin: 1em 40px; 203 | } 204 | 205 | /** 206 | * Address differences between Firefox and other browsers. 207 | */ 208 | 209 | hr { 210 | -moz-box-sizing: content-box; 211 | box-sizing: content-box; 212 | height: 0; 213 | } 214 | 215 | /** 216 | * Contain overflow in all browsers. 217 | */ 218 | 219 | pre { 220 | overflow: auto; 221 | } 222 | 223 | /** 224 | * Address odd `em`-unit font size rendering in all browsers. 225 | */ 226 | 227 | code, 228 | kbd, 229 | pre, 230 | samp { 231 | font-family: monospace, monospace; 232 | font-size: 1em; 233 | } 234 | 235 | /* Forms 236 | ========================================================================== */ 237 | 238 | /** 239 | * Known limitation: by default, Chrome and Safari on OS X allow very limited 240 | * styling of `select`, unless a `border` property is set. 241 | */ 242 | 243 | /** 244 | * 1. Correct color not being inherited. 245 | * Known issue: affects color of disabled elements. 246 | * 2. Correct font properties not being inherited. 247 | * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. 248 | */ 249 | 250 | button, 251 | input, 252 | optgroup, 253 | select, 254 | textarea { 255 | color: inherit; /* 1 */ 256 | font: inherit; /* 2 */ 257 | margin: 0; /* 3 */ 258 | } 259 | 260 | /** 261 | * Address `overflow` set to `hidden` in IE 8/9/10/11. 262 | */ 263 | 264 | button { 265 | overflow: visible; 266 | } 267 | 268 | /** 269 | * Address inconsistent `text-transform` inheritance for `button` and `select`. 270 | * All other form control elements do not inherit `text-transform` values. 271 | * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. 272 | * Correct `select` style inheritance in Firefox. 273 | */ 274 | 275 | button, 276 | select { 277 | text-transform: none; 278 | } 279 | 280 | /** 281 | * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` 282 | * and `video` controls. 283 | * 2. Correct inability to style clickable `input` types in iOS. 284 | * 3. Improve usability and consistency of cursor style between image-type 285 | * `input` and others. 286 | */ 287 | 288 | button, 289 | html input[type="button"], /* 1 */ 290 | input[type="reset"], 291 | input[type="submit"] { 292 | -webkit-appearance: button; /* 2 */ 293 | cursor: pointer; /* 3 */ 294 | } 295 | 296 | /** 297 | * Re-set default cursor for disabled elements. 298 | */ 299 | 300 | button[disabled], 301 | html input[disabled] { 302 | cursor: default; 303 | } 304 | 305 | /** 306 | * Remove inner padding and border in Firefox 4+. 307 | */ 308 | 309 | button::-moz-focus-inner, 310 | input::-moz-focus-inner { 311 | border: 0; 312 | padding: 0; 313 | } 314 | 315 | /** 316 | * Address Firefox 4+ setting `line-height` on `input` using `!important` in 317 | * the UA stylesheet. 318 | */ 319 | 320 | input { 321 | line-height: normal; 322 | } 323 | 324 | /** 325 | * It's recommended that you don't attempt to style these elements. 326 | * Firefox's implementation doesn't respect box-sizing, padding, or width. 327 | * 328 | * 1. Address box sizing set to `content-box` in IE 8/9/10. 329 | * 2. Remove excess padding in IE 8/9/10. 330 | */ 331 | 332 | input[type="checkbox"], 333 | input[type="radio"] { 334 | box-sizing: border-box; /* 1 */ 335 | padding: 0; /* 2 */ 336 | } 337 | 338 | /** 339 | * Fix the cursor style for Chrome's increment/decrement buttons. For certain 340 | * `font-size` values of the `input`, it causes the cursor style of the 341 | * decrement button to change from `default` to `text`. 342 | */ 343 | 344 | input[type="number"]::-webkit-inner-spin-button, 345 | input[type="number"]::-webkit-outer-spin-button { 346 | height: auto; 347 | } 348 | 349 | /** 350 | * 1. Address `appearance` set to `searchfield` in Safari and Chrome. 351 | * 2. Address `box-sizing` set to `border-box` in Safari and Chrome 352 | * (include `-moz` to future-proof). 353 | */ 354 | 355 | input[type="search"] { 356 | -webkit-appearance: textfield; /* 1 */ 357 | -moz-box-sizing: content-box; 358 | -webkit-box-sizing: content-box; /* 2 */ 359 | box-sizing: content-box; 360 | } 361 | 362 | /** 363 | * Remove inner padding and search cancel button in Safari and Chrome on OS X. 364 | * Safari (but not Chrome) clips the cancel button when the search input has 365 | * padding (and `textfield` appearance). 366 | */ 367 | 368 | input[type="search"]::-webkit-search-cancel-button, 369 | input[type="search"]::-webkit-search-decoration { 370 | -webkit-appearance: none; 371 | } 372 | 373 | /** 374 | * Define consistent border, margin, and padding. 375 | */ 376 | 377 | fieldset { 378 | border: 1px solid #c0c0c0; 379 | margin: 0 2px; 380 | padding: 0.35em 0.625em 0.75em; 381 | } 382 | 383 | /** 384 | * 1. Correct `color` not being inherited in IE 8/9/10/11. 385 | * 2. Remove padding so people aren't caught out if they zero out fieldsets. 386 | */ 387 | 388 | legend { 389 | border: 0; /* 1 */ 390 | padding: 0; /* 2 */ 391 | } 392 | 393 | /** 394 | * Remove default vertical scrollbar in IE 8/9/10/11. 395 | */ 396 | 397 | textarea { 398 | overflow: auto; 399 | } 400 | 401 | /** 402 | * Don't inherit the `font-weight` (applied by a rule above). 403 | * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. 404 | */ 405 | 406 | optgroup { 407 | font-weight: bold; 408 | } 409 | 410 | /* Tables 411 | ========================================================================== */ 412 | 413 | /** 414 | * Remove most spacing between table cells. 415 | */ 416 | 417 | table { 418 | border-collapse: collapse; 419 | border-spacing: 0; 420 | } 421 | 422 | td, 423 | th { 424 | padding: 0; 425 | } -------------------------------------------------------------------------------- /scss/style.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | @import "_mixin"; 4 | @import "_normalize"; 5 | 6 | //======================== 7 | // Variables 8 | //======================== 9 | 10 | $color-white: #ffffff; 11 | $color-green: #1ba5a5; 12 | $color-yellow: #f9d76d; 13 | $color-light: #efefef; 14 | $color-gray: #aaaaaa; 15 | $color-dark: #555555; 16 | $color-black: #000000; 17 | 18 | $link: $color-green; 19 | $hover: darken($link,8%); 20 | 21 | $font-sans-serif: 'Roboto', sans-serif; 22 | $font-serif: 'Merriweather', Georgia, "Times New Roman", Times, serif; 23 | 24 | 25 | /* Main 26 | ========================================================================== */ 27 | 28 | * { 29 | box-sizing: border-box; 30 | } 31 | html { 32 | font-size: 12px; 33 | } 34 | 35 | body { 36 | background: $color-white; 37 | color: $color-dark; 38 | font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif; 39 | } 40 | #body-wrapper { 41 | display: table; 42 | table-layout: fixed; 43 | position: relative; 44 | height: 100%; 45 | width: 100%; 46 | } 47 | .wrapper { 48 | margin: 37.5px 0; 49 | padding: 37.5px; 50 | } 51 | 52 | /* リンク */ 53 | a { 54 | color: $link; 55 | text-decoration: none; 56 | &:not(#scroll-to-top):not(.btn):not(.banner):hover, { 57 | border-bottom: 3px solid $color-yellow; 58 | } 59 | } 60 | 61 | /* 画像 */ 62 | img { 63 | vertical-align: top; 64 | } 65 | 66 | /* 見出し */ 67 | h1, 68 | h2, 69 | h3, 70 | h4, 71 | h5, 72 | h6 { 73 | clear: both; 74 | -webkit-font-smoothing: antialiased; 75 | } 76 | h1, 77 | h2 { 78 | font-family: $font-serif; 79 | } 80 | h1 { 81 | font-size: 3.6rem; 82 | font-weight: 900; 83 | line-height: 1.12rem; 84 | text-align: center; 85 | } 86 | h2 { 87 | display: flex; 88 | align-items: center; 89 | text-align: center; 90 | color: $color-gray; 91 | font-size: 2.4rem; 92 | font-weight: normal; 93 | &:before, 94 | &:after { 95 | border-top: 1px solid $color-gray; 96 | content: ''; 97 | display: inline; /* for IE */ 98 | flex-grow: 1; 99 | } 100 | &:before { 101 | margin-right: 0.5em; 102 | } 103 | &:after { 104 | margin-left: 0.5em; 105 | } 106 | } 107 | 108 | /* 寄せ */ 109 | .left { 110 | text-align: left; 111 | } 112 | .center { 113 | text-align: center; 114 | } 115 | .right { 116 | text-align: right; 117 | } 118 | 119 | /* セクション */ 120 | section { 121 | display: block; 122 | margin-bottom: 5rem; 123 | @include clearfix; 124 | } 125 | 126 | /* 定義リスト */ 127 | dl { 128 | margin: 20px auto; 129 | overflow: hidden; 130 | position: relative; 131 | dt { 132 | float: left; 133 | width: 28%; 134 | clear: both; 135 | padding: 3px 2% 15px 0; 136 | position: relative; 137 | 138 | } 139 | dd { 140 | float: right; 141 | width: 67%; 142 | margin: 0; 143 | padding: 3px 0 15px 3%; 144 | } 145 | &.contact-form { 146 | dt { 147 | width: 36%; 148 | text-align: right; 149 | position: relative; 150 | top: 5px; 151 | } 152 | dd { 153 | width: 62%; 154 | } 155 | } 156 | } 157 | 158 | /* 整形済みテキスト */ 159 | pre { 160 | padding: 0.5rem; 161 | width: 98%; 162 | background: darken($color-white, 8%); 163 | border: 1px solid darken($color-white, 16%); 164 | @include border-radius(0.2em); 165 | font-size: 0.9em; 166 | font-family: Consolas, 'Courier New', Courier, Monaco, monospace; 167 | white-space: pre; 168 | white-space: pre-wrap; 169 | } 170 | 171 | /* Enterページ的なやつ */ 172 | #enter { 173 | margin: 0; 174 | position: absolute; 175 | background-color: $color-white; 176 | @include transition(0.8s); 177 | z-index: -1; 178 | top: 0; 179 | right: 0; 180 | bottom: 0; 181 | left: 0; 182 | padding: 20% 2em; 183 | @include opacity(0); 184 | &.show { 185 | z-index: 99999; 186 | @include opacity(1); 187 | } 188 | } 189 | #button-enter { 190 | margin-top: 2em; 191 | } 192 | 193 | /* アイキャッチ */ 194 | #eyecatch { 195 | margin: 0 auto; 196 | height: 600px; 197 | background-repeat: no-repeat; 198 | background-size: cover; 199 | background-position: top; 200 | position: relative; 201 | color: $color-white; 202 | h1 { 203 | @include no-margin; 204 | line-height: 480px; 205 | } 206 | } 207 | 208 | /* ナビゲーションメニュー */ 209 | #navbar { 210 | @include no-margin; 211 | position: absolute; 212 | z-index: 999; 213 | top: 0; 214 | width: 100%; 215 | background-color: lighten($color-black, 8%); 216 | } 217 | #nav { 218 | @include no-margin; 219 | @include no-bullets; 220 | float: left; 221 | li { 222 | @include inline-block; 223 | margin: 0; 224 | position: relative; 225 | font-family: $font-sans-serif; 226 | font-weight: bold; 227 | text-transform: uppercase; 228 | background-color: transparent; 229 | } 230 | a { 231 | position: relative; 232 | display: block; 233 | padding: 10px 15px; 234 | text-decoration: none; 235 | box-sizing: border-box; 236 | color: $color-white; 237 | &:hover { 238 | border: 0px !important; 239 | .nav-label { 240 | border-bottom: 3px solid $color-yellow; 241 | } 242 | } 243 | } 244 | } 245 | #nav-opener { 246 | display: none; 247 | } 248 | #nav-opener-check { 249 | display: none; 250 | } 251 | 252 | /* 最上部へスクロールするボタン */ 253 | #scroll-to-top { 254 | position: fixed; 255 | z-index: 99; 256 | bottom: 10px; 257 | right: 10px; 258 | font-size: 5rem; 259 | text-decoration: none; 260 | color: rgba(0, 0, 0, 0.6); 261 | @include border-radius(0.4em); 262 | @include transition(0.3s, 0.2s); 263 | &:hover { 264 | color: rgba(0, 0, 0, 0.8); 265 | } 266 | } 267 | 268 | ///* 表紙 */ 269 | #cover { 270 | } 271 | 272 | ///* フライヤー */ 273 | #flier-paper { 274 | } 275 | 276 | /* ダミー */ 277 | .dummy { 278 | text-align: center; 279 | position: relative; 280 | &:before { 281 | content: ''; 282 | display: block; 283 | width: 100%; 284 | vertical-align: middle; 285 | z-index: 0; 286 | background-color: $color-light; 287 | background-image: linear-gradient( 288 | -45deg, 289 | $color-green 25%, 290 | $color-gray 25%, $color-gray 50%, 291 | $color-green 50%, $color-green 75%, 292 | $color-gray 75%, $color-gray 293 | ); 294 | background-size: 16px 16px; 295 | } 296 | &:after { 297 | color: $color-white; 298 | font-family: $font-sans-serif; 299 | z-index: 1; 300 | position: absolute; 301 | top: 50%; 302 | right: 0; 303 | left: 0; 304 | } 305 | * { 306 | position: absolute; 307 | top: 0; 308 | right: 0; 309 | bottom: 0; 310 | left: 0; 311 | z-index: 2; 312 | } 313 | } 314 | 315 | /* 紙ものを格納する要素 */ 316 | .paper { 317 | margin: 0 1rem 1rem 0; 318 | float: left; 319 | width: 36%; 320 | height: auto; 321 | img { 322 | width: 100%; 323 | min-width: 250px; 324 | height: auto; 325 | } 326 | &.dummy:before { 327 | padding-top: 141.4%; 328 | } 329 | &.dummy:after { 330 | content: 'Now Printing'; 331 | font-size: 2.4rem; 332 | } 333 | } 334 | 335 | /* 概要 */ 336 | #spec { 337 | @include clearfix; 338 | dt { 339 | &:before { 340 | content: ""; 341 | width: 30px; 342 | position: absolute; 343 | border-top: 1px solid #333; 344 | top: -5px; 345 | right: -15px; 346 | } 347 | &:after { 348 | content: ""; 349 | width: 5px; 350 | height: 5px; 351 | background: #333; 352 | position: absolute; 353 | border-radius: 50%; 354 | top: -7px; 355 | right: -3px; 356 | } 357 | } 358 | &:before { 359 | content: ""; 360 | width: 1px; 361 | position: absolute; 362 | border-left: 1px solid #333; 363 | top: 0; 364 | bottom: 0; 365 | left: 28%; 366 | } 367 | ul { 368 | @include no-margin; 369 | } 370 | } 371 | 372 | /* ソーシャルメディア */ 373 | #share { 374 | @include no-margin; 375 | margin-top: 2rem; 376 | @include no-bullets; 377 | text-align: center; 378 | li { 379 | @include inline-block; 380 | } 381 | } 382 | .btn { 383 | i{ 384 | margin-right: 0.2rem; 385 | } 386 | } 387 | .btn.twitter { 388 | @include background-color-hover(#55acee); 389 | } 390 | .btn.facebook { 391 | @include background-color-hover(#3b5998); 392 | } 393 | .btn.line { 394 | @include background-color-hover(#00c300); 395 | display: none; 396 | } 397 | .social-count { 398 | margin: 0 auto 12px auto; 399 | padding: 8px 0; 400 | position: relative; 401 | width: 95%; 402 | color: #777777; 403 | font-size: 1.1em; 404 | text-align: center; 405 | background: $color-white; 406 | border: 1px solid $color-light; 407 | @include border-radius(0.3rem); 408 | &:after, 409 | &:before{ 410 | position: absolute; 411 | top: 100%; 412 | left: 50%; 413 | border: solid transparent; 414 | content: ' '; 415 | height: 0; 416 | width: 0; 417 | pointer-events: none; 418 | } 419 | &:after { 420 | border-color: rgba(255, 255, 255, 0); 421 | border-top-color: $color-white; 422 | border-width: 10px; 423 | margin-left: -10px; 424 | } 425 | &:before { 426 | border-color: rgba(175, 175, 175, 0); 427 | border-top-color: $color-light; 428 | border-width: 11px; 429 | margin-left: -11px; 430 | } 431 | a { 432 | color: $color-dark; 433 | display: block; 434 | width: 80%; 435 | margin: auto; 436 | } 437 | } 438 | 439 | /* サンプル一覧 */ 440 | #sample-list { 441 | @include no-bullets; 442 | margin: 0 auto; 443 | text-align: center; 444 | @include clearfix; 445 | li { 446 | @include inline-block; 447 | position: relative; 448 | overflow: hidden; 449 | width: 32.7%; 450 | margin: 0.3%; 451 | float: left; 452 | @include border-radius(0.5rem); 453 | .sample-caption.on { 454 | bottom: 0; 455 | } 456 | } 457 | } 458 | .sample-img { 459 | background-size: cover; 460 | background-position: center 20%; 461 | background-repeat: no-repeat; 462 | -webkit-background-clip: padding-box; 463 | background-clip: padding-box; 464 | &:before { 465 | content: ''; 466 | display: block; 467 | padding-top: 100%; 468 | } 469 | } 470 | .banner { 471 | @include inline-block; 472 | width: 200px; 473 | &.dummy:after { 474 | margin-top: -6%; 475 | top: 50%; 476 | } 477 | &.dummy { 478 | &:before { 479 | padding-top: 20%; 480 | @include border-radius(0.25rem); 481 | } 482 | &:after { 483 | content: 'no banner'; 484 | font-size: 13px; 485 | } 486 | } 487 | } 488 | .sample-caption { 489 | position: absolute; 490 | bottom: -70%; 491 | left: 0; 492 | z-index: 2; 493 | padding: 0.5rem; 494 | width: 100%; 495 | height: 100%; 496 | color: $color-white; 497 | background: rgba(0, 0, 0, 0.6); 498 | text-align: left; 499 | @include transition(0.5s, 0.2s); 500 | p { 501 | @include no-margin; 502 | margin-bottom: 0.2rem; 503 | z-index: 9; 504 | @include opacity(0); 505 | @include transition(0.5s, 0.2s); 506 | } 507 | img { 508 | width: 200px; 509 | } 510 | } 511 | .caption-toggle { 512 | float: right; 513 | font-size: 2rem; 514 | cursor: pointer; 515 | z-index: 99; 516 | @include transition(0.5s, 0.2s); 517 | &:before { 518 | content: '\f0fe'; 519 | } 520 | .on &:before { 521 | content: '\f146'; 522 | } 523 | &+p { 524 | @include opacity(1); 525 | } 526 | } 527 | .on p { 528 | @include opacity(1); 529 | } 530 | 531 | /* ソーシャルメディアアイコン */ 532 | .icon-pixiv { 533 | background: url(../img/icons/pixiv@2x.png); 534 | } 535 | .icon-twitter { 536 | background: url(../img/icons/twitter@2x.png); 537 | } 538 | .icon-novelist { 539 | background-image: url(../img/icons/novelist@2x.png); 540 | } 541 | .icon-tinami { 542 | background-image: url(../img/icons/tinami@2x.png); 543 | } 544 | .icon-tumblr { 545 | background-image: url(../img/icons/tumblr@2x.png); 546 | } 547 | .icon-facebook { 548 | background-image: url(../img/icons/facebook@2x.png); 549 | } 550 | .icon-piapro { 551 | background-image: url(../img/icons/piapro@2x.png); 552 | } 553 | .icon-soundcloud { 554 | background-image: url(../img/icons/soundcloud@2x.png); 555 | } 556 | .icon-nicovideo { 557 | background-image: url(../img/icons/nicovideo@2x.png); 558 | } 559 | .icon-disabled { 560 | filter: grayscale(100%); 561 | -webkit-filter: grayscale(100%); 562 | } 563 | .icon-social { 564 | display: inline-block; 565 | width: 20px; 566 | height: 20px; 567 | vertical-align: text-top; 568 | background-size: 100%; 569 | background-repeat: no-repeat; 570 | background-position: center; 571 | } 572 | 573 | /* テキストボックス、テキストエリア */ 574 | input[type='text'], 575 | textarea { 576 | padding: 0.3rem; 577 | width: 24rem; 578 | max-width: 95%; 579 | border: 1px solid $color-gray; 580 | @include border-radius(0.3rem); 581 | outline: none; 582 | &:focus { 583 | border-color: $color-green; 584 | } 585 | } 586 | input[type='text'] { 587 | } 588 | textarea { 589 | height: 7rem; 590 | } 591 | 592 | /* ボタン */ 593 | button, 594 | input[type='submit'], 595 | input[type='reset'], 596 | .btn { 597 | margin: 3px; 598 | padding: 0.7rem 2rem; 599 | font-size: 1.1rem; 600 | outline: none; 601 | border: none; 602 | @include border-radius(0.3em); 603 | @include inline-block; 604 | color: $color-white; 605 | font-family: $font-sans-serif; 606 | text-transform: uppercase; 607 | box-shadow: inset 0 -0.2rem rgba(0, 0, 0, 0.1); 608 | @include transition(0.2s); 609 | cursor: pointer; 610 | @include background-color-hover($color-gray); 611 | &:hover { 612 | text-decoration: none; 613 | } 614 | &:active { 615 | box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4); 616 | } 617 | .icon { 618 | margin: 0.1rem; 619 | width: 1rem; 620 | height: 1rem; 621 | } 622 | } 623 | button[type='submit'], 624 | input[type='submit'], 625 | .submit { 626 | @include background-color-hover($color-green); 627 | } 628 | 629 | /* チェックボックス、ラジオボタン */ 630 | input[type="checkbox"], 631 | input[type="radio"] { 632 | @include opacity(0); 633 | position: absolute; 634 | &+i { 635 | margin-right: 0.2rem; 636 | font-size: 1.2rem; 637 | width: 1.2rem; 638 | vertical-align: middle; 639 | } 640 | } 641 | input[type="checkbox"]{ 642 | &+i:before { 643 | content: '\f096'; 644 | } 645 | &:checked+i:before { 646 | content: "\f14a"; 647 | } 648 | } 649 | input[type="radio"]{ 650 | &+i:before { 651 | content: '\f10c'; 652 | } 653 | &:checked+i:before { 654 | content: "\f192"; 655 | } 656 | } 657 | 658 | /* フッター */ 659 | #footer { 660 | margin-bottom: 0; 661 | background: $color-gray; 662 | color: $color-white; 663 | &>div { 664 | margin: 0; 665 | padding: 1rem; 666 | width: 50%; 667 | float: left; 668 | } 669 | } 670 | #credit { 671 | margin-top: 2rem; 672 | text-align: center; 673 | clear: both; 674 | font-family: $font-serif; 675 | font-size: 0.9rem; 676 | } 677 | 678 | @import "_media-queries"; --------------------------------------------------------------------------------