v1は開発が終了しています。
当時マニュアル作られていなかったため存在しません。
Version 1 の墓
2017 ~ 2019.12
個人で作り始めた最初のころの残骸。当初は自分で使いまわす為だけのコード集、みたいなものをどうにかライブラリっぽくしただけのものなので公開するなんて恥ずかしくてできなかったけど、とりあえず名前をつけて自分の中でかわいがっていた。
作成の思想として、「CSSライブラリは使いたくない。けれどもCSSのノーマライズと最低限度のユーティリティクラスがまとまったものが欲しい」というのが出発点になった。JSは、aタグのリンクをページ内アンカーのものはスムーススクロールに、ページ外のものは外部ドメインなら別ウィンドウ展開にするように、という機能のみ。
公に公開していなかった為ほとんど何も残していないし見返すのも恥ずかしいものだが、記録として最終版の 1.5.1 の中身のみをここで公開しておく。
今になって見返すと、jQueryを使った記述がすごく短く簡潔で分かりやすいライブラリだったんだと改めて思う。今更 jQuery に戻る気は全くないが。
CSS
/* デフォルトスタイルセット */
* {margin: 0;padding: 0;outline: 0;font: inherit;vertical-align: baseline;background: transparent}
*,*:before,*:after{box-sizing: border-box}
[hidden]{display: none!important}
/* フォントの設定（rem参照のためにhtmlに適用） */
html{font-family: 'Noto Sans JP', Arial, "Hiragino Kaku Gothic Pro", Meiryo, "MS PGothic", sans-serif;font-size: 16px;color: #333;line-height: 1.8;font-weight: 400}
/* フォントサイズ可変 */@media only screen and (max-width:960px) {html{font-size: calc(12px + 0.417vw)}}
/* window高さにコンテンツが足りない時にmainを引き延ばすためのflex */body{display: flex;flex-direction: column;min-height: 100vh}main{display: block;flex-grow: 1}
/* ここから、細かい要素のリセットと再適用 */
a{color: #0082FF;text-decoration:none}
a:hover{text-decoration:underline}
ul,ol{list-style-type: none}
ul.disc,ol.disc{padding-left: 1.5em;list-style-type: disc}ul.circle,ol.circle{padding-left: 1.5em;list-style-type: circle}ul.square,ol.square{padding-left: 1.5em;list-style-type: square}ul.disc,ol.square{padding-left: 1.5em;list-style-type: disc}ul.decimal,ol.dicimal{padding-left: 1.5em;list-style-type: decimal}ul.decimal-lz,ol.decimal-lz{padding-left: 2.5em;list-style-type: decimal-leading-zero}
blockquote, q {quotes: none}
blockquote:before, blockquote:after, q:before, q:after {content: '';content: none}
sup {font-size: 0.5em;vertical-align: super}
sub {font-size: 0.5em;vertical-align: sub}
strong {font-weight: bolder}
em {font-weight: 700}
table {border-collapse: collapse;border-spacing: 0}
button,input {border: none;background: transparent}
/* margin-bottomの設定 */main p,main h1,main h2,main h3,main h4,main h5,main h6,.mb{margin-bottom: 1.3rem}
.mb0{margin-bottom: 0}.mb_{margin-bottom: .5rem}.mb1{margin-bottom: 1rem}.mb1_{margin-bottom: 1.5rem}.mb2{margin-bottom: 2rem}.mb2_{margin-bottom: 2.5rem}.mb3{margin-bottom: 3rem}
/* pを連続して段落替えしたときに行間が空かないように */main p+p{margin-top: -1.3rem}
img{object-fit: contain;font-family: 'object-fit: contain;';max-width: 100%;flex-shrink: 0}
/* ユニークスタイル */
.clearfix:after{content:" ";display:block;clear:both}
.centering{display: block;margin: auto;width: 100%;max-width: 960px;position: relative}
.hide{visibility: hidden;opacity: 0}.none{display: none}
.fill-parent{display: block;width: 100%;height: 100%}
.text-center{text-align: center}.text-right{text-align: right}.text-left{text-align: left}
.text-unit{display: inline-block;vertical-align: top}
.text-clear{font:0/0 a;color: transparent;text-shadow: none;white-space: nowrap}
/*レスポンシブ SP*/
@media only screen and (max-width:960px) {
.sp-hide{visibility: hidden;opacity: 0}
.sp-visible{visibility: visible;opacity: 1}
.sp-none{display: none}
}
/*レスポンシブ PC*/
@media print, screen and (min-width:700px) {
.pc-hide {visibility: hidden;opacity: 0}
.pc-visible{visibility: visible;opacity: 1}
.pc-none{display: none}
}
/*印刷対応*/
@media print {
@page {
size: A4 portrait;
margin: 12.7mm 9.7mm;
}
* {
-webkit-print-color-adjust: exact;
font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
}
body {
overflow-x: visible !important;
overflow-y: visible !important;
width: 1200px!important;
}
.centering {
width: 960px;
}
iframe {
background: #ccc;
}
}Javascript
jQuery(document).ready(function(){
// ページ内リンクの設定
$('a[href^="#"]').click(function(){
var speed = 400;
var href= $(this).attr("href");
var target = $(href == "#" || href == "" ? 'html' : href);
var position = target.offset().top;
$("html, body").animate({scrollTop:position}, speed, "swing");
return false;
});
// 外部リンク設定
$("a[href^=http]").not($('[href*="'+location.hostname+'"]')).not($("a[href^=http]").find('img').parents('a')).addClass("extlink").attr("target","_blank");
$('a[href$=".pdf"]').not($('a[href$=".pdf"]').find('img')).addClass("pdf").attr("target","_blank");
$('a[href*=".doc"]').not($('a[href*=".doc"]').find('img')).addClass("doc").attr("target","_blank");
$('a[href*=".xls"]').not($('a[href*=".xls"]').find('img')).addClass("xls").attr("target","_blank");
});