このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。

web帳

2 / 212

CSS3

なんだか色々と出てきますよね。 もう、最近良く分かんないないです(笑) ではSassのインストール、使い方を紹介していこうと思っております。 Sass公式サイト http://sass-lang.com/ そもそも、Sassって何?って話なんですが、 SassとはCSS を生成するため…

続きを読む

CSS3でテキストグラデーション指定をする方法です。 HTML [code]<p>TEXT BACKGROND GRADIENT</p>[/code] CSS [code] p{background-image: -webkit-gradient(lin…

続きを読む

CSS3 否定擬似クラスの使い方です。 特定のセレクタ以外のセレクタに適用されるセレクタと、ちょっとひねくれたセレクタです。 使い方は [code]E:not(s)[/code] Eは要素、(s)に適応させたくない要素や属性を入れることによって、 それ以外にcssを適応させます。…

続きを読む

前回の CSSで図形 三角形&台形 の応用で、二等辺三角形、ひし形を使い色々な図形を作成します。 まず、復習です。 HTML [code]<div id="triangle"></div>[/code] CSS3 [code]#…

続きを読む

前回の css3 3d 回転 transform rotate() の続きとなります。 こちらにperspectiveを追加し、遠近感効果を付けます。 HTML [code]<div id="turn"> <div id="r…

続きを読む

css3で要素を回転させる transformプロパティの使用方法です。 transform:rotate()を使い回転させましょう。 【回転】 rotate(回転角度) 角度による2D回転の指定を行えます。 [code]-webkit-transform: rotate(0d…

続きを読む

CSS3で出来なかったことが色々と出来るようになりました。 今まで、webサイト制作の際、gifやjpgまたはpngの画像ファイルで表現していた部分も、 css3で記述する事によって、表現することが可能です。 え?そんな面倒くさいことしなくていいじゃん! って思われがちですが、…

続きを読む

もうかなりcss3を導入されているサイトが増えて来ていると思いますが、 ここでもう一回おさらいをしちゃったりしましょう。 CSS3で何が出来る?? ・デザインの実装が画像を使用せず実装化 ・Flash、jsを使用せずアニメーション化 と2点。 あれ?意外に思いつかなかった。(笑…

続きを読む

使えるセレクタシリーズぅ 属性セレクタです。属性セレクタは、属性名や属性値によって、要素を指定する事ができます。 まずは属性名を指定する方法 HTML [code] <a href="#" title="hogehoge">t…

続きを読む

アニメーション (Animations モジュール) @-webkit-keyframesを使い、フェードイン、フェードアウトを作ります。 @-webkit-keyframesは%で時間軸の指定が出来ます。 0%がスタート、100%で終了となります。 fadeIn [code] …

続きを読む

CSS Media Queries(メディアクエリ)を使用したデバイスごとの指定方法です。 CSS3のMedia Queries(メディア クエリ)を使用して、デスクトップのブラウザ用をはじめ iPhone, iPadなどのモバイル用にスタイルシートの分ける方法です。 スタイルシート…

続きを読む

いやぁ。もう、css3で記述されているサイトも沢山増えてきましたね。 今回は改めて、css3のグラデーションを振り返ってみましょう。 [code] .gradient { background: -moz-linear-gradient(top, #fff, #000);/* Fi…

続きを読む

使えるcss3セレクタシリーズ 今回はonly-child() 唯一の子要素を指定する事が可能です。 HTML [code] <div id="test"> <div>divの要素</div> </div> …

続きを読む

使えるセレクタシリーズ第1弾。nth-child() を紹介します。 w3c http://www.w3.org/TR/css3-selectors/#nth-child-pseudo いやぁ、こちらを参考にしていきたいのですが、 英語だし、難しいですね。 では簡単に。 HTM…

続きを読む

css3では、複数のbackground指定が可能になっております。 今回は3枚の画像を用意して指定する方法です。 まず、画像ですが、 背景 ハート、星 の3枚を用意します。   [code]<div id="test"></d…

続きを読む

CSSで簡単な図形の作り方。 三角形 取り敢えず、要素はdivで [code]<div id="triangle"></div>[/code] [code]#triangle{ height:0px; width:0px; b…

続きを読む

2 / 212

Graphical FrontEnd Engineer
- Daisuke Takayama

MAD CITY 北九州市で生まれ育つ。20代はバンド活動に明け暮れ、ふと「webデザイナーになりたい。」と思い、デジタルハリウッド福岡校入学。卒業後、数々の賞を受賞、web業界をざわつかせる。
現在、港区六本木で活動中。

WEBデザイナーの、WEBデザイナーによる、WEBデザイナーの為のサイト。「みんなで書こう!」と仲間を募ってみたが、結局書くのは自分だけとなってしまいました。日々のメモを綴っていきます。