忍者ブログ
管理人・颯来の近況や、オススメのものを紹介! イラスト中心サイト→http://sora9.web.fc2.com/
×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

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

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


分類項目
構成htmlhtmljade
コンテンツ情報htmljson
テンプレートhtml+javascriptjade
デザインcsscsssass, compass
フレームワーク
(レスポンシブデザイン)
非対応Foundation→追加調整(*1)
フレームワーク
(デザイン)
css(Foundation)bootstrap
ファイル分割コンテンツの種類単位SMACSS(風)
jqueryjquery1.xjquery2.x
lightboxprettyPhotofancybox
自動化-gruntgulp
+αは、試してみたいもの。

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テンプレートエンジン


人気ブログランキングへ PINGOO!カテゴリイラスト・写真
PR
→ Comment
name title
url mail
comment                                  Vodafone絵文字 i-mode絵文字 Ezweb絵文字
color pass
848  847  846  845  844  843  842  841  840  839  838 
プロフィール
名前:颯来(そら)
自作イラストを載せています。
オリジナルイラスト中心。
ファンタジー系多め
…more
HP:Jumble Junk
手書きブログ pixiv
ついった(近況報告)
ブログ内カウンター
ランキング
人気ブログランキングへ にほんブログ村 イラストブログ オリジナルイラストへ PINGOO!カテゴリイラスト・写真
アーカイブ
これ以前のアーカイブ一覧
ブログ内検索
カレンダー
02 2024/03 04
S M T W T F S
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31
Admin / Write
忍者ブログ [PR]
Related Posts Plugin for WordPress, Blogger...