Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
3
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

@trkbt10

applique.css : 読み込むだけでAppleっぽいランディングページが作れるcssフレームワークを作った

Demo

リポジトリ:https://github.com/trkbt10/applique.css

アップリケは、CSSファイルをページに張るだけでそれなりに見れるようになるCSSフレームワークです。
あとはクラス名など特に気にすることなくHTMLタグを書き連ねるだけで、適切なスタイルを当ててくれます。

下のサービスで作成したものを、単体のCSSで書き出したものです。
Yosemite icon generator

サンプル

<html>
<head>
  <link rel="stylesheet" href="applique.min.css"/>
</head>
<body>
  <section>
    <h2>
      あなたとApplique今すぐダウンロード
      <small>無料Appliqueのダウンロード</small>
    </h2>
    <p> Applique.css は、単純なコーディングのサイトにまるでリンゴを想起させるようなデザインを与えます。</p>
  </section>
  </body>
</html>

このように書くだけで、下のような見た目を生成します。
Screenshot 2016-12-13 13.52.51.png

守るべきルールはとても少なく、sectionタグで章を区切る、sectionタグの下にはヘディングをつけるだけです。

最後に

このCSSには拡張性が全くありませんので、より込み入ったデザインをしたい場合にはむきません。
ですが、簡単なアプリケーションの紹介ページなどには非常に向いていると思いますので、ぜひ使ってみてください。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
3
Help us understand the problem. What are the problem?