arrow-left arrow-right envelope facebook feedly folder home html-tag person tag twitter wordpress rss user get-pocket envira google-plus

[CSS]CSSグリッドレイアウト基本の「き」

CSSグリッドレイアウトは新しい(といっても、昨年には勧告準備ができていた)レイアウトモジュールですが、今年の春に大きなシェアを占めるブラウザ全てにおいて実装が可能となったので、私も少しずつ学習していこうと思います。最近CSS周辺は覚えることが多いですが、まずは基本からやっていきましょう。

続きを読む

[CSS]Flexboxでハンバーガーメニューを作ろう

プラグインやフレームワークを使わずにレスポンシブ対応のナビゲーションが作れないかとここ1年半ほどずっと考えていました。制作現場では時間の制約などの関係でプラグインの導入が現実的だと思うのですが、せっかく勉強しているので、今回はFlexboxを使ってレスポンシブ対応のナビゲーションメニューを作ってみました。

続きを読む

wow.jsとAnimate.cssでスクロール連動アニメーション

今回は有名すぎるスクリプトでスクロール連動アニメーションを作ります。私も最初このスクロール連動でアニメーションをするサイトを見て頭の中が「???」となったものでしたが、意外と簡単に実装できますし、効果的に画像や文章を印象付けることができます。とにかくかっこいい、クールの一言です。

続きを読む

[jQuery]プラグインなしでタブメニュー

画像を多く表示させたい場合にカルーセル(スライドショー)を使いますが、他にも同じページでコンテンツを複数表示させたい時にはタブメニューも有効です。Bootstrapやプラグインなどでも多彩なタブメニューが実装できるのですが、今回はプラグインを使わずにjQueryを使って実装できるタブメニューを作ってみました。

続きを読む

[CSS]画像を暗くしてみる

このブログでもちょくちょくPhotoshopを使わずともCSSで色を変えられる…ということを書いていますが、実にいろいろなやり方があります。今回は画像を暗くするというテーマです。可視性を上げるために、暗くした背景画像に白い文字を重ねるという手法をよく見かけますが、今回はその方法について書きたいと思います。

続きを読む

Emmetで爆速コーディングを始めよう!- CSS編

前回はEmmetのHTML編として省略記法の基本をご説明しました。今回はCSS編です。Emmetの便利さはCSSの方が感じやすいと思います。初めは戸惑うかもしれませんが、使い続けていくうちにEmmetなしでCSSを書くのがバカバカしくなるほどの便利さと速さを実感できると思います。ここまでがEmmetの基本となります。

続きを読む

[CSS]floatからFlexboxへ、新世代ブラウザへの対応を始めよ・・・

現在のWebデザインはスマートデバイスの普及によって小さなモニタにも柔軟に対応するレスポンシブデザインが必須となり、floatやclearハックを駆使してレイアウトを組んでいたWebコーディングもこれからはCSSに書き足すだけで柔軟なレイアウトが組めるFlexboxが主流になってくると思います。今回から2回に渡って説明します。

続きを読む

[CSS]画像と文字を重ねてみよう〜position編vol.2

前回はCSSの中でも重要なpositionに関する記事を書きました。大体使いどころが決まっているということが頭に入っていると、混乱せずにCSSを扱えるようになってくるのではと考えています。今回は前回を踏まえて画像の上に文字を重ねる、そして意外に使う場面の多い重なり順についても書いてみます。

続きを読む

PAGE TOP