2016年10月25日火曜日

前回の質問 [外部CSSファイルとは？]


※要注意※
「HTML１枚につきCSS１枚」にすると、
　CSSを外部ファイルにする意味がありません。
　(テンプレートにならない。テンプレートとはひな型のことです。web用の専門語ではありません。)
　　ひな型とは定型書式のこと http://www.724685.com/word/wd121219.htm

外部ファイルのCSSは、
いくつものHTMLで同じデザインのパーツを使用するためのものです。

例えば華やかなこだわったデザインのフッターを作成したとします、
例：

カッコイイ＆お洒落なwebサイトのフッターデザイン例23

http://inulab.com/9941/

これを全てのページに全て同じように表示するには
大昔(CSS登場以前)は、
全てのHTMLコードをコピーして全てのページに同じようにペーストしていました。

そうすると、困ったことが起きます。

footerのデザインを一部変更した時
すでに100ページのHTMLファイルでサイトが作成されていた場合、
100ページのfooterを全てコピペし直すことになります。

そこで、これを一発で簡単に変えることができるようになったのが外部CSSファイルです。


外部CSSファイル1枚の指定を変更すると、100ページのfooterが同じように変更されます。







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

2016年10月21日金曜日

前回出た質問

画面の真ん中に表示したい

・左右の真ん中表示 　

実動のサンプル
 HTML 

 <div class="main">
<div>
<h2>ブロックレベル要素をセンタリング</h2>
<p>ブロックレベル要素</p>
</div>
</div>


 CSS  
.main {width: 100%;
　　　border: 1px solid #000;}
.main div {
width: 80%; /* 一つ外の箱の横幅を100%とする時のこの枠の横幅 */
border: 1px solid #FF0000; /* わかりやすくするために枠色を赤くする */
margin: 0 auto; /* 中央揃えのコードは上下0 左右auto */
}



・上下の真ん中表示
 HTML 
<div class="parent"> <p class="child">天地左右の中央に配置</p> </div>
CSS
 .parent {   position: relative; } 
.child {   position: absolute;  
　　　　 top: 50%;   left: 50%;  
　　　　 -webkit-transform: translate(-50%, -50%); /* Safari用 */   
　　　　 transform: translate(-50%, -50%); } 

この上下の真ん中表示の方法は周りの箱の構成によって
上記のような書き方が不可能な場合他の方法も存在します。
↓
参考






表のデザイン
(テーブルレイアウト)
https://liginc.co.jp/web/html-css/html/86739



table専門の参考ページ5つ
  • CSS3を使って美しく装飾されたテーブルの作り方｜Webpark
    http://weboook.blog22.fc2.com/blog-entry-329.html
    CSS3でのtableの作り方を、見た目とソースから解説してあります。
  • Tableのデザインまとめ | DesignWalker
    http://www.designwalker.com/2009/01/table.html
    日本はもちろん海外のtable専門サイトなども紹介されていて、見応え十分です。
  • テーブル｜CSSデザイン｜スタイルシート（CSS）｜PHP & JavaScript Room
    http://phpjavascriptroom.com/?t=css&p=cssdesign_table
    使いやすいtableのサンプル画像と設置用のソースがあってとても親切です。
  • TABLE（テーブル）のデザイン・CSSの参考になるサイト・記事をまとめてみた[シンプルからかっこいい系] ・ 気になる備忘録
    http://peacepopo.net/blog-entry-122.html
    CSSテクニック系・角丸テーブル系・海外系など、カテゴライズされていて便利です。
  • レスポンシブWebデザインでテーブルを使う時の小技 │ Design Spice
    http://design-spice.com/2012/11/01/responsive-table/
    この時代だからこそ、押さえておきたい！
    タブレットやスマートフォンなどに対応する技が紹介されています。


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

2016年10月18日火曜日

bxsliderを使いたい

bxsliderを使いたい

公式サイト　http://bxslider.com/

画面右上のDownloadボタンを押す↓




ダウンロードされるデータのうち
jquery.bxslider.min.jsをjsというフォルダを作って自分のサイトのフォルダの一番上の階層にいれる
jquery.bxslider.cssをlibというフォルダを自分のサイトのフォルダの一番上の階層に作っていれる




Step1のコードをhead内にコピーペーストする

 Step2のコードをbody内の表示したい場所にコピーペーストし、画像名を自分の画像の名前に変える。自分のサイトのフォルダの一番上の階層にimageというフォルダを作成してその中に使う画像を入れる

 Step3のコードを<script>〜</script>の間に入れて
</body>の直前にコピーペーストする。



画面最下部のリンクの左側をクリックすると、動いているサンプルが19種類見られます

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

footerを画面の下に固定したい

footerを画面の下に固定したい

本文が短いとfooterが画面の最下部に固定表示されない場合が有ります。
footerが各ページによって上下してしまうと、
テンプレートが機能していないように見えます。
footerを画面最下部に固定する方法は
下記のサイトに紹介されています。

[CSS]フッタの表示をコンテンツ量が少ない時は最下部に固定、
多い時は成り行きにするシンプルなテクニック
http://coliss.com/articles/build-websites/operation/css/css-simple-sticky-footer-by-melissa.html

隙間を埋める！フッターをウィンドウ下部に固定する3つの方法
https://liginc.co.jp/designer/archives/6435

フッターを常に最下部（一番下）に表示する２つの方法 【css or jQuery】
https://webkikaku.co.jp/blog/htmlcss/footer-bottom/
投稿者 時刻: 0 件のコメント:

2016年10月14日金曜日

10/14板書










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

10月14日授業内容---現在進行中の作業まとめ

１０月
(10)10/04火　外部ツールの実装／SNSや配布パーツをサイトに表示させる。
↑ここまで予定通りの授業内容
---------------------------
↓ここから止まっています
(11)10/07金 jQueryを組み込む1-1---練習 : lightbox 仕組みの把握
(12)10/11火 jQueryを組み込む1-2---練習 : lightbox 実作業
(13)10/14金 jQueryを組み込む2-1---自分のサイトの表現にあったjQueryを探す 仕組みの把握
(14)10/18火 jQueryを組み込む2-2---自分のサイトの表現にあったjQueryを探す 実作業

(15)10/21金 jQueryを組み込む2-2---自分のサイトの表現にあったjQueryを探す 実作業
(16)10/25火 自分のサイト構成を再確認(フローチャートの数値を詳細に書き改める)　※フローチャートの提出2
(17)10/28金　WEB用のフリー素材の探し方(商用利用可のデータを探す)

↑
本来の予定ではjQueryのlightboxを完成したオリジナルテンプレートに埋め込み終えて、
自分の使ってみたいjQueryを探して使ってみる作業に入っているところですが、
オリジナルテンプレートが完成している人が少ないため、
まずオリジナルテンプレートを完成させる作業を行っているところです。




1 フローチャートを描く  → →→　info@cid.jp.netにメールに添付して提出


2 メニューボタン部分を動くように設置してみる

3テンプレートを決める→テンプレート内に2のメニューを組み込んでみる
　　　　　　　　　　　　　　　→具体的なやり方http://cid2016web.blogspot.jp/p/blog-page_14.html

4 WEBサイトの仮組をして、見た目のデザインをバランス良く仕上げる　
　　　　　　　　　　　自分の過去作品を使ってバナーやロゴを完成させる
イラストレータ上でデータを作成して、自分が完成したいサイトの部品を作る。



Dreamweaverの使い方や
コードの意味がわからないため作業の手が止まっている人は
(17)の作業「WEB用のフリー素材探し」を先に行ってください。
　　そして、WEBサイトの仮組みをWEBデータではなくイラストレータ上に行ってください。





(17) WEB用のフリー素材の探し方

[WEB用のフリー素材の探し方]
web free フリー素材　などで検索して、素材集配布のサイトを見つけ、
そのサイト内を検索する。
(検索エンジンの画像検索などでフリーではない画像を勝手に取って来て使わないこと)

WEBデザイン用フリー素材まとめのまとめ
（素材探しがめんどくさい人向け ...


素材屋・HP素材のおすそわけ。
著作権フリーのweb素材屋


WEBデザイナーが作った超シンプル素材集 

フリー素材「blue-green」 - シンプルかわいいWEB用フリー素材 ...




※要注意※
パクってはいけません。
無料配布されているものを商用利用してください。



昨年授業で取り上げたBLOGの紹介から
>>(※)内は追記他はBLOGからの引用文

アマゾンでベストセラー１位になっている、「社内プレゼンの資料作成術」（前田鎌利著、ダイヤモンド社）。プレゼン資料の作り方ノウハウの中身は、実に素晴らしい内容なのだが、ここでも堂々と無断でネットから、画像を使うことが何の罪意識もなく、普通に書かれている。

本書P117～P119には、社内プレゼン資料に掲載する写真は、Googleの画像検索を使えばいい。かつ見栄えのいい写真を使うため、高画質の画像を検索すればいい、といった内容が書かれている。


ただ引用元を明記すべしとも、撮影主に許諾をとりましょうとも、フリーの画像だけ使いましょうとも、どこにも書いていない。(※本来は書かなければ行けない。この本の欠陥的部分)
多分この本は社内資料の作り方本なので、社内資料だったら、ネットの画像は、無断で勝手に使っても、
法律的には問題にならないという、法律的には問題にならないという、スタンス(※公的資料では問題になる)なのだろうが、

一言も著作権についての配慮がないのは、佐野氏に限った話ではなく、今の多くの一般人にとって、ネット画像は検索して、そこから拾ってくればいいというのが、当たり前になっているからではないか。
いやいやネットにある画像を、勝手に使っちゃダメだから。(※本来は社内資料でも問題になるものだがグレーゾーン扱いになっている)許諾をとらないまでも、せめて引用元を載せないと。
でも多くの一般の人には、無料に勝手に使っていい、フリー素材サイトにある写真と、Googleの画像検索で出てきた、写真との区別はわからないのではないか。ネットにある写真は自由に使っていいと、思い込んでいる人多数ではないのか。(※この認識では一般人の何も知らない人と同じ。デザインの専門として学んだ皆さんはネットから勝手に画像をパクってはいけません)
投稿者 時刻: 0 件のコメント:

2016年10月7日金曜日

10/7の授業内容 まとめ

10/7の授業内容

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

jQueryを組み込む1-1---練習 : lightbox 仕組みの把握

(11)10/07金 jQueryを組み込む1-1---練習 : lightbox 仕組みの把握


jQueryとは？
jQueryとは、John Resig（ジョン・レッシグ）氏によって開発／公開されたJavaScript用のライブラリです。2006年8月に最初のバージョンをリリースして以来、着実にバージョンアップを重ね、2013年11月時点での最新版は、1系はVer.1.10.2、2系は、Ver.2.0.3です。 ライセンスは、MIT Licenseとなっており、ライブラリの著作権表示を消さなければ、商用・非商用を問わず、誰でも自由に利用することができます。

要するに使わないとどうなるの？

jQueryのようなJavaScript用ライブラリを使わない場合、自分で素のJavaScriptで記述し、更に各ブラウザごとの違いも自分で対応させなければ行けません（どちらも煩雑な作業を伴います）。
jQueryを使えば、主要なブラウザに、簡単な方法で対応させることができます。特に、現在のVer.1系の最新版でもIE6にも対応している点は見逃せません。


多くのjQueryでたどるだいたい同じ手順
　まずダウンロードする。 

 → ダウンロードしたもののうち、　必要なフォルダやファイルだけをサーバの必要な場所にアップロードする。　　※アップロードする場所を間違えると動かない 

 → jQueryを表示するhtmlのhead内に<link rel="~で 始まるコードをコピーペーストし、アップロードしたファイルとhtmlが連動できるようにする　　※コピーペーストするコードと自分がアップロードしたデータの場所の関係がわかっていないとコピペしても動かない
  
→ そのjQueryでコードが指定されている<script src=" 〜 "></script>のコードをbody内の表示場所にコピーペーストして埋め込む　　※どこからどこがなんのboxかコードを見てわかっていないと正しい場所に埋め込めない 
 → そのjQueryの機能のうち自分が使いたいオプション機能を実装できるようにコードを追加してカスタマイズする。　　※それぞれのjQuery用のclassやidに当たるようなもの(例えばlight-boxではdata-lightbox="~")を指定するので、まず最低限としてclassやidの使い方がわかっていないとカスタマイズが出来ない。




jQueryを組み込む(例: lightbox)


lightboxの設置の仕方(↓元記事)

http://www.chamanet.com/lightbox/
(※英文の説明自体が一部間違っているので、本ページの説明を読んで編集してください)

画像紹介を多く扱うサイトの作成


画像を多く紹介するサイト作成には、htmlページを大量に作成(複製)するか、
元画像そのものを呼び出して表示できるjqueryを使うか
photoshopの自動処理のwebフォトギャラリー機能を使って作成すると効率が良い。
(jquery=高度なcssとjavascriptを使いやすく改良した配布セット[キット]のようなもの)

lightbox
[公式サイト 英字サイト]
(※英文の説明自体が一部間違っているので、本ページの説明を読んで編集してください)
日本語サイト(※説明が古いので、本ページの説明を読んで編集してください)
http://www.chamanet.com/lightbox/ 




Lightbox導入方法

Lightboxの導入方法とサンプルのダウンロード
簡単にLightboxに対応出来ます。




Lightboxのサンプル
サンプルページサンプルページの写真をクリックすると
Lightboxが起動します。
サンプルページのHTMLコード


Lightbox導入方法
１．ダウンロードLightBoxサイトからLightboxをダウンロードして下さい。
ダウンロードはこちら
２．ZIPファイルを解凍LHACA、LHASAなどで解凍して下さい。
解凍するとdistというフォルダの中に
「css」「images」「js」が作成されます。



３．サーバーに転送Lightboxに対応させたいページ(例えばgallery.html)があるフォルダと同じフォルダ内に「css」「images」「js」を転送します
転送後、ディレクトリ構造はこのようになります。

index.html  ←Lightboxに対応させたいページのばあい





※　解凍した「images」の中のデータは不要です
４．HTMLタグの編集Lightboxに対応させたいページのHTMLタグを編集します。

<head>〜</head>内に を挿入します。

</body>の直前の行に
を挿入します。
※公式サイトの説明にはhead内に入れるとありますが、head内では動きません。
※公式サイトの説明にはlightbox.jsやlightbox.min.jsを入れると書いてありますが、この２つのファイルはそれだけでは動きません。
lightbox-plus-jquery.jsをbody内に書かないと動きません。


各写真のHTMLタグを下記のように修正します。

グループ名は「aiueo」や「abc」など自由な半角英字で指定します。

サムネール画像クリックでlightbox出現 　文字クリックでlightbox出現 






















PhotoshopのWEBフォトギャラリーの機能を使う



(↓使い方の紹介サイト)※CS6のphotoshopではこの機能がなくなりました














投稿者



時刻:





1 件のコメント:
  


































        

      









登録:
コメント (Atom)