My Vector Space

  人生は寄り道してなんぼ

HTML / CSS

【TIPS|ズームスライダー】高速スライド&ズーム表示の画面遷移がインパクト大!

アニメーションしながらスライダー&ズーム表示する「ズームスライダー」。 demo 「ズームスライダー」の設置手順 htmlファイル内にCSSファイルとJSファイルをリンクさせる まず、以下のサイトから外部ファイルをダウンロードする。 元サイト http://tympanus…

【TIPS】画像ホバーの際アニメーション効果をつけるCSS3

スクリプト不要で、画像ホバー時にCSS3アニメーションで様々なキャプション表示ができるスタイルシート10パターンのまとめ。 記述はまず、どのパターンでも共通に適用させるCSSを設定して ( ダウンロードした外部ファイルをリンクさせる ) 、あとはパターン…

【TIPS】CSSだけで実装できる!! エレガンチックな「LIGHT BOX」

CSSだけで表現できるエレガンチックな「LIGHT BOX」3パターン。 記述の手順は、以下のサイトからソースをダウンロードし、対象とする画像の<img>タグにコードをつけて、あとはパターンごとの個別のCSSをリンクさせるという流れ。 http://tympanus.net/codr…

【TIPS】画像を4枚のパネルに分割してエフェクトをかけたスライダー

画像を4枚のパネルに分割してエフェクトをかけたスライダー4パターン。 まず、共通のhtmlを記述を記述してから、パターンごとのCSSを記述していく流れ。 共通のhtmlを記述を記述 まずは共通のhtmlを記述していく。 画像内のテキストは、<div class=”cr-ti…

【TIPS】サムネイルプレビュー付きスライダー

サムネイルプレビュー付きスライダー【2パターン】のコードまとめ。 まず、共通の設定部分になるCSSファイルをリンクさせる。 【 html 】 1 <head> 2 <link rel="stylesheet" type="text/css" href="css/demo.css" /> 3 <link rel="stylesheet" type="text/css" href="css/style.css" /> 4 <noscript> 5 <link rel="stylesheet" type="text/css" href="css/noscript.css" /> 6 </link></noscript></link></link></head>

【TIPS】ドロップダウンリスト 5パターン

CSS,Javascriptで作るドロップダウンリスト5パターン。 まず、ダウンロードした外部ファイルの中にある5パターン共通のCSSファイルとJSファイルを設定していく。 【 html 】 1 <head> 2 <link rel="stylesheet" type="text/css" href="css/style.css" /> 3 <link href='http://fonts.googleapis.com/css?family=Lato:300,400,700' 4 rel='stylesheet' type='text/css' /> 5 </link></link></head>

【TIPS】画像ホバーの際アニメーション効果をつけるCSS3 - ihover -

スクリプト不要で、画像ホバー時にCSS3アニメーションで様々なキャプションを表示するスタイルシート。CSS3だけでここまでできるとは…。 目 次 ・hover effect【1】左側と右側からテキストがスライドしてくるエフェクト ・hover effect【2】画像を画面上側に…

画像を4つのパネルに分割&エフェクト効果のスライドショー -Four Boxes Slideshow-

画像を4つのパネルに分割してエフェクトをかけたスライドショー3パターンのコードまとめ。 まず、ダウンロードした外部ファイルの中にある3パターン共通のCSSファイル(3ファイル)とjsファイル(3ファイル)を設定。 【 html 】 1 <head> 2 <link rel="stylesheet" type="text/css" href="css/normalize.css" /> 3 <link rel="stylesheet" type="text/css" href="css/demo.css" /> 4 </link></link></head>

【TIPS】CSSで作るドロップダウンメニューのドロップ表示5パターン

CSSで作るドロップダウンメニューのドロップ表示5パターンです。 コードの書き方は、どのパターンでも共通となるhtmlと CSSに加え、パターンごとに個別に設定するCSSを記述していきます。 共通部分になるhtmlとCSSを記述する まずは、共通部分になるhtmlを…

【TIPS】画像ホバーの際アニメーション効果をつけるCSS3 - InContent -

スクリプト不要で、画像ホバー時にCSS3アニメーションで様々なキャプション表示をするスタイルシート6パターン。 基本的にどのパターンで実装する場合でも、以下のサイトからダウンロードした外部ファイルの中にあるCSSファイルを一つ設置するだけでOK…

【TIPS】サムネイルプレビュー付きスライダー【 Sweet Thumbnails Preview Gallery 】

サムネイルプレビュー付きスライダー。 demo 記述の流れは、まず対象とする<img>タグにhtmlタグを追加して、以下のサイトから外部ファイルをダウンロードする。 http://tympanus.net/codrops/2011/01/19/sweet-thumbnails-gallery/ 外部ファイルの中からCS…

文字を変形させる ( 拡大 / 縮小 )

WEB上で縦横比を無視して文字の形を変形させるには、CSS3のtransformプロパティを使う。 transformプロパティの値には「scale」という値を指定してコードを以下のように記述する。 【 html 】 1 transform:scale(x,y); 「x」には横方向の倍率を、「y」には縦…

CSSで作るリボン風の見出し

~CSSでリボンを作るまでの大まかな流れ~ まず、リボン風にしたい部分の要素をhtmlに設定。 そこにスタイルを適用させ、borderプロパティでリボンの影に見せる部分の三角形を作成し positionプロパティで位置の調整をしていく、という流れ。 まずは、htmlか…

【 CSSが効かない時の対処法 】 セレクタ名の書き方で「 優先順位 」が決まる

CSSが効かないという状態になった時、以下のようなミスが原因になっていることが多いと思います。 ● タグの前後や間に全角スペースが入っている ● セミコロン ( ; ) の記述が抜けている ● 閉じカッコ ( } ) の記述が抜けている ● 編集したファイルを保存し忘…

CSSだけで改行する方法

ワードプレスのサイドバーのカスタマイズをしている際、とあるプラグインを設定したら、レイアウト上どうしても改行させて表示させたい部分なのに、プラグインなのでhtmlをいじれなくて どうすればいいか困っていました。 とくに致命的な問題ではないですが…

文字を斜めに傾ける

CSS3の「transform」プロパティを使って対象物を斜めに傾けることができます。 この指定は、テキストだけでなく画像に対しても適用できます。 CSSの記述は、transformプロパティの値に「rotate」という値を指定。 記述のしかたは以下のようになります。 記述…

マウスオーバーした時、背景カラーをふわっと変える設定

「マウスオーバーした時、背景カラーをふわっと変える設定」をまとめておきます。CSSで、元になる色と、マウスオーバーした時の色を設定するだけです。 以下で細かく見ていきます。 マウスオーバーした時、背景カラーをふわっと変える設定 1. もとの色を設定…

画像にマウスオーバーした時、CSSで半透明の白をふわっと乗せる

画像にマウスオーバーした時、CSSで半透明の白をふわっと乗せる設定。 やり方は色々あると思いますが この記事で紹介するのは、まず背景を白にしてから画像の透明度をつけることで ふわっとみせる、という方法です。 画像ホバーした時、半透明の白色レイヤー…

これは便利!!CSS3ジェネレーターいろいろ

ブラウザ上でプレビューを見ながら手動で設定できてコードも生成してくれるCSS3ジェネレーターを3サイトピックアップ。 ベンダープレフィックス付きでコピペしてすぐに利用可能。 1. 「 CSS Generator 」http://www.css3generator.in/ ■ カスタマイズできる…

positionプロパティについて

cssでレイアウトをしていく際にpositionプロパティを使う機会は多いので、「static」「relative」「absolute」「fixed」の使い方についてをまとめておきます。 目 次 1. positionプロパティとは 2. 使い方、用途は? 3. 移動させたい要素に「 position : stat…

CSSで複数のセレクタ名を並べる時の記述で間違えやすいこと

CSSで複数のセレクタ名を並べる時の記述で、要素名(タイプ名)やクラス名やID名の間に「半角スペース」を入れたり、入れずに詰めたり、「 , ( カンマ ) 」を入れたりと、いくつかの記述方法があります。 ここは間違えやすいところでもあるので、ミスしがちな …

文字に影をつける

文字に影をつけるCSSはよく使うので、とくに使用頻度の高い3パターンのコードをまとめておきます。 「text-shadow」プロパティの使い方 【 3パターン 】 文字(テキスト)に影をつけるには、「text-shadow」プロパティを使います。 記述のしかたは以下のような…

ホバーエフェクト制作の際に参考にしたい記事

ここに挙げた3記事だけでも、色々なデザイン レイアウトに使えそう。 ワンポイントに使えるCSS3マウスオーバーアニメーション5種 | webOpixel 5種類だけだけど、どれも汎用性が高い &amp;amp;amp;amp;lt;a href="http://www.webopixel.net/html-css/831.html…

文字は透過せず、背景のみを透過する方法

要素の透明度を指定する際には、「opacity」プロパティを使用する。 透明度は、0.0(完全に透明)~1.0(完全に不透明)の数値で指定していく。 ただ、「opacity」を使った場合は、重なっている文字や子要素まで一緒に(オブジェクト全体が)透過されてしまう…

Webデザインスキル強化計画 【 演習課題13 】

***** 演習課題-13***** 《html》<html><head><meta charset="utf-8"><title>課題-13</title><link rel="stylesheet" href="kadai-13.css" madia="all"></head> <body> <div id="container"> <div id="content"> <div id="nav"> <ul> <li id="Information"><a href="#"><span>Information</span></a></li> </ul></div></div></div></body></html>

Webデザインスキル強化計画 【 演習課題12 】

***** 演習課題-12 ***** 《html》<html><head><meta charset="utf-8"><title>課題-12</title><link rel="stylesheet" href="kadai-12.css" madia="all"></head> <body> <div id="container"> <div id="header"> <img src="images-12/logo.gif" alt="サンプルスタイルシートカンパニー"> </div> <div id="nav"> <ul> <li id="top"></li></ul></div></div></body></html>

Webデザインスキル強化計画 【 演習課題11 】

***** 演習課題-11 ***** 《html》 <html><head><meta charset="utf-8"><title>課題-11</title><link rel="stylesheet" href="kadai-11.css" madia="all"></head> <body> <div id="container"> <div id="header"> <h1>Cafe de la plante</h1> <h2>サブタイトルサブタイトルサブタイトル</h2> </div></div></body></html>

Webデザインスキル強化計画 【 演習課題10 】

***** 演習課題-10 ***** 《html》 <html><head><meta charset="utf-8"><title>課題-10</title><link rel="stylesheet" href="kadai-10.css" madia="all"></head> <body> <div id="container"> <div id="header"> <h1>Typograpy.71</h1> </div> <div id="nav"> <ul> <li><a href="#">HOME</a></li> <li><a href="#">…</a></li></ul></div></div></body></html>

Webデザインスキル強化計画 【 演習課題9 】

***** 演習課題-9 ***** 《html》<html><head><meta charset="utf-8"><title>課題-9</title><link rel="stylesheet" href="kadai-9.css" madia="all"></head> <body> <div id="container"> <div id="header"> <div id="sub-header-1"> <h1>Computer Technology Groups</h1> </div></div></div></body></html>

Webデザインスキル強化計画 【 演習課題8 】

***** 演習課題-8 ***** 《html》 <html><head><meta charset="utf-8"><title>課題-8</title><link rel="stylesheet" href="kadai-8.css" madia="all"></head> <body> <div id="container"> <div id="header"> <img src="images-8/p_mystery.jpg" alt="メインロゴ" width="195" height="102"> <div id="main-title"> <h1>…</h1></div></div></div></body></html>

PAGE TOP