カテゴリー別アーカイブ: 勉強会

CSS SLIDE PANEL

CSS SLIDE PANEL

2013-10-18 Friday 勉強会の議事録です。

kanedaさんのリクエストで、ショッピングサイト等でみかけるスライドパネルについてやりました。
CSSで実装するパターンとjQueryで実装するパターンをやりました。

タカハシ先生、ありがとうございました。

CSSで実装するパターンを自分のサイトにアップしたので、興味のある方はご覧下さい。
http://nobu-69.com/others.html
「css3 ショッピングサイト等でみかけるスライドパネル 2013/10/23」をクリックして下さい。

jQueryバージョンは、近日中にアップ予定。

アップしました。

working for yourself

みなさん議事録を書くのをいやがる傾向にありますが、書く事により確実に理解度は増すのでとても自分の為になります。もし、議事録を書いている時に分からなくなってしまっても先生がサポートしてくれる(多分)ので心配ありません。WAVE時代にPALを見ながら勉強していて実際に課題制作になったら何も出来なかったという事が多々ありましたよね。そのことからも分かるように、勉強会に出たからといって教わった技術が絶対身に付くとは限りません。

タカハシ先生は、私たちの質問に常に答えてくれます。質問内容が先生の知らない事であれば調べたり調査したりして答えてくれています。先生はよくこんな事を言っています。

「パソコン倶楽部りんごが始まって一番勉強になってるのは私だと思う。」

メンバーの質問に答えたり、議事録を書いたりすることは、もちろん他の人の為でもありますが、実は自分の為に一番なるのですよー。

正しい引用のルール(2)

引用の仕方

正しい引用のルール(1)を参照して、引用を行ってみましょう。
引用部分をBLOCKQUOTEタグなどで囲み、引用であることを明示します。見た目の指定はCSSで設定します。

長文、段落の場合の使用タグ —– BLOCKQUOTE

引用元をURIで示す(blockquote)

<blockquote>タグに cite=”” を追加すると、引用元を示すことができます。
<blockquote cite=”http://www.taglist.com/”></blockquote>

cite=””
引用元がWebサイトの場合 … URLを指定
引用元が書籍の場合 … ISBN(図書コード)を指定

■ 引用元がWebサイトの場合
<blockquote cite=”http://www.taglist.com/”> ~ </blockquote>
■ 引用元が書籍サイトの場合
<blockquote cite=”urn:ISBN:0-0000-0000-0″> ~ </blockquote>

引用元:引用元をURIで示す

短文の場合の使用タグ —– Q

引用元をWEBや書籍を示す場合の使用タグ —– CITE

サイトリニューアルについての注意点(.htaccessと404.html)

お仕事で、あるお店のサイトリニューアルをしました。サーバー・ドメインは昔のままでということで。

そこで1つ問題があり、解決したのでメモしておきます。

【問題となった事】
サーバーはそのままなので、昔のサイトのデータ(色んなフォルダやhtmlやcssファイルなど全部)をサーバー上から削除します。次に新しいサイトのデータ一式をサーバーにアップロードします。初めてサイトにアクセスするユーザーは問題なくリニューアルしたサイトを見る事が出来ます。しかし昔のサイトをブックマークしているユーザーがブックマークをクリックするとどうなるでしょう。サーバーが昔のページを開こうとして、その結果ページが無い事が判明して以下のような画面が表示されます。(ロリポの場合)

ccc

これは、そんページないよ~!というロリポのデフォルトのページです。これでは、困ってしまいますよね。昔からのユーザーに「あれ~、サイトなくなっちゃったの?!」「何かあったのかな?!」と思われてしまいます。指定されたページ(URL)が見つから無い場合、「この度リニューアルしました!新しいサイトはこちらでーす!」と言った感じでリンクを貼ってあるページが表示されると親切&安心ですよね。

2ステップで問題解決!

【①オリジナルのNot Foundページを作る】
404.htmlというファイルを作ります。そこにリンクを貼ったり、リニューアルの説明を載せます。デザインはcssで好きに出来ます。これをサーバーにアップロードします。index.htmlとかがあると思われる一番上の階層に。このファイルは、ユーザーが指定したページが無い場合に表示されるようになります。
【②.htaccess】
404.htmlというファイルを作ってサーバーにアップロードしただけでは、機能しません。「指定されたページ(url)がサーバーになかったら404.htmlを表示する事!」という命令をしなければいけません。テキストエディタで新規ファイルを作成して下さい。名前は「htaccess.txt」で、中身は ErrorDocument 404 /404.html と書きます。それを一番上の階層にアップロードします。アップしたら右クリックでファイルの名前を変更して下さい。
htaccess.txt → .htaccess(.から始まる。拡張子なし。)名前を変更したら属性を「604」にして下さい。これも右クリック。

以上です。

参考サイトhttp://oxynotes.com/?p=159
この他にも、ロリポ404やredirect htaccess で検索するといろいろ出てきますよ。

タカハシ先生、ありがとうございました。

ちなみに制作したサイトはこれです。http://juicyeyes.com/
試しにhttp://juicyeyes.com/boyoboyo.htmlという、ありもしないアドレスを入力すると440.htmlが表示されます。

英語のページで文字があふれた時、単語の途中で改行させる方法

日本語と英語の2ヶ国語のホームページの更新をしていたら、日本語は問題なく表示されるのに、英語のページで文字があふれてしまいました。

原因

日本語の文章は句読点や中点によって、語や文章の区切りを識別しますが、英語などの西洋語は語の区切りに空白を挟んで記述されるので、単語が羅列され空白がないときに文字があふれてしまうことがあります。

単語の途中で改行させる方法

1)word-break: 行の改行方法を指定する(値:break-all)

word-breakプロパティで指定できる値には、normal・keep-all・loose・break-strict・break-allがあります。キーワードによってCJK(ハングル、日本語のカナ、および、CJK表意文字)と非CJKにおける改行制限の厳格さの程度を指定することができます。ちなみに、CJKとは、中国語(Chinese)、日本語(Japanese)、韓国語(Korean)の頭文字をとったものです。

word-break-CSS3リファレンス
初期値はnormalでCJKは厳格に改行制限されるため、日本語はあふれることがありません。

2)word-wrap: 単語の途中で改行するかどうかを指定する(値:break-word)

改行しない文字列が長すぎて行ボックスに収まらないとき、通常は文字列がボックスからはみ出して表示されます。このような場合、word-wrapプロパティの値にbreak-wordを指定すると、単語内で改行してボックスからのオーバーフロー(はみ出し)を防ぐことができます。

word-wrap-CSS3リファレンス

ワープロソフトなどで、行末に長い単語が来るなどして単語を2行に分ける必要が生じたときに行われる、単語の前半と後半をハイフンで繋ぐ機能。主に欧文で使われる機能である。

どこで切ってもよいわけではなく、単語中の音節の区切りでハイフネーションを行うことになっている。また、ハイフネーションを続けて行うと読みにくくなるため、3行以上連続してハイフネーションを行うのは望ましくないとされている。

ハイフネーションとは 【 hyphenation 】 – 意味/解説/説明/定義 : IT用語辞典

正しい位置で改行するためには、改行したい位置に<br/>タグを入れた方がよいかもしれません。

Examples

word-wrapがnormalの場合

SupercalifragilisticexpialidociousSupercalifragilisticexpialidociousSupercalifragilisticexpialidociousSupercalifragilisticexpialidocious

wordwrap: 単語の途中で改行するかどうかを指定する(値:break-word)

SupercalifragilisticexpialidociousSupercalifragilisticexpialidociousSupercalifragilisticexpialidociousSupercalifragilisticexpialidocious

wordbreak: 行の改行方法を指定する(値:break-all)

SupercalifragilisticexpialidociousSupercalifragilisticexpialidociousSupercalifragilisticexpialidociousSupercalifragilisticexpialidocious

正しい引用のルール(1)

引用のルール

著作権や引用のルールは気を付けなければいけないことだと認識はあっても、その知識があいまいなまま、文章、イラスト、写真、音楽、映像などを引用していませんか?

いい機会なので、著作権についての知識を深め、著作権侵害とならないように、正しい引用のルールを身につけましょう。

下記引用の条件をクリアしていれば、許諾は不要です。正式に掲載したいものは、許諾申請をして許諾をもらいましょう。

文化庁 身近にある著作権~ビジネスパーソンのための基礎知識より。

 

引用の条件

ア. 既に公表されている著作物であること

イ. 「公正」な慣行に合致していること

ウ. 報道、批評、研究などの引用の目的上「正当な範囲内」であること

エ. 引用部分とそれ以外の部分の「主従関係」が明確なこと

オ. カギ括弧などにより、「引用部分」が明確になっていること

カ. 引用を行う「必然性」があること

キ. 「出所の明示」が必要(コピー以外はその慣行があるとき)

参考

知っていますか? 「引用」のルール
無料引用のルール
朝日新聞デジタル 著作権について
文化庁 身近にある著作権~ビジネスパーソンのための基礎知識(PDF)
文化庁 身近にある著作権~ビジネスパーソンのための基礎(映像)
文化庁 初めて学ぶ人のために 平成25年度

次回勉強会(9/27 Fri)のリクエスト

次回勉強会のリクエストです。

1、「てんてん」をcssでやる。タカハシ先生お願いします!
   こういうの。
   りんご・・・・・・・1,000円
   オレンジ・・・・・・6,000円
   なし・・・・・・・・・100円

2、ジェイコさんが制作中のぷりんサイトのグローバルメニューのcss3疑似要素の「ふわ~」と出てくるやつ教えて下さい。
  ジェイコさんお願いします!

楽しみにしています。
  

フォトショップで作る!GIFアニメーション

9/13の勉強会のお題は“GIFアニメーション”でした。
データも軽く、今また何気に脚光を浴びている(?)GIFアニメ。
これをGIFアニメ作成アプリや、CSS3アニメーション等、いろんな方法で作ってみました。

その中から、今回はphotoshopを使ってGIFアニメを作ってみようと思います。

1.画像を必要な枚数用意する

イラストレーターで作った画像を4枚用意しました。
gifani-01
続きを読む

GIFアニメ

2013-09-13 の勉強会でGIFアニメについてやるとになりました。(前回の勉強会の後のマックで)
やるにあたって具体的に何を用意していけばよいですか?先生。

ちなみにGifアニメと上で↑動いてるやつです。Flashではありません。

こちらのサイトにのってました。
http://matome.naver.jp/odai/2124771110937828068

すごいですね~。アイデアもいい!
最初からこんな凄いのは出来ないと思いますが、まずは簡単なのを作ってみましょう!

CSS3 アニメーション(Transitions)

サイトのメニューのホバーをふわ~っとさせて、かわいくするにあたってのの注意点。
(2013-09-06勉強会・制作中のサイトを先生に見てもらったらアドバイスを頂いたのでメモしておきます。)

上の3つと下の3つの違いわかりますか?上3つはホバーした時の「ほわ~」が遅いのでユーザーが少々いらいらするかも。なので下3つはちょっと速くしたのでいらいらしない。(と思う)
もう1つ。カーソルを外した時に上段は「ぱっ」ともとに戻るのでかわいくない。下段は「ほわ~」っと戻るのでかわいい。戻るのはゆっくりでもいらいらしない。(と思う)

醤油ラーメンを注文して出てくるのが遅いといらいらするけど、食べ終わってどんぶり下げるのが遅くてもいらいらしないでしょ。それと同じ心理かな。または、かつ丼を注文して出てくるのが遅いといらいらするけど、食べ終わってどんぶり下げるのが遅くてもいらいらしない。さらに、みそラーメンを注文して出てくるのが遅いといらいらするけど、食べ終わってどんぶり下げるのが遅くてもいらいらしない。……..読んでいらいらした?

CSS3でロングシャドーデザインのアイコンを作る

8/23日の勉強会でのicomoonの続きです。
今回は自分で作った画像をicomoonを使ってアイコンフォントにしてみます。

目次

  1. イラストレーターでアイコンを作る
  2. アイコン画像をSVGファイル形式で書き出す
  3. icomoonに画像をupする
  4. サイトに実装してみる
  5. 更に!アイコンをCSS3で流行りのロングシャドーデザインに変えてみる

1.イラストレーターでアイコンを作る

形はなるべく単純に、隙間などは広めにとります。
また時々縮小してみてバランスを確認します。
私は300px×300pxでこんなのを作ってみました。
続きを読む

スパムメール(迷惑メール)対策!ページが読み込まれ表示する際に、メールアドレスの表示だけ数秒送らせる。

噂ではメールアドレスを探しまわっているロボットがいるらしいです。ロボットといってもマジンガーZやゲッターロボのようなものではありません(だとしたらかっこいいなあ)。残念ながらただのコンピュータープログラムです。
世界に何万とあるサイトに訪れてメールアドレスを探している。(らしい )
ページをパッと見て、以下の様なmailtoのある記述を探しているのです。(おそらく)

パッとみて無ければ他のサイトに行ってしまいます。(きっと)
それならば、javascriptでメールアドレスの表示を数秒送らせて、ロボットにフェイントをかけてみようではありませんか!さらに拡張子偽装もしちゃいましょう!これで安心!(なにもしないよりかは)

以下のコードをそのままコピーしてテキストエディタ(ドリームウィーバーやテラパッドなど)にコピー。ブラウザでプレヴューしてみて下さい。3秒遅れてメアドが表示されますね。何秒遅らせるかはあなたのセンス次第です!

簡単でしょ。(htmlとjavascriptをだいたい理解できてるという人前提です)

id名やメールアドレスや数字(何秒遅らせるか、3000は3秒)など自分なりに書き変えてやってみて下さい!

参考にしたサイトhttp://www.nikkei-azabu10.com/smail14.html

icomoon

icomoon/アイコムーン

2013-08-23の勉強会でアイコムーン「シンボルフォント」についてやりました。

アイコンを画像ではなく文字情報として扱うので大きく表示した場合に画像だとギザギザになるのが、これだとギザギザになりません。

http://icomoon.io/だいたい無料

  1. 上記のサイトにアクセス
  2. menuのapp→start the app→アイコンがたくさん表示
  3. 矢印ツールで好きなのを好きなだけ選択
  4. フッターの「font→」クリックすると、Downloadとなるのでクリックしてダウンロードする。
  5. あっ、そうだ!ダウンロードの前にPreferenceをクリックして選んだアイコンをまとめたファイルに任意の名前つける。チェックboxは特になにもチェックしなくていい。
  6. ダウンロードすると任意の名前の後にアイコムーンがつけた数字のファイルができましたよね。例えばnobuyasu2041みたいなの。
  7. zzz01

  8. 実際に使用するのは、style.cssとfontフォルダです。ie7以下にも対応させたい人は、Ite-ie7.jsも必要です。
  9. index.htmlをテキストエディタで開いてみましょう。div class=”glyph”の中に

    が、ありますよね。
    それを使いたいHTMLにコピペすればつかえます。その際にHTMLとstyle.cssとfontフォルダのパスの位置に注意して下さい。パスの位置はindex.htmlを参照。あと、index.htmlをブラウザで開くとどんなアイコンが入っているか見る事ができます。

ie対策の人は、index.htmlのheadにある以下の文を自身のheadに貼りつけて!

icomoon使い方でググると色々出てきます。僕の説明だけじゃ????の人は、それらも参考にしてみて下さい。もちろんコメントしてくれれば、お答えします。

自分でイラレなどで作ったアイコンもシンボルフォントにしてくれる機能もあります。それについて、勉強会で実際にやっていた、kanedaさん、ジェイコさん、かおりんごさん、どなたかこの記事の議事録の続きをお願いします。

↓↓↓↓↓↓↓↓

かおりんごさんが別記事で書いてくれました。
http://clubringo.com/longshadow-icon/