タグ別アーカイブ: css3

レスポンシブwebデザイン

レスポンシブが曖昧な人は必見!RWDの設定方法

みなさま、ごきげんよう。
2014-07-18 勉強会でレスポンシブWebデザイン(RWD)の実装方法について、確認しました。

自分のサイトや作品をレスポンシブにしたい!

レスポンシブWebデザインの理解が曖昧な人や、初めてRWDに挑戦する人は、以下の手順でやってみましょう。

続きを読む

css animationで要素のwidthを%指定

2014-06-13 勉強会

この日の勉強会は、とても有意義な内容でした。内容の一部を自分のサイトにアップしました。

css animationでアニメーションさせる要素のwidthを%指定するとどうなるのか?

manaka designのtipsをご覧下さい。とても為になる事が書いてあります。
manaka design

2014-05-16 勉強会

svgアニメーションについて。

  • 線に効果をつけるには?
  • 「css animationが使えないブラウザだと、何も見えず、何も起こらなくなって困る」についての対処法

http://manakaa.com/tips.html

↑「SVG LINE アニメーション・応用編2014-05-15」に追記しました。参照して下さい。

visibility:hiddenとdisplay:noneの違い

visibility:hiddenは要素の高さをキープする。display:noneは要素の高さをキープしない。まあ、やってみて下さい。違いがわかりますよ。

疑似クラス

疑似要素でデザインに装飾を加えたりしていますよね。そして疑似クラスというのもあります。よく使う「:hover」というのは、疑似クラスにあたります。その他に「:target」というのもあります。今回「:target」を使ってどんな事が出来るのかやってみました。下記のファイル参照

疑似クラス:targetはこんな事が出来る。

clearfixについてのまとめ

2014-5-02の勉強会にて学んだclearfixについてまとめます。現在私は初めてのサイトを制作中で、<footer>内のナビゲーションがfooter画像内におさまらないという問題が発生し、先生に質問しました。

image01

→原因は、<main>の高さが0だから。

image02

中身がすべてfloatしている親要素の高さは0になる。floatをかけると別の次元になり、親要素の中にいない状態になる。上の図の場合、2つの<div>は<main>の中にいない状態になる。つまり、親要素の<main>は2つの<div>を覆っていない状態である。

●解決法

  1. 親要素に固定の高さを指定する。 →しかしこれでは、どのくらいの数値かわからない。
  2. 自動的に高さがつくようにclearfixを指定する。
  3. overflow:hidden; を指定する。

2と3はどちらでもよいが、overflow:hidden; を使用すると、幅を超えてしまったテキストや画像を隠してしまうという問題が生ずる。clearfixの方が安全である。※両方指定しないこと。

●clearfixの使い方

・clearfixしたい要素は中身がすべてfloatしている親要素。
・親要素にクラスを指定しておく。ここでは「class=”clearfix”」とする。
今回の例でいうと、
html

css

↑after疑似要素とcontentプロパティを利用して、中身のfloatした要素の後ろに、内容が空のblock要素を生成。そのblock要素にclear:both; を指定している。

image03

これで親要素に高さがキープされ、中身の要素全体を覆うようになった。
ほかにもclearfixが必要な親要素に同じクラス名をつければ、複数回使用できる。

●「:before」「:after」とは

cssの疑似要素。(疑似要素とは、htmlにはかいていないが、cssで作れる要素のようなもの)
:beforeと:after疑似要素は位置を指定するもの。しかしIE7までは非対応。IE8から使用可。

:before →要素の直前にコンテンツを追加
:after   →要素の直後にコンテンツを追加

 

 

SVG LINE アニメーション・応用編

2014-05-09 の勉強会で「SVG LINE アニメーション part2」というのをやりました。前回の応用編です。
SVG LINE アニメーション・基礎編

svgはベクター画像なので拡大してもビットマップ画像のようにギザギザにはなりません。レスポンシブデザインに最適です。もちろんアニメーションはcssで実装!FlashやJavascriptを使わないので軽いのであります。

自分のサイトの備忘録「tips」にアップしました。
manakadesign

manaka design/tips
「SVG LINE アニメーション・応用編 2014-05-15」という記事をご覧下さい。

このページにも直接説明を書こうと思いましたが、それは参加されたどなたかにお譲りします。なぜなら議事録などを書くと理解度が増すからです。僕だけスキルが上がっては申し訳ありません。どなたかチャレンジを!

SVG LINE アニメーション・基礎編

2014-05-02 の勉強会で「SVG LINE アニメーション」というのをやりました。

svgはベクター画像なので拡大してもビットマップ画像のようにギザギザにはなりません。レスポンシブデザインに最適です。もちろんアニメーションはcssで実装!FlashやJavascriptを使わないので軽いのであります。

自分のサイトの備忘録「tips」にアップしました。
manakadesign

manaka design/tips
「SVG LINE アニメーション・基礎編 2014-05-05」という記事をご覧下さい。

このページにも直接説明を書こうと思いましたが、それは参加されたどなたかにお譲りします。なぜなら議事録などを書くと理解度が増すからです。僕だけスキルが上がっては申し訳ありません。どなたかチャレンジを!

府中でホームページ制作

自分のサイトができました。キャッチコピーやいろいろと手直ししたいですが、完璧にできるまでをまっていてもその時は来ない(上を見ている以上)なので、一応これで完成です。紙媒体と違い後から何度でも修正、変更できるのがweb siteのいい所。

manakadesign

http://manakaa.com/
http://blog.livedoor.jp/happygolucky1969/archives/52401162.html

特定の位置までスクロールしたときにアニメーションさせる(jQueryとcss)

2014-01-31と2014-02-07の2週にわたり勉強会でやった「特定の位置までスクロールしたときにアニメーションさせる」というのを自分なりにやってみました。
オブジェクトの数だけif文を書くという面倒なやり方ですが、理解しました。オブジェクトの数だけif文を書かなくて済む方法も先生に教わりましたが、まだちょっと難しいので理解していません。

とりあえず自分のサイトにアップしました。
http://nobu-69.com/others.html

授業に参加したみなさんは、どれくらい理解しましたか?
僕は理解するのに結構いじくりまわしました。時間も費やしました。授業で先生の説明を聞いただけで技術はモノになりません。聞いた事を基に家でいろいろやらないとダメです。

なので、細かい説明はしません。自分でやってみてつまずいた箇所があったら教えて下さい。分かる範囲でお答えします。

css

jQuery

html

jQuery (triggerのみ)とcss3で実装するscroll switchアニメーション

2014-01-24の勉強会でやった事を現在製作中の自分のサイトにやってみました。

質問1
1つだけならうまくいきますが、2つ設置するとうまくいきません。(同時に作動してしまう。)

質問2
jQuery本体ですが、index.htmlにしゅるしゅるスムーススクロールをやる為に、
src=”http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js”
で本体を読み込んでいました。

しかし今回のアニメーションをやるにはversionが古すぎるようで、動きませんでした。
なので、最新の本体をダウンロードしてサイト内に設置しました。そしたらアニメーションは
動きましたが、しゅるしゅるスクロールが動作しません。

こういう場合の対処法については、どうしたらいいでしょうか?
新しいのに対応しているスムーススクロールを見つけるのがいいのかなあ。

製作中のサイトです。トップページにアニメーションあります。あと、何度もいいますが制作途中です。w
manakaa.com

先生が作ったサンプルサイト
ringo20140124
※ダウンロードしてjQ本体をリンクして下さい。

css図形

cssでインベーダー

こちらのサイトに載ってました。The Shapes of CSS

2014-01-17 勉強会

今回は先生から急遽病気で行けなくなったとの連絡をもらいましたので、先生ぬきでの勉強会でした。

サイトを見ていて気になるエフェクトってありますよね。そんなときはFireFoxのFireBugでhtmlとcssをコピってしまおう。そんでもってcssの値をかえたり、プロパティ自体をオフにしてみたりする事で理解を深める。「編集ボタン」でhtmlをコピー、cssをコピーしてhtmlファイルにペースト。どのcssをコピーするかは各自のセンスで。知らないプロパティとかが出て来てもとりあえずコピる。動けばとりあえずOK!

やってみた
参考サイト

css

html

質問

・フォントの太さが参考サイトと違うのはなぜ?
・IE/Firefox だと文字の高さをキープするけど、Mac/Firefoxだと文字の高さが(幅も)キープされないのはなぜ?

今日の勉強会は謎をのこしつつ終了しました。

2013-12-20 勉強会議事録

2013-12-20 勉強会議事録
今回は、大きく時間をとって新しい技術に挑戦!という事はせず、基本的な事などを色々やりました。

  1. CMSを人に説明する時にどう言うか
  2. 最近のウェブサイトのフォントサイズは16pxが主流らしい。(以前は12px)
  3. インライン要素とブロック要素についておさらい
  4. text-overflow: ellipsis;

続きを読む

css3でmacのスクリーンセーバー風なものを作ってみました

11/22の勉強会の議事録です。
今回はmacのスクリーンセーバー風なものをcss3で作ってみました。
まずは完成形をご覧ください。↓

screensaver-01

それでは作成のポイントを説明致します。
どうぞ、下のソースもあわせてお読み下さい。

目次

続きを読む