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

web帳

1 / 212

CSS3

スクリーンショット 2016-06-11 17.47.43
「今は昔」 この業界は本当にサイクルが早い。 あんなに、「おお。なんだこれ、超便利ではないですか?」と言っていたものもすぐに「古く」なってしまう。 「compass」もその一つではないでしょうか。 いや、全然便利で使いたいのですが、何しろ 「コンパイル…

続きを読む

btn_icon_right
「CSSが難しい。。」「CSSが面倒。。」 OOCSS、BEM、SMACSS... Layout、Component、module.... 「色々ありすぎてわかんねーよ!」「サクッと作れないよ。」「ルールが分かりづらい。。」 などなど、お困りのエンジニアさんにもオス…

続きを読む

スクリーンショット 2016-01-02 1.29.07
というわけで、 明けまして、おめでとうございます! なんか、慌ただしく2016年を迎えてしまった次第です。。 今年はちょっとゆっくりしたいなと思いつつ、 2016年、今年もよろしくお願いいたします。mm さてはて、早速本題の方ですが、webデザイン界隈で …

続きを読む

スクリーンショット 2014-08-25 2.23.43
どうも。 お手紙みたいな題名になって申し訳ありません。 今更感たっぷりなところもあるのですが、これからweb制作を始めるって方もいるかと思い、需要もあるかと思いますので、今回は、CSS3アニメーションの制作のコツを大事なところだけまとめてみました。 昨今、スマートフォンの登場によ…

続きを読む

スクリーンショット 2014-01-07 8.04.35
早いもので、私もフロントエンドという職業になって4,5年になります。 帰れない日々もあり、様々な問題ともぶつかってきました。 なんだかんだありまして、ここ数年では、PCからスマートフォンへ更にタブレットへと、私たちの扱うデバイスも変化をしてきました。 そこでぶつかる問題として「ページ…

続きを読む

spec
応援していただいた皆様ありがとうございました。 今回、SPEC vol.4に参加し、3位を受賞することが出来ました。 推している作品とは別の作品が選べて、「あれっ」て感じでしたけど、 なにはともあれ受賞出来て良かったな。と思う次第であります。 受賞した作品は以下になります。…

続きを読む

スクリーンショット 2012-07-15 4.48.51
ども、お久しぶり感たっぷりの更新となります。 前回のjsdo.it企画「SPEC vol.3」に引き続き、「SPEC vol.4」にも参加しております。 前回のCSSで必殺技が一部のギークな方々に好評だったみたいで(笑) グーグルでjsdo.itで検索すると、以下の様な表示が出ま…

続きを読む

スマートフォンでよくある、ページネーションをjQueryやjQueryMobileやJavaScriptを使わず、CSSのみで作ってみました。 ポイントとしては、アンカータグを使わず、li要素をlabel要素でラップし チェックボックスにチェックが入るとスライドするように、cssで調整…

続きを読む

スクリーンショット 2012-06-03 3.14.47
CSS3ではjQuery等を使用しなくてもフォームパーツ(input,checkbox,etc…)を自由自在にカスタマイズ出来ます。 デフォルトだと、以下の様な好きなデザインに変更が可能です。 ↓カスタマイズ カスタマイズするには魔法の記述、 [code]-webkit…

続きを読む

スクリーンショット 2012-06-01 7.41.31
css3ではFillter Effectsも実装予定となっております。 開発用webブラウザ、webkitにて以下の画像を使い検証を行いました。 webkit http://nightly.webkit.org/ 以下の画像を元にcssで変化させます。 [code]-we…

続きを読む

スクリーンショット 2012-05-27 23.44.45
まず、word-wrapとword-breakについて、 word-wrap normal単語の途中で改行はしません。この場合、必要に応じて表示範囲を拡大します。(デフォルト)break-word必要に応じて単語の途中で改行します。 word-break normalCJKは厳…

続きを読む

スクリーンショット 2012-05-22 0.45.22
Sass?って方はこちらの記事でも参考に。 CSSをライブラリ化?Sass(scss)のインストール 使用方法 mac 何かと便利なSass。そして何かと便利なエディタ「Coda」。 そんな便利と便利が重なった時、快適が生まれます。 と、前置きはこのぐらいにしておき、「Coda…

続きを読む

スクリーンショット 2012-05-19 22.59.38
CSS3の属性セレクタで利用できるBegins withとEnd withの機能を利用し、属性値によっての指定することが可能になります。 Begins withとは「〇〇で始まる属性」End withはその逆で「〇〇で終わる属性」となっております。 どうやって使うかというと…

続きを読む

スクリーンショット 2012-05-19 6.47.46
昨今、CSS3でのグラデーションや、様々なプロパティを用いて様々な事が出来るようになったのは、 大分浸透しているかと思います。 当方はCSS3のバトルアニメーションを作成し、カヤックが企画しているjsDoitのコンテストで受賞しております。 宜しければご覧下さい。 http…

続きを読む

JavaScriptを用いたCSSのスタイル変更は通常、 [code]element.style.backgroundColor = "#ff00000";[/code] などのように element.style.attribute = value; で変更が…

続きを読む

スクリーンショット 2012-01-28 23.07.35
あ、ども。僕です。 ホント時代の流れの速さをひしひしと感じる今日この頃です。 前回の記事でsass導入について書かせて頂いたのですが、 CSSライブラリ化? Sass(scss)のインストール 使用方法 mac   こんな事しなくても、すぐに簡単sassをコンパイル出来るぜ!的な…

続きを読む

スクリーンショット 2011-12-28 0.55.26
前回の記事 jsdo.it企画 CSSで必殺技に参加しています。   の結果を頂きました!   な     な     なんとか、           3位入賞ですー! ありがとうございますぅ〜!!   本音、悔しいです!! 1位もで…

続きを読む

スクリーンショット 2011-12-21 0.26.00
ども。 カヤックさんの「jsdo.it」でのSPECというコーディングコンテストでの企画 「CSSで必殺技」(長いな)の結果が気になる今日この頃の僕です。   さて、そんなCSSでのアニメーションを使う際のプロパティについて紹介。 というよりも、知らなかった。これ。使えば良かったなと。。 …

続きを読む

スクリーンショット 2011-12-14 1.54.03
ども。僕です。前回の「jsdo.it企画 CSSで必殺技に参加しています。」   で紹介させて頂いたのですが、な、な、なんと、 CSSで必殺技第2弾 http://jsdo.it/panicdragon/23cU(第2弾) がカヤックさんのブログにて CSSだけで必殺技を作るコンテストの…

続きを読む

スクリーンショット 2011-12-07 0.57.37
ども。僕です。タイトル通り「jsdo.it企画 CSSで必殺技に参加しています。」 URLは http://jsdo.it/panicdragon/23cU(第2弾) http://jsdo.it/panicdragon/zh69(第1弾) panicdragon というネームに参加させ…

続きを読む

Flashやjavascriptで制作されたコンテツスライダー、バナーのスライダー等は一般的にあったのですが、これをCSS3で作成してみました。 .displayArea{margin:10px 0 20px;padding:10px 20px 20px}.displayArea:af…

続きを読む

any_shape
CSS3 三角形 ひし形 等の作成方法のエントリーを参考にborderで色々な図形を作ってみました。 では、復習。 borderで三角形を作る HTML [code]<div class="shape01"></div>[/code] …

続きを読む

スクリーンショット 2011-11-20 1.47.51
transformプロパティのscale()は、要素を拡大、または、縮小表示する時に使用します。 値としてはscaleX()、scaleY()、scaleZ()、scale3d()等があります。 値 scale(数値, 数値) : 2つの数値で2D縮尺比率を指定します。1つ目の数値は…

続きを読む

css3ではtransitionプロパティを用いて時間的変化をつける事が可能となります。 transition (時間的変化をまとめて指定) transitionプロパティは、transition効果(時間的変化)をまとめて設定する場合に使用します。 [code]transiti…

続きを読む

logo10
CSS3になり、様々な事が出来るようになりました。 transformもその一つです。 transformを使う事によってHTML要素を拡大、縮小、移動、変形などが出来るようになっています。 また、transition-durationなどの設定を加える事のよって、アニメーションの設…

続きを読む

スクリーンショット 2011-11-19 23.52.14
transformプロパティのrotate()を使う事によって要素を回転表示することができます。 transformプロパティのまとめはこちらから。 値 rotate(回転角度) : rotate()関数では、角度によって2D回転を指定。 rotateX(回転角度) : X軸を軸と…

続きを読む

box003
今まで2行のカラムレイアウトや3行のカラムレイアウトを作成しようとするには、 floatプロパティやpositionプロパティを利用するのが一般的でしたが、 CSS3になり、数行で作成することが可能となってきました。 display:box; カラム分けしたい要素を入れた親要素…

続きを読む

スクリーンショット 2011-10-31 3.33.12
前回の記事の css3 3d 回転 transform rotate()や css3 3d 回転 transform rotate() perspective追加 を参考に今回は、CSS3で立体的な四角形のアニメーションを作りたいと思います。(Javascriptまたは画像を一切使用…

続きを読む

スクリーンショット 2011-09-07 22.54.49
CSS3では、transitionプロパティやanimation-nameでkeyframesを呼びだして アニメーションを作成することができます。 それらを使用し、「ライトボックス風 アニメーション」を作りたいと思います。 (少々強引な方法ではありますが。。。) safar…

続きを読む

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

続きを読む

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

続きを読む

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

続きを読む

スクリーンショット(2011-04-17 18.40.08)
前回の CSSで図形 三角形&台形 の応用で、二等辺三角形、ひし形を使い色々な図形を作成します。 まず、復習です。 HTML [code]<div id="triangle"></div>[/code] CSS3 [code]#…

続きを読む

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

続きを読む

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

続きを読む

1 / 212

Graphical FrontEnd Engineer
- Daisuke Takayama

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

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