Bugle Diary: css

ラベル css の投稿を表示しています。すべての投稿を表示

2017/05/20

[Twitter][Bootstrap][design]50 Awesome Twitter Bootstrap Templates

Bootstrapのテンプレート集があったので備忘録として。
50 Awesome Twitter Bootstrap Templates

2017/05/17

[css]画像の縦横比を維持して表示する方法

画像の縦横比を維持しながら表示する場合、確か、7、8年前(ってどんだけだよ)ぐらいだとJavaScriptで画像の計算を行って表示させていたような気がしたんですが、

【図解】CSSだけで画像の縦横比を維持したサムネイルを表示する

を見たら、なんとCSSだけでいけるじゃーないっすか！

確かに記載されている通りに実装したら縦横比が維持されたわけですが、改めて記事を読んで思ったのは、CSS3が誕生したことによって、かつ、androidのOS 4以上の場合は、
できることがかなり広がっているのではないだろうか？ということである。

もう少し調べたらJSを使っていた処理もCSSで完結しそうなコードっていっぱいありそうな気がしてきた。

2017/04/09

[css]アニメーションを作成してくれるAnimista

前回、
anicollection
を紹介しましたが、それとは別に、lifehackerにて
さまざまなアニメーションを作成しCSSで出力できるサイト「Animista」
が紹介されていました。

こちらもアニメーション結果がcssで表示されるので大変便利なサイトっす。

animista

2017/03/21

[css][Material Design]UI Kit PSD Material UI Kit

PHPSPOTで紹介されていた
マテリアルデザインのUI Kit PSD「Material UI Kit」
の
Material UI Kit
ってすごくいかしているんだけど商業利用可能なのかー？

2017/03/20

[css]anicollection

PHPSPOTで紹介されていた
CSS3アニメーションの収集や投稿ができる「AniCollection」
の
anicollection
がわかりやすくていかしてる！

2017/02/04

[css]positionプロパティ「absolute」と「relative」のわかりやすい説明

前回紹介した
display: inline、display: block、display: inline-blockの違い
と同様に
positionプロパティ「absolute」と「relative」のわかりやすい説明がありました。

見ながら覚えよう！positionプロパティ「absolute」と「relative」についてのお話

2017/02/02

[CSS]display: inline、display: block、display: inline-blockの違い

display: inline、display: block、display: inline-blockの違いを説明した良記事を発見。

CSSの display: inline、display: block、display: inline-block をマスターしよう！

すんごいわかりやすい！

2016/10/18

[jQuery][css]rgbを16進数に変換

jQueryでstyleメソッドを使ってcolorプロパティーを取得すると、rgbで返ってくるので、
これを16進数にしたい場合を調査しました。

jQueryでrgb(255,255,255)を#FFFFFF形式に変換
によると、

jQuery(function(){
    $(".color").click(function(){
        $(".color").css({"borderColor":"#CCC"});
        $(this).css({"borderColor":"blue"});

        //クリックされた要素の背景色取得
        var bgColor = $(this).css("backgroundColor").toString();
        //背景色の余計な文字列削除
        bgColor = bgColor.replace("rgb(","");
        bgColor = bgColor.replace(")","");
        //文字列分割
        bgColor = bgColor.split(",");
        //10進数を16進数に変換して連結
        bgColor = "#"+parseInt(bgColor[0]).toString(16)+parseInt(bgColor[1]).toString(16)+parseInt(bgColor[2]).toString(16);
        //inputに値を設定
        $(this).nextAll("input[type=hidden]").val(bgColor);
    });
});

と記載されているが、実際、10より小さい数字に場合、違う値が返ってしまうと思っていたところ、何人かの人がコメントで突っ込みをしていた。

var bgColor = $(this).css("backgroundColor").toString().match(/\d+/g);
bgColor = "#"+bgColor.map(function(t){return ("0"+(t|0).toString(16)).substr(-2)}).join("");

2016/10/16

[BootStrap][design]freehtml5

きっかけは忘れてしまいましたが、素敵なデザインサイトを発見したので。

freehtml5

BootStrapベースでめちゃいい。

2016/10/14

[html][css]Google HTML/CSS Style Guide

Google公式のHTMLとCSSのコーディング規約
Google HTML/CSS Style Guide
めっちゃ参考になる！！

2016/06/21

[css][materialdesign][html5][jQuery]window scrollが発火しない件

material design liteを使って下のようなプログラムを実装しました。

$(window).on('scroll',function(){
 
});

なぜか上の処理が動かない。

stackoverflowの
Material design and jQuery, scroll not working
でも同じような投稿があり、結果的には、下のようにしたら動きました。

$('.mdl-layout__content').on('scroll',function(){
 
});

2016/06/20

[css][materialdesign][html5]dialog plugin

昨日のエントリーでmaterial design liteでdialogを使うには自前で実装する必要があるっぽく、ぐぐってみたら、プラグインがありました。

jQuery Modal Dialog Plugin For Material Design Lite

導入方法は超簡単で、

<link rel="stylesheet" href="./mdl-jquery-modal-dialog.css">
<script src="./mdl-jquery-modal-dialog.js"></script>

を入れた後に、

showDialog({
  title: 'Title',
  text: 'Text to show'
});

と呼び出せばおｋ

2016/06/19

[css][materialdesign][html5]dialogについて

material design liteでdialogを使いたくて調査していたら、なんと、dialogタグを推奨か、自前で実装してほしいと書いてあった。

しかも、dialogタグはchromeしかサポートしておらずwww

mobile safariでもサポートしてくれないかなー。

2016/05/27

[CSS][Material Design Lite][Material Design Gallery]Simple Signup Page

<!doctype html>
<html itemscope="" itemtype="http://schema.org/WebPage" lang="ja">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta http-equiv="content-style-type" content="text/css">
<meta http-equiv="content-script-type" content="text/javascript">
<title>Material Design</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.1.1/material.indigo-pink.min.css">
<style>
.signup {
  width: 100%;
  margin-top: 20px;
}

.mdl-textfield {
  width: 100%;
}

.p-10{
  padding: 0 10px 10px 10px;
}

.b-r-2{
  border-radius:2px;
}
</style>
<script defer src="https://code.getmdl.io/1.1.1/material.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body class="mdl-color--grey-50">
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
  <main class="mdl-layout__content">
    <div class="mdl-grid ">
      <div class="mdl-cell mdl-cell--2-col mdl-cell--hide-tablet mdl-cell--hide-phone"></div>
      <div class="mdl-cell mdl-cell--8-col mdl-color--white p-10 b-r-2">
        <h4>アカウント作成</h4>
        <form action="" method="POST">
          <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
            <input class="mdl-textfield__input" type="text" id="username" name="username" value="">
            <label class="mdl-textfield__label" for="username">ユーザー名</label>
          </div>
          <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
            <input class="mdl-textfield__input" type="text" id="email" name="email" value="">
            <label class="mdl-textfield__label" for="email">メールアドレス</label>
          </div>
          <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
            <input class="mdl-textfield__input" type="password" id="password" name="password">
            <label class="mdl-textfield__label" for="password">パスワード</label>
          </div>
          <button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect signup">アカウント作成</button>
        </form>
      </div>
      <div class="mdl-cell mdl-cell--2-col mdl-cell--hide-tablet mdl-cell--hide-phone"></div>
    </div>
  </main>
</div>
</body>
</html>

2016/05/25

[CSS][Material Design Lite][Material Design Gallery]Simple Login Page Part 2

<!doctype html>
<html itemscope="" itemtype="http://schema.org/WebPage" lang="ja">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta http-equiv="content-style-type" content="text/css">
<meta http-equiv="content-script-type" content="text/javascript">
<title>Material Design</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.1.1/material.indigo-pink.min.css">
<style>
.login {
  width: 100%;
  margin-top: 20px;
}

.mdl-textfield {
  width: 100%;
}

.p-10{
  padding: 0 10px 10px 10px;
}

.b-r-2{
  border-radius:2px;
}
</style>
<script defer src="https://code.getmdl.io/1.1.1/material.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body class="mdl-color--grey-50">
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
  <main class="mdl-layout__content">
    <div class="mdl-grid ">
      <div class="mdl-cell mdl-cell--2-col mdl-cell--hide-tablet mdl-cell--hide-phone"></div>
      <div class="mdl-cell mdl-cell--8-col mdl-color--white p-10 b-r-2">
        <h4>サービス名にログイン</h4>
        <p class="mdl-color-text--red-A700">メールアドレスとパスワードが<br>一致していません。</p>
        <form action="" method="POST">
          <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
            <input class="mdl-textfield__input" type="text" id="email" name="email" value="">
            <label class="mdl-textfield__label" for="email">メールアドレス</label>
          </div>
          <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
            <input class="mdl-textfield__input" type="password" id="password" name="password">
            <label class="mdl-textfield__label" for="password">パスワード</label>
          </div>
          <button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect login">ログイン</button>
          <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
            <a href="#">またはアカウント新規登録</a>
          </div>
        </form>
      </div>
      <div class="mdl-cell mdl-cell--2-col mdl-cell--hide-tablet mdl-cell--hide-phone"></div>
    </div>
  </main>
</div>
</body>
</html>

2016/05/24

[CSS][Material Design Lite][Material Design Gallery]Simple Login Page

<!doctype html>
<html itemscope="" itemtype="http://schema.org/WebPage" lang="ja">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta http-equiv="content-style-type" content="text/css">
<meta http-equiv="content-script-type" content="text/javascript">
<title>Material Design</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.1.1/material.indigo-pink.min.css">
<style>
.login {
  width: 100%;
  margin-top: 20px;
}
.mdl-layout-title {
  margin:0 auto;
}
.mdl-textfield {
  width: 100%;
}
</style>
<script defer src="https://code.getmdl.io/1.1.1/material.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body class="mdl-color--grey-50">
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
  <header class="mdl-layout__header">
    <div class="mdl-layout__header-row">
      <span class="mdl-layout-title"></span>
    </div>
  </header>
  <main class="mdl-layout__content">
    <div class="mdl-grid mdl-color--white">
      <div class="mdl-cell mdl-cell--2-col mdl-cell--hide-tablet mdl-cell--hide-phone"></div>
      <div class="mdl-cell mdl-cell--8-col">
        <p class="mdl-color-text--red-A700">メールアドレスとパスワードが<br>一致していません。</p>
        <form action="" method="POST">
          <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
            <input class="mdl-textfield__input" type="text" id="email" name="email" value="">
            <label class="mdl-textfield__label" for="email">メールアドレス</label>
          </div>
          <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
            <input class="mdl-textfield__input" type="password" id="password" name="password">
            <label class="mdl-textfield__label" for="password">パスワード</label>
          </div>
          <button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect login">ログイン</button>
        </form>
      </div>
      </div>
      <div class="mdl-cell mdl-cell--2-col mdl-cell--hide-tablet mdl-cell--hide-phone"></div>
    </div>
  </main>
</div>
<script>
</script>
</body>
</html>

2016/05/23

[CSS][Material Design Lite][Material Design Gallery]SubTitle List Page

<!doctype html>
<html itemscope="" itemtype="http://schema.org/WebPage" lang="ja">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta http-equiv="content-style-type" content="text/css">
<meta http-equiv="content-script-type" content="text/javascript">
<title>Material Design</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.1.1/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.1.1/material.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body class="mdl-color--grey-50">
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
  <header class="mdl-layout__header">
    <div class="mdl-layout__header-row">
      <span class="mdl-layout-title"></span>
      <div class="mdl-layout-spacer"></div>
      <nav class="mdl-navigation mdl-layout--large-screen-only">
      </nav>
    </div>
  </header>
  <div class="mdl-layout__drawer">
    <span class="mdl-layout-title"></span>
    <nav class="mdl-navigation">
    </nav>
  </div>
  <main class="mdl-layout__content">
    <div class="mdl-grid">
      <div class="mdl-cell mdl-cell--2-col mdl-cell--hide-tablet mdl-cell--hide-phone"></div>
      <div class="mdl-cell mdl-cell--8-col mdl-color--white">
        <ul class="mdl-list">
          <li class="mdl-list__item mdl-list__item--two-line">
            <span class="mdl-list__item-primary-content">
              <span>hoge</span>
              <span class="mdl-list__item-sub-title">hoge's sub title</span>
            </span>
            <span class="mdl-list__item-secondary-content">
              <i class="material-icons"></i>
            </span>
          </li>
          <li class="mdl-list__item mdl-list__item--two-line">
            <span class="mdl-list__item-primary-content">
              <span>foo</span>
              <span class="mdl-list__item-sub-title">foo's sub title</span>
            </span>
            <span class="mdl-list__item-secondary-content">
              <i class="material-icons"></i>
            </span>
          </li>
          <li class="mdl-list__item mdl-list__item--two-line">
            <span class="mdl-list__item-primary-content">
              <span>bar</span>
              <span class="mdl-list__item-sub-title">bar's sub title</span>
            </span>
            <span class="mdl-list__item-secondary-content">
              <i class="material-icons"></i>
            </span>
          </li>
        </ul>
      </div>
      <div class="mdl-cell mdl-cell--2-col mdl-cell--hide-tablet mdl-cell--hide-phone"></div>
    </div>
  </main>
</div>
<script>
</script>
</body>
</html>

2016/05/22

[CSS][Material Design Lite][Material Design Gallery]Simple List Page

<!doctype html>
<html itemscope="" itemtype="http://schema.org/WebPage" lang="ja">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta http-equiv="content-style-type" content="text/css">
<meta http-equiv="content-script-type" content="text/javascript">
<title>Material Design</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.1.1/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.1.1/material.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body class="mdl-color--grey-50">
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
  <header class="mdl-layout__header">
    <div class="mdl-layout__header-row">
      <span class="mdl-layout-title"></span>
      <div class="mdl-layout-spacer"></div>
      <nav class="mdl-navigation mdl-layout--large-screen-only">
      </nav>
    </div>
  </header>
  <div class="mdl-layout__drawer">
    <span class="mdl-layout-title"></span>
    <nav class="mdl-navigation">
    </nav>
  </div>
  <main class="mdl-layout__content">
    <div class="mdl-grid">
      <div class="mdl-cell mdl-cell--2-col mdl-cell--hide-tablet mdl-cell--hide-phone"></div>
      <div class="mdl-cell mdl-cell--8-col mdl-color--white">
        <ul class="mdl-list">
          <li class="mdl-list__item">
            <span class="mdl-list__item-primary-content">
              hoge
            </span>
          </li>
          <li class="mdl-list__item">
            <span class="mdl-list__item-primary-content">
              foo
            </span>
          </li>
          <li class="mdl-list__item">
            <span class="mdl-list__item-primary-content">
              bar
            </span>
          </li>
        </ul>
      </div>
      <div class="mdl-cell mdl-cell--2-col mdl-cell--hide-tablet mdl-cell--hide-phone"></div>
    </div>
  </main>
</div>
<script>
</script>
</body>
</html>

2016/05/21

[CSS][Material Design Lite][Material Design Gallery]Single Page

<!doctype html>
<html itemscope="" itemtype="http://schema.org/WebPage" lang="ja">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta http-equiv="content-style-type" content="text/css">
<meta http-equiv="content-script-type" content="text/javascript">
<title>Material Design</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.1.1/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.1.1/material.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body class="mdl-color--grey-50">
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
  <header class="mdl-layout__header">
    <div class="mdl-layout__header-row">
      <span class="mdl-layout-title"></span>
      <div class="mdl-layout-spacer"></div>
      <nav class="mdl-navigation mdl-layout--large-screen-only">
      </nav>
    </div>
  </header>
  <div class="mdl-layout__drawer">
    <span class="mdl-layout-title"></span>
    <nav class="mdl-navigation">
    </nav>
  </div>
  <main class="mdl-layout__content">
    <div class="mdl-grid">
      <div class="mdl-cell mdl-cell--2-col mdl-cell--hide-tablet mdl-cell--hide-phone"></div>
      <div class="mdl-cell mdl-cell--8-col mdl-color--white">
        Hello Material Design Recipe 1
      </div>
      <div class="mdl-cell mdl-cell--2-col mdl-cell--hide-tablet mdl-cell--hide-phone"></div>
    </div>
  </main>
</div>
<script>
</script>
</body>
</html>

2016/05/20

[CSS][Material Design Lite]material-design-galleryプロジェクト作成

Material Design Liteを使ったCSSとHTMLにはまっていて、それをまとめた場所がほしいなと思い、githubに
material-design-gallery
という形で作ってみました。

不定期ですが、作ったコーディングソースをアップしていこうかなと。

登録: 投稿 (Atom)