CodaにSass導入してCSS3のflexboxでメニューつくってみた

普段Codaを使用しているのですが、
このたびZen-codingとSassのプラグインを導入しました。

zen-codingの記法便利ですねー。
Sassの変数素敵ですー。(使いこなせてないけど)

先達の記事を読んでいるとグリッドレイアウトやレスポンシブなレイアウトを書く時も
percentage関数があってステキよ なんて書いてあります。

慣れはじめたばかりなので、関数やら演算やらを使ったことは出来てないんですけど、
面白そうだなー って、使用例をよく見てます。

今回は Sassの記法に慣れるために、いつぞや書いたflexboxでメニュー、を触ってみました。

出来たのがこれ
http://sejiijes.minibird.jp/sample/130806/sample.html

flexboxはグローバルメニューとフッター要素に適用してみました。

chrome,safari,firefoxでしか確認してません。∟(‘ω’)」
safariだとflexboxが内包してる要素のセンタリングがされてないですねー
書き方が悪いのかなぁ
単に対応してないだけ?

<以下コード>

Sassで書いてみたのがこちら

[Crayon]

//***************************************************************************
//mixin
//***************************************************************************

@mixin rounded-corners { /*rounded-corner*/
$rounded-corner-radius: 4px;
-webkit-border-radius: $rounded-corner-radius;
-moz-border-radius: $rounded-corner-radius;
-ms-border-radius: $rounded-corner-radius;
border-radius: $rounded-corner-radius;
}

/****************************************************************************
wrapper
****************************************************************************/
div#wrap {
margin: 0 auto;
padding: 0;
width: 900px;
border: blue 1px solid;
}

/****************************************************************************
bgImage
****************************************************************************/

/****************************************************************************
logo
****************************************************************************/
div#logo {
margin: 10px auto;
width: 300px;
height: 60px;
border: 1px solid #000;
}

/****************************************************************************
hImage
****************************************************************************/
div#hImage {
margin: 10px auto;
width: 880px;
height: 120px;
border: 1px solid #000;
}

/****************************************************************************
grobal menu
****************************************************************************/
nav {
margin: 0;
padding: 0;
ul#menuContainer {
margin: 0 auto;
padding: 0;
width: 880px;
display: -moz-box;
display: -webkit-box;
display: -ms-box;
display: -webkit-flex;
display: flex;
-moz-box-pack: justify;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
-webkit-justify-content: center;
justify-content: center;
li.menuButton {
list-style: none;
margin: 0 1px 0 0;
width: 160px;
&:last-child {
margin: 0;
}
a {
display: block;
text-align: center;
padding: 16px 0;
background-color: #ff7657;
text-decoration: none;
color: #000;
@include rounded-corners;
&:link {
color: #fff;
}
&:hover {
background-color: #aaa;
text-decoration: none;
font-weight: bold;
color: #fff;
transition: all 0.5s ease;
}
}
}
}
}
/****************************************************************************
content
****************************************************************************/
div#content {
padding: 10px;
margin-bottom: 10px;
}
/****************************************************************************
sidebar
****************************************************************************/
div#sidebar {
border: 1px solid black;
width: 215px;
height: 600px;
float: left;
}

/****************************************************************************
main
****************************************************************************/
div#main {
border: 1px solid black;
width: 650px;
height: 600px;
float: right;
}

/****************************************************************************
footer
****************************************************************************/
footer {
div#fMenuContainer {
clear: both;
margin: 0 auto;
padding: 10px;
display: -moz-box;
display: -webkit-box;
display: -ms-box;
display: -webkit-flex;
display: flex;
-moz-box-pack: justify;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
-webkit-justify-content: center;
justify-content: center;
div.fMenu {
padding: 10px;
border: 1px solid #000;
width: 200px;
margin: 0 10px 0 0;
&:last-child {
margin: 0;
}
}
}
}
[/Crayon]

CSSではこんな感じになってました

[Crayon]
/****************************************************************************
wrapper
****************************************************************************/
div#wrap {
margin: 0 auto;
padding: 0;
width: 900px;
border: blue 1px solid; }

/****************************************************************************
bgImage
****************************************************************************/
/****************************************************************************
logo
****************************************************************************/
div#logo {
margin: 10px auto;
width: 300px;
height: 60px;
border: 1px solid #000; }

/****************************************************************************
hImage
****************************************************************************/
div#hImage {
margin: 10px auto;
width: 880px;
height: 120px;
border: 1px solid #000; }

/****************************************************************************
grobal menu
****************************************************************************/
nav {
margin: 0;
padding: 0; }
nav ul#menuContainer {
margin: 0 auto;
padding: 0;
width: 880px;
display: -moz-box;
display: -webkit-box;
display: -ms-box;
display: -webkit-flex;
display: flex;
-moz-box-pack: justify;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
-webkit-justify-content: center;
justify-content: center; }
nav ul#menuContainer li.menuButton {
list-style: none;
margin: 0 1px 0 0;
width: 160px; }
nav ul#menuContainer li.menuButton:last-child {
margin: 0; }
nav ul#menuContainer li.menuButton a {
display: block;
text-align: center;
padding: 16px 0;
background-color: #ff7657;
text-decoration: none;
color: #000;
/*rounded-corner*/
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
border-radius: 4px; }
nav ul#menuContainer li.menuButton a:link {
color: #fff; }
nav ul#menuContainer li.menuButton a:hover {
background-color: #aaa;
text-decoration: none;
font-weight: bold;
color: #fff;
transition: all 0.5s ease; }

/****************************************************************************
content
****************************************************************************/
div#content {
padding: 10px;
margin-bottom: 10px; }

/****************************************************************************
sidebar
****************************************************************************/
div#sidebar {
border: 1px solid black;
width: 215px;
height: 600px;
float: left; }

/****************************************************************************
main
****************************************************************************/
div#main {
border: 1px solid black;
width: 650px;
height: 600px;
float: right; }

/****************************************************************************
footer
****************************************************************************/
footer div#fMenuContainer {
clear: both;
margin: 0 auto;
padding: 10px;
display: -moz-box;
display: -webkit-box;
display: -ms-box;
display: -webkit-flex;
display: flex;
-moz-box-pack: justify;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
-webkit-justify-content: center;
justify-content: center; }
footer div#fMenuContainer div.fMenu {
padding: 10px;
border: 1px solid #000;
width: 200px;
margin: 0 10px 0 0; }
footer div#fMenuContainer div.fMenu:last-child {
margin: 0; }
[/Crayon]

書き方の選択肢が増えると楽しいですね!

投稿者:

sejiijes

SEとWEBとデザインと事務処理に戯れる田舎会社員。

コメントを残す

メールアドレスが公開されることはありません。