1514/8月
css3-logo

文字を斜めに傾ける

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

1414/8月
css3-logo

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

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

0614/8月
css3-logo

画像ホバーした時、半透明の白色レイヤーをふわっと乗せる

画像ホバーした時、半透明の白色レイヤーをふわっと乗せる設定についてのまとめです。 やり方は色々あると思いますが  この記事で紹介するのは、まず背景を白色に設定してから画像の透明度をつけることで白いレイヤーをふわっと乗せたような効果をつける方法です。 画像ホバーした時、半透明の白色レイヤーをふわっと乗せる 1. aタグRead More…

1814/4月
f:id:ooigawa-bitter-sweet:20150216185155j:plain

【 Chromeトラブル 】画像が表示されない場合の対処法

サイトを編集中に、画面の一部の画像が表示されないという現象が起きたので、この際の対処法についてをまとめておこうと思います。 使用している環境 ・機種は、sony VAIO ・使用ブラウザは、GoogleChrome ・OSは、Windows7 ・メモリ 8GB 画像が表示されない場合、大概  以下のようなことが原因になっているRead More…

1514/3月
input-output

「インプット」と「アウトプット」

「 脳は、情報を入れ込む ( インプット ) よりも、その情報を何度も使ったり出力する ( アウトプット ) ことで鍛えられる 」 ということが脳科学でも明らかになっています。 ここからいえることは、アウトプットを前提にしたインプットが重要であるということ、その意識がインプットの質をより高めることができるということ。 また逆に、インプットを前提にRead More…

1714/2月
css-generater-image

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

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

0814/2月
jquery-11

【TIPS】画像をオーバーレイで表示する「LightBox」プラグイン

「LightBox」プラグインはプロトタイプで動いているものが多いらしいけど、ここで紹介するものはJQueryで実装するもの。 手順は、ダウンロードしたファイルからスクリプトを任意の箇所に設置し、対象となる画像にタグを指定すれば完了。 以下、手順の詳細 画像をオーバーレイで表示する「LightBox」プラグインの設定 1. LightBRead More…

0213/12月
jquery-10

「FlexSlider」を使用して複数の画像をスライドショーさせる

「FlexSlider」を使用して複数の画像をスライドショーさせる手順をまとめておきます。 「FlexSlider」を設置する際に行なう作業は、以下の三箇所です。 ● htmlのhead内にJQuery本体と各ファイルを読み込ませる。 ● htmlのhead内にスクリプトを記述する。 ● body内にあるスライドショーをさせたい要素に「classRead More…

2813/11月
jquery-6

画面をスクロールさせて、指定した要素がトップの位置に来た時に固定表示させる方法

画面をスクロールさせて、指定した要素がトップの位置に来た時に、トップに固定表示させる方法をまとめておきます。グローバルナビやサイドバーをはじめ、ページ途中にある要素を固定配置させたい時に便利です。 作業内容は以下の三箇所です。 ● htmlのhead内にjQuery本体と各ファイルを読み込ませて、スクリプトを記述 ● bodyRead More…

2813/11月
fudemoji-capture

「 パンダカフェ 茶の花 」

「 パンダカフェ 茶の花 」サイトのタイトル用に書いたもの。 http://ooigawa.bitter.jp/panda-cafe/index.html 関連記事 galleryカテゴリの他の作品 「温故知新」ワードプレスサイトのトップ画像用に書いたもの。 「茶の花」「大感謝祭」「彩食健美」3作品をまとめたもの ポートフォリオのタイトル用に制作Read More…

2713/11月
fudemoji-capture-haru-ran-man

「 春爛漫 」

「 ご宴会予約用チラシ 」の制作。 関連記事 galleryカテゴリの他の作品 「温故知新」ワードプレスサイトのトップ画像用に書いたもの。 「茶の花」「大感謝祭」「彩食健美」3作品をまとめたもの ポートフォリオのタイトル用に制作ポートフォリオのビルボード用に書いたもの。 「 パンダカフェ 茶の花 」「 パンダカフェ 茶の花 」サイトのタイトル用にRead More…

2613/11月
fudemoji-capture-kanburi

「 寒ぶりづくし 」

イベント誘致用のチラシの制作。 関連記事 galleryカテゴリの他の作品 「温故知新」ワードプレスサイトのトップ画像用に書いたもの。 「茶の花」「大感謝祭」「彩食健美」3作品をまとめたもの ポートフォリオのタイトル用に制作ポートフォリオのビルボード用に書いたもの。 「 パンダカフェ 茶の花 」「 パンダカフェ 茶の花 」サイトのタイトル用に書いRead More…

2513/11月
fudemoji-capture-saishoku-kenbi

「 彩食健美 」

新店舗オープンの集客用のチラシの制作。 関連記事 galleryカテゴリの他の作品 「温故知新」ワードプレスサイトのトップ画像用に書いたもの。 「茶の花」「大感謝祭」「彩食健美」3作品をまとめたもの ポートフォリオのタイトル用に制作ポートフォリオのビルボード用に書いたもの。 「 パンダカフェ 茶の花 」「 パンダカフェ 茶の花 」サイトのタイトルRead More…

2213/11月
new-kanshasai-poster-3【完成形】

「 大感謝祭 」

大感謝祭用のチラシの制作。 関連記事 galleryカテゴリの他の作品 「温故知新」 ワードプレスサイトのトップ画像用に書いたもの。 「茶の花」「大感謝祭」「彩食健美」 3作品をまとめたもの ポートフォリオのタイトル用に制作 ポートフォリオのビルボード用に書いたもの。 「 パンダカフェ 茶の花 」 「 パンダカフェ 茶の花 」サイトのタイトル用にRead More…

1513/11月
jQuery

JQueryを使うための準備をする

JQueryを使うための準備についてをまとめておきます。 手順は以下のようになります。 1  スクリプトを動かすために必要な JQuery のファイル( 本体 )をhead 内に設置する。 2  プラグイン本体を設置し、色々なスクリプト(実行コード) を書いていく。 1.  まずはスクリプトを動かすために必Read More…

2013/10月
css3-logo

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

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

1213/10月
rifrect

リフレクトツールの使い方

PICK UP TIPS記事セレクション 【TIPS|筆文字デザイン作成】自作の筆文字をデータ化する方法表現の幅を一層広げる筆文字のデザインは日常の様々な場面で目にするようになりました。例えば、「社名ロゴ、店舗ロゴ」「webサイトや番組のタイトル」「広告やチラシ」「看板、のれん」「メニューや商品のロゴ」「名刺」… 画像ホバーの際アニメーRead More…