Warning: "continue" targeting switch is equivalent to "break". Did you mean to use "continue 2"? in /home/cwor/www/corporate/managesite/soho_wp/wp-content/plugins/social-networks-auto-poster-facebook-twitter-g/inc/nxs_functions_engine.php on line 168

Warning: "continue" targeting switch is equivalent to "break". Did you mean to use "continue 2"? in /home/cwor/www/corporate/managesite/soho_wp/wp-content/plugins/social-networks-auto-poster-facebook-twitter-g/inc/nxs_functions_engine.php on line 175

Warning: Cannot modify header information - headers already sent by (output started at /home/cwor/www/corporate/managesite/soho_wp/wp-content/plugins/social-networks-auto-poster-facebook-twitter-g/inc/nxs_functions_engine.php:168) in /home/cwor/www/corporate/managesite/soho_wp/wp-content/plugins/stripe/includes/core/libraries/wp-session/class-wp-session.php on line 146
Skeleton CSS フレームワーク | 私たちCamarade(カマラード)はクリエイター目線で総合的な情報を発信するWebメディアとして情報をお届けしております。
制作部制作部
2016/03/23

Skeleton CSS フレームワーク

この記事は約2分で読めます。

Skeleton CSS フレームワーク

CSS

Skeleton は、ミニマルな構成のフレームワークです。
レスポンシブ対応でウェブパーツや、グリッドやフォーム、ボタンなどがシンプルに設計されています。

デモページ ダウンロードページ

グリッド

グリッドは、row classの中に、大きさであるサイズのクラス ( 下では one  や eleven ) と、 columnクラスをつけて構成します。

<div class=“row”>
 <div class=“one column”>One</div>
 <div class=“eleven columns”>Eleven</div>
</div>

skeleton_img02

テキスト

h1 ~ h6 や、p, pre には、シンプルなスタイルが当てられています。

skeleton_img03

最小限の構成

Skeletonは必要なものだけ提供しているので、後は自分のデザインにあわせて完成させていくことができます。

 

フォーム

skeleton_img05

フォームのボタン

skeleton_img04

テーブル

skeleton_img06

 

 

公式サイトはこちら

skeleton http://getskeleton.com/

Skeleton CSS フレームワーク
制作部

一覧へ戻る

私たちについて

私たち『Camarade(カマラード)』はクリエイター目線で
総合的な情報を発信するWebメディアとして
PhotoShopやillustratorの活用方法や、WordPressなどのCMSの
カスタマイズ方法など幅広い情報をお届けしていきます。
同時にSOHOやフリーランスのパートナーを募集しております。