2016年11月29日火曜日

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;
}
​
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の画像を新着順にサイトに埋め込む

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




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

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


←シリアスな印象

(謎解き・魔女)



明るい楽しい印象
(サーカス・パレード)→



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

 (裏)




投稿者 時刻: 0 件のコメント:

2016年11月25日金曜日

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

(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金　仕上げ作業 ※最終のアップロードは忍者サーバへ

-------------------------------------------------------

本日までにとにかくjQueryを組み込み完成までの作業を進めましょう

-------------------------------------------------------


例：　button要素のデザインを変えたい

http://html5.cyberlab.info/elements/forms/button-autofocus.html

<button>ボタンに書く文字</button>
すべてオリジナルデザインにできるdivタグではなく、
HTMLタグの一種なので、各ブラウザによって初期デザインが設定されていて、
見た目が変わってしまいます。
これを統一するためには、各ブラウザで設定されているデザインに使われているcssに
オリジナルのcss設定をする必要があります。





サンプル

ボタンのようなデザインが各ブラウザで自動的に
<button>のコードに適用されてしまうので


<style type="text/css"> 
 button {
　　　　 padding: 0;
　　　　 margin:3px;
　　　　 border: none;
 　　　}　        
  button img { display: block; }
 </style>                  

のように「<button>のコードに何もデザインされないようにデザインする」設定
が必要になります。

ボタンのコードを使って自作の画像を入れて動かす場合にも、
何もデザインされていないデザインに変えてから文字の部分に画像コードを入れます。


(音の出る仕組みの解説はこちら


投稿者 時刻: 0 件のコメント:

2016年11月21日月曜日

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

(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金　仕上げ作業 ※最終のアップロードは忍者サーバへ

-------------------------------------------------------

本日までにとにかく

前回までに完成したテンプレートを複製して
各コンテンツのページを作成しましょう！。



-------------------------------------------------------

※要注意※

サーバにつながっているフォルダの中身を
追加や移動したい時にFinderを使わないこと！
Dreamweaverのファイルのウインドウ内で行うこと！

※今まできれいにできていた表示が
　突然できなくなるパターンの８割はこの操作が原因です。


参考：Dreamweaverを手放せない10の理由
http://creator.aainc.co.jp/archives/4224

 ↑このBLOGの記事の「サイトの管理」の項目にある

 サイトの設定をしておくことでディレクトリの変更などの際には
移動させたいファイルをフォルダにドラックすることで
関連したファイルは一括でhtmlのパスを書き換えてくれます。

 ↑とは、どういう意味か
↓つまり
フォルダの移動をしてhtmlコード内のその画像やファイルへのURLがズレて
表示が突然出なくなる状況の時に、
Dreamweaverを使って移動させたいファイルをフォルダにドラックすることで
自動で該当箇所のその画像やファイルへのURLが表示されるように書き換えてくれる。

-------------------------------------------------------

●知っているとカスタマイズがさらに自由になること●

 教科書では、googlemapの提供している地図埋め込みサービスを使ってコードを自動作成し
コピペする方法が紹介れていましたが、
<script async defer type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false&callback=initializeMap"></script>

というスクリプトを使うと、さらにカスタマイズが可能です。

参考1↓

Google Maps JavaScript API v3の使い方まとめ (サンプルコード付き)


参考2↓
参考1はGoogleAPIを取得する必要がありますが、
参考2には取得しなくても使用可能なものもあります。
投稿者 時刻: 0 件のコメント:

2016年11月18日金曜日

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


(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金　仕上げ作業 ※最終のアップロードは忍者サーバへ

-------------------------------------------------------

本日までにとにかく

テンプレートを完成しましょう！




テンプレートの意味が全くわからない場合は、
HTMLテンプレートの最も基本となる
↓のコードをコピペして元として使うこと



-------------------------------------------------------

前回のカテゴリパネルの説明で

詳細な解説を省略したアニメーション(トランジョン)について

わかりやすくまとめてあるサイト↓


CSS3でアニメーション！transitionとanimationまとめ（サンプル付き）

http://www.flapism.jp/html/416/

-------------------------------------------------------
投稿者 時刻: 0 件のコメント:
登録: コメント (Atom)