css3で登場したflexboxですが、そろそろ使える頃合いがくるんじゃなかろうかということでflexboxを使ったら簡単だったなぁと思うレイアウトを実際に試してみました。 flexboxについてのそもそも解説はいろんなブログにあるので、ここでは割愛させて頂きます。 どんなものか理解するためのサイトとしては以下をお薦めします。 Visual Guide to CSS3 Flexbox: Flexbox Playground | 簡単にいうと、cssの新しいレイアウト方法になります。これまでの方法と比べると、グッと簡単に様々なレイアウトができるようになります。 DEMOを作りましたのでそちらをご覧ください。 DEMO flexboxのサンプル ツーカラム よくあるツーカラムのコンテンツですね。 今までだとfloatを使って…という感じでしたが、 flexboxを使うとこんな感じになります。

SVGとCSS3を使った線画によるテキストのアニメーションの方法が紹介されていました。 想像していたよりも、ずっと簡単にできることがわかりました。 こちらの方法を少し応用して筆記体のアニメーションをやってみましたので、 ご紹介いたします。 ↓参考にさせていただいたサイト SVG線画が美しいリッチアニメーションの作り方 ↓作ってみたもの DEMO 方法 基本的な方法・手順は参考サイトと一緒です。 1. Illustratorを使い、筆記体のフォントを、ペンツールを使って一筆書きのパスとしてトレースする Illustratorでモデルとなる筆記体のフォントでテキストを配置し、ペンツールでトレースします。 このとき、パスは途中で切らずに、一筆書きの状態になるよう、1つのパスでトレースします。 ただ、実際の筆記体のように、t, fの横線は別のパスとして作成し、 iの点の部分は星形のパスとして作成し

css3のanimationをwebサイトでちょこちょこ見かけるようになったので試してみました。 デモを作ってみましたので、ご覧下さい。 DEMO 横に動かしつつ、縦にもちょっと動いていてフワフワと動いているイメージです。 animationの設定方法 こちらでは説明を簡単にするため、DEMOの一番したのアニメーションの説明をします。 liにanimationを設定します。 position: absolute; animation: moveY 2s infinite alternate linear; -ms-animation: moveY 2s infinite alternate linear; -webkit-animation: moveY 2s infinite alternate linear; -moz-animation: moveY 2s infinite alte

和風なwebサイトの場合、縦書きのデザインをすると思います。 以下のサイトなんかも縦書きレイアウトをデザインを取り入れています。 グッと和風感がでますよね！！ 深山山荘オフィシャルサイト 縦書きの表現は、画像か１つずつ文字をspanかなんかで囲んでっていうのが定石だったのですが、CSS3で簡単に縦書きが出来るようになっています。 (IEは独自の表現で出来るようです) とりあえず、DEMOを作りましたので、そちらご覧ください。 DEMO 解説 基本的には本当に簡単です。

SVGとCSS3を使った線画によるテキストのアニメーションの方法が紹介されていました。 想像していたよりも、ずっと簡単にできることがわかりました。 こちらの方法を少し応用して筆記体のアニメーションをやってみましたので、 ご紹介いたします。 ↓参考にさせていただいたサイト SVG線画が美しいリッチアニメーションの作り方 ↓作ってみたもの DEMO 方法 基本的な方法・手順は参考サイトと一緒です。 1. Illustratorを使い、筆記体のフォントを、ペンツールを使って一筆書きのパスとしてトレースする Illustratorでモデルとなる筆記体のフォントでテキストを配置し、ペンツールでトレースします。 このとき、パスは途中で切らずに、一筆書きの状態になるよう、1つのパスでトレースします。 ただ、実際の筆記体のように、t, fの横線は別のパスとして作成し、 iの点の部分は星形のパスとして作成し