「Simple+.css」公式：追加するだけでシンプル・美しいhtmlページになるCSSライブラリーリリース！

「Simple+.css」とは？

このサイトを運営している、中学生のわたくし「かえる」が先日リリースした、CSSライブラリーのことです！

CSSライブラリーとは、プログラムに追加するだけで美しいHTMLページが作れるというCSSファイルのことで、有名なCSSライブラリーもたくさんリリースされています。

今回リリースしたこの「Simple+.css」では、カスタマイズの余地を十分に残しながら、どんなHTMLページにも対応できる、シンプルなデザインに仕上げました。は

できる限りコードの量を少なくし、JavaScriptやSCSSは用いず、また独自のclassをHTMLに追加する必要もない、使いやすいものとして開発しました。

ブラウザのデフォルトのデザインと比較するとこちら。

Simple+.css

別にCSSやJavaScriptは加えず、純粋なHTMLコードにSimple+.cssを加えた例です。

（縦にスクロールできます）

ブラウザのデフォルト

先ほどの例から、Simple+.cssを省いたものです。

各ブラウザのデフォルトの値が設定されています。

（縦にスクロールできます）

デフォルトよりも美しくなっているのではないでしょうか。

Simple+.cssの使い方

使い方はとても簡単。

CSSファイルまたはコードを読み込み・追加するだけで、簡単に適用できます。

追加方法が３つあるのでそれぞれ紹介します。

ダウンロードして追加

以下のダウンロードリンクをクリックして、Simpe+.cssのファイルをダウンロード。※別タブで開き自動でダウンロードされます。

そして適用したいHTMLファイルと同じフォルダ内に移し、以下のコードをそのHTMLの<hard></hard>タグ内に追加して読み込んでください。

<link rel="stylesheet" href="simple-plus.css">

URLから追加

HTMLの<hard></hard>タグ内に以下のコードを追加するだけです。

<link rel="stylesheet" href="https://colorester.com/css/simple-plus.css">

コードをコピー＆ペーストで追加

HTMLに以下のCSSコードを追加することでも適用できます。

ここをクリックしてCSSコードを見る

@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap");
html {
font-size: 100%;
}
body {
font-family: "Noto Sans JP", sans-serif;
font-weight: 300;
}
h1 {
font-size: 2rem;
font-weight: 400;
}
h2 {
font-size: 1.5rem;
font-weight: 400;
}
h3 {
font-size: 1.3rem;
font-weight: 400;
}
h4 {
font-size: 1.1rem;
font-weight: 400;
}
h5 {
font-size: 1rem;
font-weight: 400;
}
h6 {
font-size: 1rem;
font-weight: 400;
}
p {
font-size: 1.1rem;
font-weight: 300;
}
strong {
font-size: 1.1rem;
font-weight: 500;
}
ul {
font-size: 1.1rem;
margin-left: 0rem;
}
ol {
font-size: 1.1rem;
margin-left: 0rem;
}
input:not(input[type="button"], input[type="file"]) {
font-family: "Noto Sans JP", sans-serif;
font-weight: 300;
padding: 2px;
font-size: 0.9rem;
border: solid 0.13rem #a5a4a4;
border-radius: 0.3rem;
}
input[type="button"] {
font-size: 0.9rem;
font-family: "Noto Sans JP", sans-serif;
background-color: white;
cursor: pointer;
padding: 0.3rem;
}
input[type="button"]:hover {
background: #f6f8f8;
}
input[type="button"]:active {
background: #d6e6eb;
}
button {
font-size: 0.9rem;
font-family: "Noto Sans JP", sans-serif;
background-color: white;
cursor: pointer;
padding: 0.3rem;
}
button:hover {
background: #f6f8f8;
}
button:active {
background: #ebf4f7;
}

table {
border-collapse: collapse;
}
td {
border: 0.2px solid;
padding: 0.3rem;
font-size: 1rem;
font-family: "Noto Sans JP", sans-serif;
}
label {
margin-right: 0.3rem;
}
textarea {
font-family: "Noto Sans JP", sans-serif;
font-weight: 300;
padding: 2px;
font-size: 0.9rem;
border: solid 0.13rem #a5a4a4;
border-radius: 0.3rem;
padding: 0.5rem;
}
input[type="checkbox"] {
cursor: pointer;
}
input[type="file"] {
cursor: pointer;
font-family: "Noto Sans JP", sans-serif;
font-weight: 300;
font-size: 0.8rem;
}

select {
background: #ffffff;
cursor: pointer;
border: solid 0.13rem #a5a4a4;
color: #333;
font-size: 16px;
padding: 0.15rem;
font-family: "Noto Sans JP", sans-serif;
font-weight: 300;
font-size: 0.9rem;
}

blockquote {
position: relative;
border-left: 0.3rem solid #71b8ce;
padding-left: 0.7rem;
}
blockquote:before {
position: absolute;
content: "‟";
font-size: 3rem;
color: #71b8ce;
top: -1rem;
left: 0.8rem;
}
blockquote p {
position: relative;
padding-left: 30px;
font-size: 1rem;
}
blockquote cite {
display: block;
font-size: 0.8rem;
color: #71b8ce;
text-align: right;
}
/*created by https://twitter.com/Tabijie3274 */

 

Simple+.cssのいいところ

①導入が楽

ほかのCSSライブラリーと違い、htmlタグにclassを追加する必要がなく、一瞬で適用できます。

②カスタマイズができる

とてもシンプルにまとめたため、そのあとに別のCSSコードで自分なりにカスタマイズできる余地が残っています。

また、このSimple+.css自体もとても簡単なコードで書かれているので、コードの内容を書き換えて利用することもできます

③既存のデザインを壊さない

開発の途中で追加してもデザインが壊れないよう、注意をしながら開発しました。

ページ全体の余白の指定など、サイトによってはデザインを大きく壊してしまう可能性のあるものは省いています。

なぜ開発しようと思ったか

なぜ中学生のわたしが開発を始めたのか紹介します。

自分は去年の夏からプログラミングに挑戦していて、ゲームやウェブサイト、拡張機能などを自作してきました。

そしてつい先日、「Colorest」という色にかかわるウェブサイトを自作したのですが、その時に感じたのはやはり

「デザインに時間がかかる！」

という純粋な感想。

特に、個性的なデザインを採用していたので、ページを増やすたびに毎回CSSを一から書く必要があったため、時間がかかりました。

そんな作業の中で、全ページで利用できる、デフォルトとなるCSSがあればとても便利だと気づき、開発を始めました。

CSSライブラリーは世界でたくさんリリースされているのですが、どうしても個性的なサイトをつくる時には、行き過ぎた装飾が邪魔になってしまいます。

そこで、どんなウェブサイトでもデザインを壊すことなく利用でき、しかもシンプルかつオシャレなものに仕上げ、できたのが「Simple+.css」です。

無料・商用利用OK・再配布自由・コード改変自由ですので、ぜひウェブサービスなどに活用ください！

もしよければ、Twitterもやっているので覗いていただければ嬉しいです！

それではよいプログラミングライフを！

最近のツイート

Tweets by Tabijie3274