Horic Design

a-blog cmsやJavaScriptなどの情報を発信しています。

28ページ目

ずるいボタンを実装してみた。

ずるいボタン

今回は赤塚 妙子さんが紹介されているずるいボタンを作成しようとして、定義されているMixinの意味が分からず、ハマって一日無駄にしたのでそれを記事にかいて見ようと思います。
ちなみに、下にそのソースコードを記載します。

@import "compass";
@mixin ts-000($op : .4){
  text-shadow: 1px -1px rgba(0, 0, 0, $op);
}
@mixin gradient-top-lighten($color:#666, $lighten:10%){
  background-color: $color;
  @include filter-gradient(lighten($color, $lighten), $color, vertical);
  @include background-image(linear-gradient(lighten($color, $lighten) 0%, $color 100%));
}
@mixin emboss-box($border: .1, $shadow: .05, $highlight: .5) {
  border: 1px solid rgba(0, 0, 0, $border);
  @include box-shadow(rgba(0, 0, 0, $shadow) -1px 1px 0, rgba(255, 255, 255, $highlight) -1px 1px 0 inset);
}
@mixin button($color: #48B1F2, $font-size: 16px, $text-color: white) {
  cursor:pointer;
  display: inline-block;
  background-origin: border-box;
  position: relative;
  font-weight: bold;
  @include ts-000(.1);
  @include gradient-top-lighten($color, 5%);
  @include border-radius(4px);
  @include emboss-box($border: .1, $shadow: .1, $highlight: .2);
  color: rgba($text-color, .9);
  text-align: center;
  font-size: $font-size;
  padding: 0 ($font-size * 2);
  height: $font-size * 3;
  line-height: $font-size * 3;
  i {
    font-size: 130%;
    margin-right: 5px;
    color: rgba($text-color, .5);
  }
  &:hover {
    @include gradient-top-lighten(lighten($color, 5%), 5%);
    text-decoration: none;
    color: $text-color;
    i {
      color: $text-color;
    }
  }
  &:active {
    @include gradient-top-lighten($color, 5%);
    top: 1px;
  }
}

.my-btn{
  @include button($color:#ef662f);
}

Mixinとは

MixinとはいろんなCSSのプロパティをセットにしたもので、クラスを作る時などにincludeして使い回すことが出来ます。

定義されたMixinの解説

embos-box??

もともとembosとは以下のような意味があるそうです。

〔模様・図案を〕浮き出しにする

boxは中にbox-shadowの記述があるのでおそらくbox-shadowの短縮系であることは間違いないでしょう。
borderbox-shadowを併用することで上の図のように、浮かび上がるような線をつくることが出来るみたいです。
逆にこれを利用することで凹んだ線をつくることもできます。
詳しくは以下を参考にしてください
ズルいデザインテクニック2013 + セミフラット version

ts-000?

ts-000はtext-shadowの記述があるのでtext-shadowの短縮系でつかっているのでしょう。
ハイフン以下の000はrgbの000であると見て間違いなさそうです。
つまり、ts-000は黒のテキストシャドウを透明度を指定して設定できるMixinのようですね。

gradient-top-lighten??

このMixinは僕が解説するまでもありませんが、ある色を指定したら、要素の上部にかけて徐々に明るくなるMixinのようですね。明るさの割合も%指定出来るみたいです。便利ですね.

残りは、buttonというMixinをつくってそれらを@includeしているみたいですね。
みなさんもぜひ便利なMixinを使って友人に自慢しましょう


a-blog cms 2.1のメディアユニットを使ってみよう



みなさん。a-blog cmsでメディア管理が出来るようになったのをご存知ですか??
これは非常に便利です。
では今回はメディア管理の使い方について解説していきたいと思います。


「a-blog cms 2.1のメディアユニットを使ってみよう」の続きを読む

CSSでペジネーションを作ろう


ulとliを使っての実装してみよう

今回は上のようなペジネーションの作り方を解説します
liには自動的に●がついてしまうので、まずlist-style-type:noneで●を外さなければなりません。
次にページリストを中央配置したいのでulにtext-align:centerを指定します。
そのときにliは初期値としてdisplay:list-itemとなっていますのでこれをdisplay:inline-blockに変えます。
inline-blockはレゴブロックような物だと捉えたらわかりやすいかもしれません。
このサイトに詳しい解説があります。
http://taneppa.net/display-inline-block/


横に並んでいく
幅 width と高さ height が指定できる
上下左右に margin を指定できる
上下左右に padding を指定できる
text-align を親ブロックに付けることで指定できる。
vertical-align が指定できる。

装飾をしよう

最後は装飾をすれば終わりです。
ホバー時に色を反転させても良いですね。
その際はセレクタに:hoverを追記してあげることでホバー時のスタイルを変更することが出来ます。

最後にペジネーションのサンプルを下に載せます。

.pagenation {
     clear:both;
     position:relative;
     text-align:center;
     margin: 40px auto 40px;
}

.pagenation li {
     cursor:pointer;
     list-style: none;
     display:inline-block;
     border-radius:0;
     border: 1px solid #ddd;
     width:57px;
}

.pagenation li:hover{
     color:#333333;
     background-color: #FFFFFF;
}

実行結果

http://horicdesign.com/sample/pagenation.html

ありがとうございました。


a-blog cms 2.1もリリースされたところだし、WordPressとの比較記事を書いてみよう


こんにちは、a-blog cms 2.1がリリースされましたね。
a-blog cms 2.1
今回はapplepleに入社して20日の僕が、
a-blog cmsの原点に振り返ってWordPressとの記述方法の違いに着目しながら4つの項目に関して話を進めさせて頂きたいと思っています。

  • 外部テンプレートファイルをインクルードする
  • あるカテゴリーで絞り込んで記事一覧を表示
  • コンタクトフォームを作成
  • 独自に定義が出来るカスタムフィールドを作成

「a-blog cms 2.1もリリースされたところだし、WordPressとの比較記事を書いてみよう」の続きを読む

Frontrend in Nagoyaに参加してきました


フロントレンド名古屋に参加してきました。
部品をCSSやJSごとカプセル化して共通して使えるようにするWebコンポーネントの話がすごく興味を惹きました。
それと同時に、今回のイベントで複数人でCSSを管理する場合のコードの書き方や運営方法などを
改めて考えなければならないなと感じさせられました。
というのも自分の書くCSSがあまりにもfragile(脆弱)なので、自分のコードを知らない人が
コードを付け加えたり、HTMLの構造を変えたりすると簡単に設定していたレイアウトが崩れてしまったりするからです。
ですからまず、自分のよくないCSSの書き方を直すこと。
さらにCSS自体を構造化して他の人によみやすいコードを書こうと思いました。


「Frontrend in Nagoyaに参加してきました」の続きを読む

堀 悟大

有限会社アップルップル マークアップエンジニア。2014年高知大学理学部卒業。学生時代にHTML5のCanvas要素を使ってゲームを作っていたことでWeb全般に興味をもつ。アップルップル入社後はa-blog cmsを便利に使うための機能の実装や、HTML5の技術を使ったデジタルサイネージの実装を行う。趣味は英語。読むことも話すことも好き。

エントリーリスト

カテゴリーリスト

タグクラウド