WEBの授業スケジュール再確認と質問の出た前例のサンプルやデータ

１１月
(20)11/08火 質問の出た前例のサンプルやデータ
(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金　仕上げ作業 ※最終のアップロードは忍者サーバへ　





質問の出た前例のサンプルやデータ

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

web用に保存で色がおかしくなるときの対処法

A.
web用に保存の画面で
sRGBに変換の項目にチェックを入れる

それでもなおらない場合

B
http://noir.mods.jp/web/?p=10

1.画像をphotoshopで開いて、
2.編集→プロファイルの変換を選ぶ
3.sRGBで始まる項目を選択
 (ここがCMYK関連やAdobe RGBになっていると色がおかしくなる)
4.その後web用に変換をする



自動処理で画像を大量に同サイズにWEB用に保存する方法

自動処理／アクション機能・バッチ処理

http://cid2016web.blogspot.jp/p/blog-page_8.html


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

 paddingとmarginの違い 

把握しよう！！paddingとmarginの違い

マージン(margin)をつかったほうが良い場合

borderの外側にスペースが必要な場合。
スペースに背景色(画像)を適用したくない場合。
上下に隣接したボックスにスペースを設ける場合、
マージンの相殺を期待して、大きいサイズを有効にしたい場合。
例：15px + 20px の場合、スペースは20px。
※ブラウザによって相殺されない場合もあります。

パディング(padding)をつかったほうが良い場合

borderの内側にスペースが必要な場合。
スペースに背景色(画像)を適用したい場合。
上下に隣接したボックスにスペースを設ける場合、
上下に指定した合計の値を有効にしたい場合。
例：15px + 20px の場合、スペースは35px。

ブラウザによる問題

IE5.x, 6では、float指定したボックスにマージンを指定すると、
左側が指定された値の2倍のマージンになってしまう場合があります。
その場合、「padding」を使用したり、ボックスに
「display:inline;」を指定することにより回避できます。

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

【おまけ】忍者ホームページの広告を目立たなくする方法

以下のcssをhead内または外部cssファイルにコピペする

.tdftad li {float:left;font-size: 8px;list-style-type: none;margin-left:10px;}
.tdftad li a {color:#fff;}
.tdftad {border-top:solid 1px #ddd;padding-top: 8px;}


以下解説---------------------------------------------------------------------

float:left;　＝広告を横並びにする
font-size: 8px;　＝文字の大きさを8pxにする
list-style-type: none;　＝リスト表示(li)の前のマーク(・)を表示しない
margin-left:10px;　＝各リストの左側に10pxの余白を作る

.tdftad li a {color:#fff;}　=　広告内の文字のリンクを白にする

.tdftad {border-top:solid 1px #ddd;padding-top: 8px;}
＝広告の上に8pxのスキマとグレーの線をひく
-----------------------------------------------------------------------------------------------------------

[jQuery サンプル]　

自分のサイトでこんなのがやってみたい

メニューにサブカテゴリを表示する サンプル
　作り方↓
http://ri-mode.com/rainbow/2014/06/11/simple_css_dropdown_menu/


画像が何枚か切り替わるバナー　jQuery 　

「bxSlider」
サンプル
http://wp-and.me/bxslider/


画像がスクロール表示で数枚表示されるバナー　jQuery
「slider.js」
サンプル
http://kaelab.ranadesign.com/blog/2010/10/jquery.html