https://github.com/yokonoha/fslinear
FSLinear -フリーでスマートな線形スタイルのCaffeineCSS互換スタイルシート
https://github.com/yokonoha/fslinear
caffeine caffeinecss css css3 yokochayokoha
Last synced: about 1 year ago
JSON representation
FSLinear -フリーでスマートな線形スタイルのCaffeineCSS互換スタイルシート
- Host: GitHub
- URL: https://github.com/yokonoha/fslinear
- Owner: yokonoha
- License: mit
- Created: 2025-03-04T01:03:49.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-03-04T08:36:05.000Z (over 1 year ago)
- Last Synced: 2025-03-29T08:17:46.638Z (over 1 year ago)
- Topics: caffeine, caffeinecss, css, css3, yokochayokoha
- Language: CSS
- Homepage:
- Size: 243 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# FSLinear
FSLinear -フリーでスマートな線形スタイルのCaffeineCSS互換スタイルシート
FSLinearは商用非商用問わずどなたでも簡単に利用できる**無料のスタイルシート**です。
サイトを**クールな雰囲気**にデコレーションします。
またCaffeineCSSの互換スタイルシートですので、ダークモード用テーマとしてもご活用いただけます。
IT系のサイトや個人サイト製作のお供に、是非。
************************************
## New!
CaffeineCSSと同時に使用できるスクリプトが公開されました!
昼間はCaffeineCSSの明るくポップな色合い、夜間はFSLinearのダークで目に優しい色合い といったように自動で切替を行ってくれます!
https://github.com/yokonoha/CaffeineAutoThemeChangerScript
************************************
(このリポジトリは予告なしに削除される場合がありますので、使用時は直リンクを避け、ご自身のサーバーへアップロードすることをお勧めします。)
ライセンスはMITライセンスまたは横茶横葉Aライセンスのいずれかからお選びいただけます。(注:このライセンスは「オープンソースライセンス」であり、価格体系に関するライセンスではございません。利用料は無料です。)
実装方法から活用例、チートシート等を掲載いたしました。ご自由にご活用ください!
*******************************************
## プロモーション&実装例
CaffeineCSSと同様にスマホ,PCなどの多様な画面サイズに対応しています。(自動伸縮)
左側の枠線のみに着色することでシンプルかつ統一感のあるデザインを実現しました。
角のある枠デザインを採用。また、夜間でも読みやすい黒基調のスタイルに仕上がっています。
*************************
CaffeineCSSと同じClassで構成されています。linkタグの文字列をcaffeine.cssからfslinear.cssに変更するだけで簡単にテーマ変更が可能です。
またCaffeineCSSにはないコンポーネントとして"WhiteMark"と"space"が追加されました!
また、FSLinearではcntクラス(CaffeineCSSのstem用div)はspace(空白)に設定されています。
***********************
こちらは実装例です。(コンテンツはフィクションです。)
リンクテキストは既定の青色から緑色に変更され、視認性が向上し、下線も隠してすっきりしたデザインになりました。
文章量に応じて自動的にサイズ変更されますが、画面からはみ出ることはありません。(但し、大きなサイズの画像使用時を除きます。)
***********************************
## 使い方
このセクションでは実装方法を説明していますが、同じ内容はダウンロードページにあるBasicTemplate.htmlにも記載されています。このセクションを飛ばしてそちらをご利用いただいても問題ありません。なお、BasicTemplate.htmlにはライセンスはございませんのでご自由にご活用ください。
**********
### はじめに (環境設定)
Fslinearなどの外部CSSファイルを適用するには、cssファイル本体を編集中のhtmlファイルと同じディレクトリへコピーした後に、以下の一文をheadタグ内に記載する必要があります。
```Init.html
```
CaffeineCSSなど、他の外部CSSを適用する場合は順序やclass名の競合にお気を付けください。
*************
### タイトル表示
最初のタイトル表示は以下のように設定します
```titlesample.html
(サイト名を入力)
```
### コンテンツ格納div要素のデコレーション
コンテンツはclass指定付きのdiv要素を使用して格納します。
classの値にはA~Zの大文字アルファベットを代入します(注1)。全てのアルファベットでカラーリングが異なります。
注1: Rev.1時点では大文字アルファベット24文字分が利用できます。今後アップデートされる場合は利用可能なclass値が新規追加される場合があります。
```divsample.html
新着情報
サイト管理者からのお知らせがここに表示されます。
現在、お知らせがありません。
```
### space(空白)
FSLinearにおいて、spaceはコンテンツ格納div間を離す役割を担っています。
適用する際は以下のようにします。
```space.html
```
これはコンテンツ配置を視覚的にわかりやすく示すために使用されます。
表示崩れを避けるため、新式では要素をdiv内に含めず、また旧式のdiv内p要素には何も入力しません。
*********************************************
### マーク化
テキストを選択不能なミニサイズのマークに変換することができます。
テキストは各p要素へ記載します。
以下のようにmarks-container内に配列することで正しい形で横並びに配列されます。
class値は以下6種から選べます。
(b:青1/b2:青2/y:黄/o:オレンジ/r:赤/g:緑)
CaffeineCSSとはカラーが変更されています。
```marks.html
Marks
decoration
by
utilizing
FSLinear
Style!
```
******************
### フッター部分
フッターはデフォルトで黒く着色されます。
この例にある権利表記文は、横茶横葉Aライセンスをご利用の場合、このままご利用いただければ全く問題ありません。**この通り記載することでライセンス上の権利表記要件を満たしたこととなります**。
(MITライセンスを選択された方は、MITライセンスの一般的な表記方法に従ってください。)
```footersample.html
このページではFSLinearを使用しています。
```
idはテーマ変更時に使用したい方以外は指定しなくてもOKです。
横茶横葉Aライセンスを選択された方で、デザインの関係上この権利表記文が障害となる場合、省略を正式に可とします。
製作者は記載漏れがあった場合、故意である場合を除き、指摘は致しませんのでご安心ください。この権利表記文を必須とした理由はスタイルシート本体に何らかの不備が見つかった場合に利用者様へ迅速にお知らせできるようにするためです。
## ライセンスについて
このCSSは無料でご活用いただけますが、**オープンソースライセンスまたは独自ライセンスが付加されています**。
これらのライセンスは保証、利用条件、利用許可 などを記載したものであり、価格体系を示すものではありません。
FSLinearはMITライセンス(オープンソースライセンス)と横茶横葉Aライセンス(独自ライセンス)のマルチライセンス体系を採用しています。
どちらにも長所と短所がございますので、利用者様の用途に合わせてお好きなものをどちらか一つお選び下さい。
### 要点(抜粋)
- **MITライセンス**
- 世界的に使用されている、有名なオープンソースライセンス
- 様式に基づいた権利表記が必要
- 正式かつフォーマルな条文
- [**横茶横葉Aライセンス**](https://yokonoha.github.io/alicense)
- 主に横茶横葉が製作した成果物に付加される独自の互換ライセンス
- 条件は緩く、商用利用が可能
- 条文は口語(ラフな文調)での記述
- 権利表記は端的に記載しても問題なし
- 見過ごせないほど良くない使い方でない限りは問題なし
- 条文の記載は一切不要
- 横茶横葉の利用規約に従う(但し、再配布は例外的に可能)
- **共通事項**
- 製作者はいかなる責任も負いかねます
- 無償
- 改変可能
- 再配布可能
製作者より: 色々複雑なライセンス体系となってしまい、申し訳ございません。長々と書いてしまいましたが、あまり難しく考えたくない方は横茶横葉Aライセンスを適用してご利用ください。footerの権利表記文のみで大体は条件を満たしたことになります!(できる限り記載していただきたいですが、やむを得ない場合は書かなくても指摘はしません!) 横茶横葉の独自ライセンスは初心者でもリスクなしで安心して利用できるようにするために設定されています!
## チートシート
このセクションと同じ内容はダウンロードページにあるBasicTemplate.htmlにも記載されています。このセクションを飛ばしてそちらをご利用いただいても問題ありません。なお、BasicTemplate.htmlにはライセンスはございませんのでご自由にご活用ください。
**********
### HTML様式(CaffeineCSS適用済み)
```
ページタイトル
```
Modified from [Blank HTML Template](https://github.com/yokonoha/blank_HTML_Template/blob/main/basic_style.html)
### Bodyタグ部分(全て)
```body.html
Header
![]()
title
Marks
decoration
by
utilizing
this
CSS!
Simple White Mark Div
WH
このページではFSLinearを使用しています。
```
FSlinear & Documentations made by Y.Yokoha.
©2025 横茶横葉 All Rights Reserved.
©2025 横葉の工房 All Rights Reserved.