11/29火 仕上げ作業 SNSやWEBツール等の埋め込み表示完成／授業中に質問が出たCSSの使い方

(21)11/11金 自分のサイトのindex.htmlの作成
(22)11/15火 自分のサイトのメニュー部分の作成  

(23)11/18金　仕上げ作業 テンプレート完成

(24)11/22火　仕上げ作業 メニューと各カテゴリー(コンテンツ)ページの完成 

(25)11/25金　仕上げ作業 jQueryを組み込み完成　

↑ ここまでは完了してない場合、

　急がないと追いつかなくなって完成できなくなってしまいます。

(26)11/29火　仕上げ作業 SNSやWEBツール等の埋め込み表示完成← 今日

１２月
(27)12/02金　仕上げ作業 作品集ページの完成1
(28)12/06火　仕上げ作業 作品集ページの完成2

(29)12/09金　仕上げ作業 ※最終のアップロードは忍者サーバへ

[CSS]背景画像をブラウザいっぱいに表示する

シンプルな最新テクニック







このコードのみでスマホにもパソコンにも対応可能です




body {

  background: url(background-photo.jpg) center center / cover no-repeat fixed;

}

​

http://coliss.com/articles/build-websites/operation/css/

css-responsive-full-background-image-by-sixrevisions.html

※画像を2枚配置する場合
centerのタグが1画面に１つの画像にしか使えないため、
http://www.coolwebwindow.com/csstips/csstechnic/templatelayout/000347.php
↑
もう一つの画像にはこの方法を併用する必要があります。

・背景画像の上に特定の場所に画像をはる

http://2010yoko14145.web.fc2.com/16mail.html

・Tumblrの画像を新着順にサイトに埋め込む

TumblrのAPIを使った方法

ブログのフッター等にjQueryでTumblrに投稿した画像を表示する

http://kachibito.net/web-design/jquery-with-tumblr.html
実動サンプル
http://yoko14145.com/inujima/tumblr.html

jQueryを使った方法

Tumblrの画像ポストを表示するブログパーツ「jQuery blrblrTumblrImage」を設置してみた

http://chips-tips.tumblr.com/post/20198063336/blrblrtumblrimage

実動サンプルhttp://jsdo.it/ethertank/umD5

同じ素材を使っても完成したら伝わる印象が異なる例

自分のサイトの作成も、過去の自分がすでにつくった作品ではあるけれど、
どういう印象でまとめるかによって同じ素材を使っていてもイメージが大きく変わる
という例。

←シリアスな印象

(謎解き・魔女)

明るい楽しい印象

(サーカス・パレード)→

公式サイトの告知チラシ(表)

 (裏)