福岡発の制作会社リクトのWebマガジンリクトマグ|Web集客×福岡×スクール=広告費削減

編集部ブログ

最近のCSSったら。

2019.09.26

最近どう? みんな、

パスタ巻いてる

©️Hi-Hi

どうも。中村です。
さて今日のネタは仕事寄りなので同業者以外の人には屁のツッパリにもならないかもしれませんが、CSSのお話をしようかと思います。

朝から晩までタスクに追われていると、中々勉強する時間が取れず成長しませんよね?
最近そんなストレスにさいなまれておりましたが、少し時間が取れたので、久しぶりに最近のCSS事情でもと色んなとことを覗いていたら、初心者にも上級者にも結構使えるかもしれないなぁというCSSフレームワークを見つけたのでご紹介したいなと思います。と言っても僕も使いこなしているわけではないですが、さわりだけ。

「BuddyCSS」

ってご存知ですか?

サイト的にはこんな感じです。https://buddycss.com/

「とりあえず使ってみよう!」ということで
このフレームワークはGulpやSassなども連携してるんですが「GulpやSassはハードルが高い」という人にもわかりやすい部分だけをつまんで「おお、いいかも」ってなプレゼンを目指したいと思います。

CSSフレームワークってのは、まあ要は

「CSS周りに関することは大体用意してますよ!」

ってことです。

とりあえずテキストエディターを開き(BracketsでもSublime Textでもなんでもいいですよ。)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>  
</body>
</html>

空っぽのHTMLを書いたら【Emmetなら!+タブ】
<header>タグの中にサイトに書いてある三行を突っ込む

<link rel="stylesheet" type="text/css" href="https://buddycss-cc55.kxcdn.com/downloads/1.0.7/css/buddy.plugins.min.css">
<link rel="stylesheet" type="text/css" href="https://buddycss-cc55.kxcdn.com/downloads/1.0.7/css/buddy.min.css">
<script type="text/javascript" src="https://buddycss-cc55.kxcdn.com/downloads/1.0.7/js/buddy.min.js"></script>

この三行ね。※サイトのは最後のjsに</script>が抜けてるから注意。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>BuddyCSS使ってみよう!</title>
<link rel="stylesheet" type="text/css" href="https://buddycss-cc55.kxcdn.com/downloads/1.0.7/css/buddy.plugins.min.css">
<link rel="stylesheet" type="text/css" href="https://buddycss-cc55.kxcdn.com/downloads/1.0.7/css/buddy.min.css">
<script type="text/javascript" src="https://buddycss-cc55.kxcdn.com/downloads/1.0.7/js/buddy.min.js"></script>
</head>
<body>  
</body>
</html>

こんな感じ。

はい、これで仕込み完了!( ´∀`)

簡単でしょ?(笑)
あとはこれにサイトの左側のメニューの中に書いてあるボタンとかカードのソースを<body>の中にコピペするだけ。

ここら辺ね。

<body>
 <section style="width:800px; margin:10vw auto;">
  <nav arial-label="breadcrumb">
    <ol class="nav-breadcrumb">
      <li><a href="#">Home</a></li>
      <li><a href="#">Vehicles</a></li>
      <li><a href="#">Voitures</a></li>
      <li><a href="#">Cars</a></li>
      <li aria-current="page">A5</li>
    </ol>
  </nav>
  <button type="button" class="btn bg-green inverse">Button</button>
  <button type="button" class="btn bg-red inverse">Button</button>
  <button type="button" class="btn bg-yellow inverse">Button</button>
  <button type="button" class="btn bg-blue inverse">Button</button>
  </section>
</body>

こんな感じ。これだけでブラウザで見てみると。

すでにいい感じにスタイルが当たっています。

ちなみにFont Awesomeなんかもhttps://fontawesome.com/icons?d=gallery
ここから好きなアイコンのコードを引っ張ってくれば特に設定もせずにアイコンを表示することができます。これがフレームワークの強みですね。
( ´∀`)

<i class="fab fa-android"></i>
<i class="fab fa-apple"></i>

これを書くだけで

こんなんでます。

てな訳で適当に画像を引っ張ってきたりCSSを当てたりしてカタカタやると、

http://lct-web.jp/_preview/BUDDYCSS

こんな感じのが1時間もかからずに作れちゃいます。

結構エフェクトなんかもかかっていて、いい感じじゃないですか?
スマホにも対応します。
( ´∀`)
今回は触りだけなので大雑把ですけど、使えるものを初めからまとめておいて、スクラッチのテンプレートとして用意しておけばコーディングが苦手な人でもいい感じのサイトがあっという間に作れちゃうかもしれませんね。

まとめ

というわけで今回は少し仕事よりの話でしたが、自分で勉強する時間が取れないときは人からの共有がありがたかったりするものです。
そんな忙しいあなたに少しでもヒントになれば、中村は幸せです。
今後も耳より情報を見つけたら紹介していきますね。

次回もパスタを巻いて頑張ります!!!


中村 玄太郎