インラインSVGの中の要素にリンクをつける方法 | スターフィールド株式会社
Flash全盛期などには、イラストの中の要素をクリックしてページを移動するようなサイトを時々見かけました。 Flashの代用の一つとしてHTML５で導入されたインラインSVGですが、 実はSVG内の要素にHTMLのように<a>でリンクをつけることができます。 SVG内の要素にリンクをつけることができると、 Illustratorなどで作ったベクター形式のイラストをそのまま使えるので、 Flashのようにイラストの中の要素をクリックして移動するということが、 HTMLだけで組むよりも簡単に行えるようになります。 ↓こちらはそちらを利用して作ってみたものです。 DEMO 方法はとてもシンプルです。 まずはIllustratorを使って、イラストを制作してください。 このとき、リンクさせる要素ごとにグループ化を行っておくと、リンクをつけやすくなります。 イラストができたら、SVG形式でファイルを
css3のflexboxを使うとすごい簡単になるレイアウトを試してみた | スターフィールド株式会社
css3で登場したflexboxですが、そろそろ使える頃合いがくるんじゃなかろうかということでflexboxを使ったら簡単だったなぁと思うレイアウトを実際に試してみました。 flexboxについてのそもそも解説はいろんなブログにあるので、ここでは割愛させて頂きます。 どんなものか理解するためのサイトとしては以下をお薦めします。 Visual Guide to CSS3 Flexbox: Flexbox Playground | 簡単にいうと、cssの新しいレイアウト方法になります。これまでの方法と比べると、グッと簡単に様々なレイアウトができるようになります。 DEMOを作りましたのでそちらをご覧ください。 DEMO flexboxのサンプル ツーカラム よくあるツーカラムのコンテンツですね。 今までだとfloatを使って…という感じでしたが、 flexboxを使うとこんな感じになります。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
