画像を4つのパネルに分割してエフェクトをかけたスライドショー3パターンのコードまとめ。 まず、ダウンロードした外部ファイルの中にある3パターン共通のCSSファイル(3ファイル)とJSファイル(3ファイル)を設定する。 【 html 】 1 <head> 2 <link rel=”stylesheRead More…
CSSで作るドロップダウンメニューのドロップ表示５パターンです。 コードの書き方は、どのパターンでも共通となるhtmlと CSSに加え、パターンごとに個別に設定するCSSを記述していきます。 共通部分になるhtmlとCSSを記述する まずは、共通部分になるhtmlを記述していきます。 【 html 】 1 <ul id=”Read More…
スクリプト不要で、画像ホバー時にCSS3アニメーションで様々なキャプション表示をする スタイルシート6パターン。 基本的にどのパターンで実装する場合でも、以下のサイトからダウンロードした外部ファイルの中にあるCSSファイルを一つ設置するだけでOK。 https://github.com/brunodsgn/incontent パターンごとに変えるRead More…
サムネイルプレビュー付きスライダー。 demo 記述の流れは、まず対象とする＜img＞タグにhtmlタグを追加して、以下のサイトから外部ファイルをダウンロードする。 http://tympanus.net/codrops/2011/01/19/sweet-thumbnails-gallery/ 外部ファイルの中からCSS、Javascript、JRead More…
はてなブログのデータをWordPressへ移行するまでの手順まとめ。 「 はてなブログ 」のデータを「 WordPress 」へ移行する手順 1. 「 はてな 」のデータをダウンロードする 「はてな」のデータをダウンロードするために、まずは設定画面を開く。 「 設定 」 → 「Read More…
WEB上で縦横比を無視して文字の形を変形させるには、CSS3のtransformプロパティを使う。 transformプロパティの値には「scale」という値を指定してコードを以下のように記述する。 【 CSS 】 1 transform:scale(x,y); 「x」には横方向の倍率を、「y」には縦方向の倍率を数値で記述する。 標準のサイRead More…
～CSSでリボンを作るまでの大まかな流れ～ まず、リボン風にしたい部分の要素をhtmlに設定。 そこに スタイルを適用させ、borderプロパティでリボンの影に見せる部分の三角形を作成し positionプロパティで位置の調整をしていく、という流れ。 まずは、htmlから 【 html 】 1 <div Read More…
CSSが効かないという状態になった時、以下のようなミスが原因になっていることが多いと思います。 ● タグの前後や間に全角スペースが入っている ● セミコロン ( ; ) の記述が抜けている ● 閉じカッコ ( } ) の記述が抜けている ● 編集したファイルを保存し忘れている ● 単純にスペルミスRead More…
ワードプレスのサイドバーのカスタマイズをしている際、とあるプラグインを設定したら、レイアウト上どうしても改行させて表示させたい部分なのに、プラグインなのでhtmlをいじれなくて どうすればいいか困っていました。 とくに致命的な問題ではないですが、やはり見やすさ レイアウトを考えるとだいぶ印象が違ってくるので、やはり直したいところです。 Read More…
CSS3の「transform」プロパティを使って対象物を斜めに傾けることができます。この指定は、テキストだけでなく画像に対しても適用できます。 CSSの記述は、transformプロパティの値に「rotate」という値を指定。 記述のしかたは以下のようになります。 記述のしかた rotate ( 回転Read More…
「マウスオーバーした時、背景カラーをふわっと変える設定」をまとめておきます。CSSで、元になる色と、マウスオーバーした時の色を設定するだけです。 以下で細かく見ていきます。 マウスオーバーした時、背景カラーをふわっと変える設定 1. もとの色を設定する まずは色を変化させる前の、元となる背景色を設定する。 【CSS 】 1 #sampRead More…
画像ホバーした時、半透明の白色レイヤーをふわっと乗せる設定についてのまとめです。 やり方は色々あると思いますが この記事で紹介するのは、まず背景を白色に設定してから画像の透明度をつけることで白いレイヤーをふわっと乗せたような効果をつける方法です。 画像ホバーした時、半透明の白色レイヤーをふわっと乗せる 1. aタグRead More…
ブラウザ上でプレビューを見ながら手動で設定できてコードも生成してくれるCSS3ジェネレーターを３サイトピックアップ。 ベンダープレフィックス付きで、コピペしてすぐに利用可能。 1. 「 CSS Generator 」http://www.css3generator.in/ ■ カスタマイズできるRead More…
「LightBox」プラグインはプロトタイプで動いているものが多いらしいけど、ここで紹介するものはJQueryで実装するもの。 手順は、ダウンロードしたファイルからスクリプトを任意の箇所に設置し、対象となる画像にタグを指定すれば完了。 以下、手順の詳細 画像をオーバーレイで表示する「LightBox」プラグインの設定 1. LightBRead More…
「FlexSlider」を使用して複数の画像をスライドショーさせる手順をまとめておきます。 「FlexSlider」を設置する際に行なう作業は、以下の三箇所です。 ● htmlのhead内にJQuery本体と各ファイルを読み込ませる。 ● htmlのhead内にスクリプトを記述する。 ● body内にあるスライドショーをさせたい要素に「classRead More…
PICK UP TIPS記事セレクション 【TIPS｜筆文字デザイン作成】自作の筆文字をデータ化する方法表現の幅を一層広げる筆文字のデザインは日常の様々な場面で目にするようになりました。例えば、「社名ロゴ、店舗ロゴ」「webサイトや番組のタイトル」「広告やチラシ」「看板、のれん」「メニューや商品のロゴ」「名刺」… 画像ホバーの際アニメーRead More…
文字に影をつけるCSSはよく使うので、とくに使用頻度の高い3パターンのコードをまとめておきます。 「text-shadow」プロパティの使い方 【 3パターン 】 文字(テキスト)に影をつけるには、「text-shadow」プロパティを使います。 記述のしかたは以下のような順序で記述していきます。 記述のRead More…
1 画面左側のツールアイコンの選択範囲ツールの中にある、「長方形選択ツール」を選ぶ。 2 対象となる画像を選択するか、角丸の形で切り抜きたい部分を選択。 3 画面上側の「選択範囲」から「選択範囲を変更」→「滑らかに」を選ぶ。 「半径」の数値を入力する。この数字が大きいほど角が丸くなRead More…
切り抜きの方法は色々ある中で、ＣＳ５から追加された「境界線を調整」という機能を使うと、切り抜きたい部分の境界線が複雑なものでもかなり正確に切り抜くことができます。 手順としては、切り抜きたい対象物を選択して「境界線を調整」という機能で微調整したら、新しいレイヤーで出力するという流れです。 以下で細かく見ていきます。 photoshopで画像をきれRead More…
CSSで複数のセレクタ名を並べる時の記述で、要素名(タイプ名)やクラス名やID名の間に「半角スペース」を入れたり、入れずに詰めたり、「 , ( カンマ ) 」を入れたりと、いくつかの記述方法があります。 ここは間違えやすいところでもあるので、ミスしがちな 3パターンの記述方法Read More…