スキップしてメイン コンテンツに移動

初のwebデザイン

イメージ
投稿者:
中断をはさみつつ足掛け12年あまりSEやってたが、UIデザインはほとんどノータッチであった。
ひとり事業者になるにあたり、ある程度できるようになりたい、と思っていたら、良い機会に恵まれた。仕事先のwebサイト「2000年頃にホームページビルダーで作りました」状態なのを今っぽくしたい。1日50セッション位、商売に直結してはおらず(それってどうなの、というのはおいといて)、クオリティ許容範囲が広い。

----
よくわからないまま、子どもの寝静まった夜(気力のある日に限り)ウロウロ進んでいる。

・とりあえず bootstrap …今も現役なの？
・sublime というエディタが便利らしい
・ズルいwebデザイン
・sass 、compass 使うべきらしい
・jqueryで共通部分は inblude
・lightbox … colorbox というのがよさそう
・box-shadow やっと理解した
・ノンデザイナーズデザインブック は読んだ。
・bootstrapもsass版があるのか…配色とかnavbarとかいじるなら、それ使うべきなのか…

divの高さを揃えたい！問題にはまること3日、flexbox の存在に気がついた。IE9のサポートはしれっと無視できるから使っちゃおう…。追い追い対応するかも？ということで。

一歩進むと一つ新しいことがわかり、本丸のコーディングが一向に進まない…。

あとはナビゲーションの実装手段。bootstrap, jquery, flexboxベースに自作(というか拾い物)、どれがいいんだろう。

あとcssスプライト。

あとフォント。

あと配色。adobe kooler は使いこなせず cooler ?で適当に選んだ。けど http://www.webcreatorbox.com/tech/web-design-color-scheme/ を参考に見直し要。

あと何があるのかな…。遠目に敬遠してたときより何とかなりそうな感触を得つつあるけど、やっぱり習得課題多いな！様々なフレームワーク等によって10年前と比べられないほど楽になってるけど、その分当たり前水準も上がってるからな。
クロスブラウザとかクロスプラットフォームとか手が回らないよ。ネット頼りに作ってみて、無事を祈り、あまりにひどければ対応する、かも…それでも現状よりひどいことはないはず。

結局、flexbox, bootstrap-sass 両方をsassで書いてcompassでコンパイルすることにした。全部載せ。
Webサーバにのせるモノたちと別のところにsassを置く場合、http_pathとかどうすれば?という疑問の答えをウロウロ探したが↓に助けられた。
http://qiita.com/makoto_kw/items/e6afe3c03abf3d3ff63e
--sass-dirも指定できるのでプロジェクトファイルと出力ファイルを分けることも可能。例えば以下のような感じ。(中略)
デフォルトだと*-dirの値が使われるのでconfig.rb内でhttp_*_pathを指定しておく。
あとこれにも。
http://qiita.com/quno/items/a9ef299ac2b4ae827bee
require 'bootstrap-sass'
(中略)
※先にconfig.rbに追記しないでインストールすると以下のエラーが表示される

とりあえずcompileしようとして Incompatible character encodings と怒られた。
https://github.com/Compass/compass/issues/1825
So the problem seems to be the non-ASCII characters in the path name. I had a ß in there. Renaming the folder fixed it for me.
パスに非ASCIIが含まれるとダメか・・・是非もなくフォルダ名変更。

既存CSSをSASSに変換する方法は

ようやく皆がボール蹴ってる場所に近づいた感。

コメント

コメントを投稿

このブログの人気の投稿

GAS 同一カラムを複数条件でfilterできない件

投稿者:
Google Apps Script でSpreadsheetをデータベース代わりにwebアプリをポチポチ作ってて、スクリプトからSpreadsheetにフィルタかける場合、同一カラムに複数条件を設定できないことを知って残念……。 フィルタのかけ方はこんな感じ。 日付を範囲指定したいけど、After、Before片方しかつけられない。 var dataFile = SpreadsheetApp.openById(DATA_FILE_ID); var sh = dataFile.getSheetByName(LOG_SHEET_NAME); var criteriaDateAfter = SpreadsheetApp.newFilterCriteria().whenDateAfter(new Date(targetDate)).build(); var criteriaUserEqual = SpreadsheetApp.newFilterCriteria().whenTextEqualTo(user.id).build(); if (sh.getFilter()) { sh.getFilter().remove(); } var r = sh.getRange(1, 1, sh.getLastRow(), sh.getLastColumn()) .createFilter() .setColumnFilterCriteria(DATE_COL, criteriaDateAfter) .setColumnFilterCriteria(USER_ID_COL, criteriaUserEqual) .getRange(); FilterCriteriaに2回条件設定してみたり var criteriaDateRange = SpreadsheetApp.newFilterCriteria() .whenDateAfter(new Date(date1)) .whenDateBefore(new Date(date2)).build(); 同じカラムに2回条件設定してみたり var r = sh.getRange(1, 1, sh.get...
コメントを投稿
続きを読む

ジップロックで堆肥づくり

投稿者:
2012/11/02『家庭でできる堆肥づくり百科』を見てビニール袋と生ゴミで堆肥づくりに初挑戦。 ・生ごみ　250ml　(細かく刻む) ・庭の土　120ml ・水　大さじ2 ・アルファルファ粉末　大さじ1 (ウサギのペレットを砕いた) 袋はジップロック大を使用。 毎日揉む(切り返し)、1日おきに空気を入れ替える。4～8週間でできるらしい。 保温のことは書いてなかったけど発砲スチロール箱に入れてみた。うまく行くといいなあ。 2012/11/07 道路掃除の方に落ち葉をもらったので一掴みいれてみる。生ゴミは窒素やや多めらしく、炭素系の落ち葉を足したらいいかなと。 2012/11/12 10日経ってニオイが落ちついてきたかも。腐ってる臭いではないけどツンとする臭いがずっとしてた。発泡スチロール箱を蓋すれば気にならない(ジップロックには全く遮断されないので、袋だけで室内に置くのは避けたい)。材料がネギとミカンなせいかなあ。見た目は一向に変わらず。
コメントを投稿
続きを読む

その4 Excel VBAでAmazon Product Advertising API

投稿者:
引っ越すためついに本気で書籍リストを作っていると、どれほど少しでも省力化したくなり、しつこくバージョンアップ。 ISBNのない外国の本も検索したい ISBNのない本が思ったより多かった。フランス語のアクサンとか入力したくない。ISBNでの検索はamazon.com, amazon.frなど検索先を切り替えているように、タイトル等での検索も各国サイトを利用したい。 最初は「jpで見つからなければcom、見つからなければfr、、、」と思ったけど、だいぶ待たされちゃうし、その本のデータをどこで探したいかは決まってるので、それぞれ別のプロシージャを定義して実行できるようにした。 Public Sub searchBookInfoFromAmazonFr(dummy As Integer) searchBookInfo (amazonFr) End Sub さて、クイックアクセスツールバーに登録するのだけど、用意されてるアイコンじゃわかりづらい。各国の旗がいいんじゃないか。と思ってからが長かった・・・が、まとめれば： 旗アイコンは ここ で入手。 Ribbon Editor でリボンに自前のタブ・ボタンを登録 対象のExcelファイルを開く 右のDocument Explorerペインで「CustomUI Parts」を追加 表示される編集ペインのImageタブを開き、好きな画像を追加(From File System) Codeタブに下記Xmlを書いて保存、終了 Excelを開くとカスタム・ボタンが登録されているので、ふつうにクイックアクセスツールバーにも登録 <customUI xmlns="http://schemas.microsoft.com/office/2009/07/customui"> <ribbon startFromScratch="false"> <tabs> <tab id="customMacro" label="custom macro"> <group id="custo...
9 件のコメント
続きを読む