My Vector Space

  人生は寄り道してなんぼ

HTML / CSS

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

アニメーションしながらスライダー&ズーム表示する「ズームスライダー」。 demo まずはhtmlファイル内にCSSファイルとJSファイルをリンクさせる まず、外部ファイル(http://tympanus.net/codrops/2015/07/06/zoom-slider/)をダウンロードして「style.css」「…

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

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

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

CSSだけで表現できる「LIGHT BOX」です。 記述の手順は、http://tympanus.net/codrops/2011/12/26/css3-lightbox/からソースをダウンロードし、対象とする画像の<img>タグにコードをつけたして、あとはパターンごとの個別のCSSをリンクさせるという流れ。 …

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

画像を4枚のパネルに分割してエフェクトをかけたスライダー4パターン。 まず、共通のhtmlを記述。 画像内のテキストは、<div class="cr-titles">のタグ内で書き換える。 【 html 】 1 <div class="container"> 2 <section class="cr-container"> 3 <input id="select-img-1" name="radio-set-1" type="radio" class="cr-selector-img-1" 4 checked/> 5 </section></div>

【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 </noscript> 7 </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アニメーションで様々なキャプションを表示するスタイルシート。 もくじ ・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パターン。 基本的にどのパターンで実装する場合でも、ダウンロードした外部ファイル(https://github.com/brunodsgn/incontent)の中にあるCSSファ…

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

サムネイルプレビュー付きスライダー。 demo 記述はまず、対象とする<img>タグにhtmlタグを追加してから、ダウンロードした外部ファイル(http://tympanus.net/codrops/2011/01/19/sweet-thumbnails-gallery/)のCSS、Javascript、JQueryをリンクさせる、と…

CSS3のtransformで、文字を変形させる

CSS3のtransformで文字を変形させる WEB上で縦横比を無視して 文字の形を変形させるには、CSS3のtransform プロパティを使う。 transformプロパティの値に「scale」という値を指定して、CSSソースを以下 のように記述

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

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

CSSが効かない!!ときのよくありがちなミス まとめ

CSSが効かない時に考えられること ● タグの前後や間に全角スペースが入っている ● セミコロン ( ; ) の記述なし ● 単純にスペルミス ● CSSの優先順位がおかしい ● class名 id名が数字で始まっている ( もしくは数字のみ ※機械は数字で始まるものに対して、名…

CSSだけで改行する方法

とあるプラグインを設定した際、どうしてもブラウザ表示で改行させたい部分があり困っていました。 とくに致命的な問題ではないですが、やはり見やすさ レイアウトを考えるとだいぶ印象が違ってくるので、どうしても直したい部分です。CSSはいじれるがhtmlが…

CSS3のtransformで文字を斜めに傾ける

CSS3のtransformプロパティを使って対象物を斜めに傾けることができる。テキストだけでなく、画像に対しても適用可能。transformプロパティの値に「rolate」という値を指定する。 htmlとcssの記述例は以下になります。 【 html 】 1 <ul> 2 <li>パスタ</li> 3 <li>カレー</li> 4 <li>牛</li></ul>…

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

まずは、もとの色を設定 【 CSS 】 1 #sample{background-color:#000000; 2 width:○○○px; 3 height:○○○px; 4 } 次にマウスオーバーした時の色とエフェクト効果を設定 【 CSS 】 1 #sample{ 2 background-color:#ffffff; 3 } 4 5 #products-box::before, 6 #p…

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

背景を白にして、画像の透明度を変えていくという設定です。 まずaタグにid名をつけてこの設定 【 CSS 】 1 #sample-anchor{ 2 background-color:#ffffff; /*背景に白を設定*/ 3 display:block; /*ブロック化*/ 4 width:○○○px; 5 height:○○○px; 6 } 次に対象…

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

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

positionプロパティの使い方

positionプロパティの使い方 positionプロパティについて positionプロパティは、ボックスの配置方法を決めるプロパティで 4つの値を指定できる。 ・static ( 通常配置 ) ・relative ( 相対配置 ) ・absolute ( 絶対配置 ) ・fixed ( 固定配置 ) positionプ…

htmlで1つの要素にclass名を複数指定する時の記述方法

htmlタグのある要素に、CSSを適用するためにclass名を指定する際、class名は複数指定することができる。 その際のhtmlとCSSの記述方法について htmlの記述方法 【 html 】 1 <div class="sample1 sample2"> 2 <p class="sample3">サンプルテキスト</p> 3 </div> 指定したクラス名の後に 半角スペースを入れることで、複…

テキストに色々なパターンの影をつける方法 「text-shadow」プロパティ

文字(テキスト)に影をつけるには、text-shadowプロパティを使う。記述のしかたは、text-shadow{x軸,y軸,ぼかしの度合い,影の色}を指定していきます。 使用頻度の高い3パターンを例にしてみます。 オーソソックスな黒い影 【 完成画像 】 【 CSS】 1 p{ 2 te…

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

ここに挙げた3サイトだけでもあらゆる設計ができそうです。 ワンポイントに使えるCSS3マウスオーバーアニメーション5種 | webOpixel 5種類だけだけど、どれも使い勝手ありそう &amp;amp;amp;amp;amp;lt;a href="http://www.webopixel.net/html-css/831.htm…

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

文字は透過せず、背景のみを透過する方法 「opacity」を使うと、重なっている文字まや子要素まで一緒に透過されてしまう。 だから テキストはそのままで背景だけを透過させる場合はopacityではなく、 background-colorプロパティに対して rgba を指定する。 …

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