Webサイト作りました(その2)。

f:id:rio_t:20151203001659p:plain

http://riotc.pya.jp/index.html

 

つくりました。テスト中です。

 

 

Coda2の導入

f:id:rio_t:20151203002710p:plain

https://panic.com/jp/coda/

 

前回書いたとおりライセンスを購入しました。CotEditorと比較して良い部分は、

  • サジェスト機能
  • 画像をドラックアンドドロップで挿入可
  • FTP/サイト管理などが可能

といった部分です。3番目は管理するサイトが増えていくとより便利になりそうな機能です。

 

 

blocsの導入

少し前に話題になったMacApp「blocs」を使っています。Bootstrap3をベースにコードを書かずにデザインができる優れものです。視覚的に要素を配置できるので非常に楽ですし、時間も短縮できます。今回はblocsで大まかなデザインを決めて、Coda2で細かい部分を手直し→アップロードしています。

Bootstrapを使用しているので、自動的にレスポンシブデザインとなります。iMaciPad mini 4、iPhone6sで確認しています。

 

 

favicon作成

f:id:rio_t:20151203003628p:plain

MacOSXシェルスクリプトだけでファビコン(Favicon)の全サイズを生成しicoファイルも出力する - Qiita

綺麗なfavicon(ファビコン)作成の基本的なコツ・アイデアまとめ | 株式会社LIG

 

前回放置になっていたfaviconも作成してみました。最近はPNGfaviconとして使えるということ、デバイスが増えたことでfaviconサイズも多様化しているということを初めて知りました。

とりあえずは16✕16でICOファイルを使用しています。

 

 

ロゴ第2弾

f:id:rio_t:20151203004319p:plain

自分がロゴを作る時に意識してるポイント

アルファベットを使ってロゴを作るときの10のTips | DesignWalker

ロゴデザインのギャラリーサイト11選+記事8選|ferret [フェレット]

 

前回に引き続きPixelmatorで。faviconもPixelmatorで作っています。

TとRの縦棒を組み合わせ、その他はスピード感を出せるようなパーツを配置したつもり…です。前回もそうでしたが、既存の図形の組み合わせになってしまってよくない気がしますが、どうしていいものやら…。

 

 

CSSでのアニメーション

f:id:rio_t:20151203005159p:plain

blocsの機能でCSSによるアニメーションを入れています。レンズの画像の部分でアニメーションを適用していますが、画像の容量には気をつけておきたいところです。

容量を削る際に、Retinaディスプレイのような高解像度モニタも考慮し、横600pxくらいは確保しておくとよいみたいです。

 

 

CSSで指定したリンクテキスト色が変わらないアレ

初歩の初歩みたいなところでしっかり躓きました。

 

 

 

残りのページは順次追加したいと思います。