忍者ブログ
 
 
×

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


人気ブログランキングへ にほんブログ村 イラストブログ オリジナルイラストへ blogram投票ボタン PINGOO!カテゴリイラスト・写真
PR
この記事にコメントする
お名前
タイトル
文字色
メールアドレス
URL
コメント
パスワード   Vodafone絵文字 i-mode絵文字 Ezweb絵文字
管理人・颯来の近況や、オススメのものを紹介! イラスト中心サイト→http://sora9.web.fc2.com/
           
プロフィール
名前:颯来(そら)
自作イラストを載せています。
オリジナルイラスト中心。
ファンタジー系多め
…more
HP:Jumble Junk
手書きブログ pixiv
ついった(近況報告)
フリーエリア
pixiv
instagram
ブログ内ページランキング
ブログ内カウンター
ラクガキ一覧
ブログランキング
アクセス解析
レコメンデーションエンジン track feed jumblejunk颯来ブログ
ランキング
blogram投票ボタン

人気ブログランキングへ にほんブログ村 イラストブログ オリジナルイラストへ PINGOO!カテゴリイラスト・写真
アーカイブ
これ以前のアーカイブ一覧
RSS
ブログ内検索
カレンダー
08 2017/09 10
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
リンク/BlogPeople
++++++++++++++++++++++
忍者ブログ [PR]


Designed by Pepe
Related Posts Plugin for WordPress, Blogger...