ホームページ（のソース）を更新したよ

8/16に、ホームページのソースを更新しました。
コンテンツ的には変わりはないのですが＾＾；

以下、変更点をまとめます。

分類	項目	旧	新	+α
構成	html	html	jade
	コンテンツ情報	html	json
	テンプレート	html+javascript	jade
デザイン	css	css	sass, compass
	フレームワーク （レスポンシブデザイン）	非対応	Foundation	→追加調整(*1)
	フレームワーク （デザイン）	css	（Foundation）	bootstrap
	ファイル分割	コンテンツの種類単位	SMACSS（風）
	jquery	jquery1.x	jquery2.x
	lightbox	prettyPhoto	fancybox
自動化		-	grunt	gulp

+αは、試してみたいもの。

jadeは大活躍。
htmlのテンプレート化と、
コンテンツはjsonで設定したものを読み込んで、mixinなどで展開
これで、共通メニューとかコンテンツ追加とか楽になった。
アクセス解析などの部品や、構成要素を分割して、includeすることで、管理もしやすくなった。


cssは、sass,Foundationなど利用してみたが、活用しきっていない感。
レスポンシブデザインのデザインを利用したけど、デフォルトのサンプルを利用したからか、スマホから見ると自動でスマホの幅にならないなど、追加調整が必要みたい。(*1)
メニューやボタンなどのデザインも利用してみたいけど、基本設定できていない。デフォルトのまま。これはbootstrapのデザインも使ってみたいな。
jadeは、mixinとか機能を活躍していたけど、sassは、変数とかmixinとかの機能を全然活用していないので、もっと活用して作れるようにしたい。

ファイル分割は、SMACSSを参考にしたので、楽になったかな？
sassはあまり書いていないので、_imports.scssぐらいしか頻繁に更新しなかったけど＾＾；


ちなみに、イラスト表示のlightbox表示は、以前使用していたのがjquery2系に対応していなかったので、変更しました。今度のは、マウスホイールに対応していたり、サムネイル表示に対応したりと、いろいろ良い。
でも、こちらも、スマホなどで見るのは厳しいので、モバイルでの表示方法変更など考えないといけないですね。


jade, sassなどを利用したので自動コンパイルは、gruntを利用しました。
必要最低限の、ファイル監視、コンパイル、コピーぐらいしか利用してないです。
最適化とかも利用したほうが良いかな。。
こちらも、gulpも気になっている。


と、いろいろ書いているのですが、
イラストなど展示だけなら、コンテンツ追加が簡単なのは、ブログとかtumblr利用するとかなんでしょうね。昔、少し検討もしてました。
なので、もはや、上記のような技術を使ってのwebページ作成の実験という意味合いも強いかもしれません。



（追記 *1）
viewportの設定してなかっただけでした。

<meta name="viewport" content="width=device-width, initial-scale=1">

---

参考
Jadeについて
10分でわかるjadeテンプレートエンジン

web系やりたいことメモ。

新たにお勉強環境構築中。

sublime text導入
github連携
　　→間接だけど済

以下の物を使って、自分用テンプレートを作成してお勉強。
　sass
　compass
　　　→ここまで、済(2/8)
　Foundation
　grunt
　　→ここまで、済(2/26)
　bootstrap

　SMACSS

---

参考：

• Sass+compassをEclipse環境にインストール
• 「Sublime Text」のみでCompassとSass（Scss）を使えるようセッティングしてみたのでその手順と参考にした記事まとめ
• SMACSS and Rails A Styleguide for the Asset Pipeline
• メンテナンス性の高いCSSを書く - 読書 - Scalable and modular Architecture for CSS 日本語版

ブログテンプレート構築 -その２-

ブログのテンプレートを変更しました。

HPレイアウトをCSS3に対応しました

HP:Jumble Junk

レイアウトとかをCSS2で作っていたけど、CSS3を勉強してたら、もっと楽に出来る事を知ったので、対応しました。

 #container {
    width: 100%;
    height: 100%;
    min-height: 100%;
    position: relative;
    overflow: hidden;
}

body > #container {
    height: auto;
}

#contents{
    padding-bottom: 40px;
}

#menu_block{
    background-color:#f7f8da;
    width : 200px ;
    float:left;
    padding-bottom: 32768px;
    margin-bottom: -32768px;
}

#contents_block{
    margin-left: 200px;
    padding-bottom: 32768px; 
    margin-bottom: -32768px;
}

↓

 #container {
    height: 100%;
    margin: 0px auto;
}
#contents{
    display:box;
        display:-moz-box; display:-webkit-box;
    box-orient:inline-axis;
    width : 100% ;
}

#menu_block{
    background-color:#f7f8da;
    width : 200px ;
}

#contents_block{
    box-flex:1.0;
        -moz-box-flex:1.0; -webkit-box-flex:1.0;
}

今まで、marginとpaddingを組み合わせたりして、ごちゃごちゃしてたのがすっきり＾＾
prefixがつけないといけないから、まだ完全にスッキリはしてないけど

てことで、見た目としては、全く変わってません＾＾；
ついでに横幅だけ変えたけど
久しぶりに、HP見たら、「6ヶ月以上更新のないページにつく広告」があって少し焦った

次は、ブログのテンプレート！
ちまちま作成中

ブログテンプレート構築 -その１-

結局、自分でブログテンプレートを一から作ってみようと思ってます。
サイトを、シンプルな構成で作ることができたので、ブログもチャレンジ。
ブログテンプレート作成の勉強にもなると思うし。

ただし、、、ど　く　が　く　・・・