投稿者: 森島

Webデザイン

水彩のデザイン素材 7点

練習も兼ねて、水彩のデザイン素材を作ってみました。 photoshopで作りました。商用可です。 ダウンロードはこちらから ピンクの丸 青い丸 みどりの丸 コーヒー豆 グルメなかんじ 歯医者

マークアップ

まだ必要?ベンダープレフィックスまとめ

日々めまぐるしく進化していくWeb技術。Webブラウザ達もアップデートを重ねるごとに便利になっていきます。 数年前はFirefoxやChromeで必須だったベンダープレフィックスも、そろそろ必要ないものもでてきているのではと思い、勉強も兼ねて改めて調べ直してみることに。 ※下記は全て2016年07月12日時点のものです。 opacity まずは簡単なのから。懐かしいですね。IE8の全盛期、悩まされたものですね。 過去のIE達に特別に対応するのでなければ、ベンダープレフィックス […]

マークアップ

【 content:attr() 】CSSでタグのdata属性やtitle属性を取得して表示する

CSSの、 :after 疑似要素で同時に使用される content プロパティ。 「content:attr();」という記述でそのタグのhref属性やtitle属性が取得できます。応用すればjsやPHPと絡めて動的で様々な使い方ができるなと思い、簡単にどんなことが可能か試してみたいと思います。 基本の使い方 これは色々なサイトで紹介されていますが、基本の使い方です。 aタグのhref属性をattrで取得し、リンク先URLを表示してみます。 HTML CSS 表示結果 ・C […]

マークアップ

【CSS】マウスオーバーで画像がニュッと拡大するエフェクトをつける

口で説明しづらいのですが、最近よく見かけるこれです。 ↓ マウスカーソルあわせてみてください。 マウスオーバーのエフェクトなので、スマフォからは見れませんが、PCでマウスを乗せるとボタンの画像がニュッと拡大するエフェクトがついています。jsかと思いきや、CSSでも簡単に付けることができます。 ざっくり説明すると、ニュッとしたい画像をdivなどでくくって、「:hover」した際に画像のscaleを大きくするという手順です。 HTML CSS 親要素のdivには overflow […]

Webデザイン

【CSS】Webでマルチカラムレイアウトが可能に

雑誌の組版でよくある、マルチカラムレイアウト。Illustratorなどではテキストボックスを2つ作ってスレッドテキストリンクという機能で繋げれば、長い文章は自動で次のカラムへ文章が送られます。 Illustratorのスレッドテキストリンク機能。文章が隣のカラムに送られているのが分かります。 今までWebでは、文章は手動でカラム分けしなければいけなかったのですが、なんと気が付いたらCSSでマルチカラムレイアウトの設定が可能になっていました。 対応ブラウザ おなじみの Can […]

Webデザイン

(DTP)2色分解画像のつくりかた

特色印刷ってご存知でしょうか。 通常の印刷ではCMYKの4色のインクを使用しますが、それ以外にも様々なインクの種類があります。 DICやPANTONEなどのインクを「特色」と呼びます。蛍光インクや白インクなんかも特色ですね。CMYKの4色では出せない風合いの色味が出せたり、面白い仕上がりになります。 そしてこの印刷手法、ものによってはインク代の節約になったりします。印刷所さんで取り扱いがあるか確認は必須ですが、単純に4工程になるCMYKより、2工程で済む方が手間もインクの量も […]

Webデザイン

また新しくなったGoogle MAP、埋め込み表示の縮尺を変更する

Google MAPのインターフェースが一新されたのも記憶に新しいかと思います。その後も各種機能がハンバーガーメニューになったりと、度々変更が加えられておりましたが、気がつくと、GoogleMAPの「マップの埋め込み」機能も少々勝手が変わっていました。 URLが見慣れない形に 通常のGoogle MAPを開き、住所や建物名で検索し、「共有」から「地図の埋め込み」でマップを自分のサイトへ張るためのソースコードが取得出来ます。ここまでは今まで通りですね。 下記は当社の位置表示なの […]

マークアップ

Chromeでpage-breakが効かない

今回は印刷対応 print.css について。 Webページを印刷する際、地図や図版が紙面の途中で切れて印刷されないように、CSSの「page-break」を設定すると改ページを行うことができるのですが、これがどうしてもChromeで効かない現象が起きます。page-break-after、page-break-before、どちらにも共通して行える対策なので、一度試してみて下さいね。 現象が起きるHTMLデモ 現象を確認できるHTMLを用意しました。画面右部の「コンテンツ」 […]

Webデザイン

様々な雰囲気を演出する活字風文字の加工チュートリアル

今回は活字風の文字の加工を行うチュートリアルです。エッジに潤いのある加工で、シリアスな雰囲気を出したい、温かみを出したい、様々な雰囲気の演出に使用できます。 ビットマップデータのみで良い場合は、photoshopだけで済みます。パスデータにしたい場合は、Illustratorでひと手間加えると綺麗なパスが出来上がるので試してみて下さいね。 手順 ざっくり説明すると、以下のカンタン4手順。 ・文字ツールで文字を作成 ・文字をラスタライズ ・フィルタ効果:はね ・フィルタ効果:ス […]

マークアップ

【怖くないJavaScript + jQuery】if文のいつもと違った使い方

今回は、条件分岐について。 条件分岐と言えば、if文で書いてしまうのが一番シンプルな形ですが、今日はいつもと少し違った使い方をご紹介します。 まずクリックするとランダムで値を吐くボタンを作ります。 ▼ボタンをクリックすると0~100までの点数が表示されます。 クリック 例えば、この結果に応じて下記のコメントを表示させるとします。 ・0~29点の場合は”初心者” ・30~49点の場合は”中級者” ・50~79点の場合は&#8221 […]

マークアップ

【怖くないJavaScript + jQuery】要素の数に合わせて値を自動で付与する

今回は、要素の数に合わせて値を自動で付与します。例えばliの数を数えて、widthを割り振ったりなど様々な事に応用が可能です。CMSが入っていて要素の数が可変の際、「要素を数える」という処理を行ってみましょう。 デモはこちら まず下準備 まずこちらはいつも通り、必要なファイルを読み込みます。 headerの中に、jQueryと、自分で作ったjavascriptのファイル(今回は count.js とします)を読み込みます。 Step2:次にHTMLの準備 今回は、全体を囲むd […]

マークアップ

【怖くないJavaScript + jQuery】画像の縦横比を保ったままサイズを変更する処理

画像の縦横比(アスペクト比)を保ったまま、サイズを変更したい。「印刷対応が必要な場合」「常にwindowサイズ-150pxで拡大表示したい場合」など、訳ありでとあるサイズにjsで拡大縮小する処理を紹介します。 下準備 jQueryと、自分で作ったjavascriptのファイル(今回は aspct.js とします)を読み込みます。 縦横比を調べるには? 画像の縦横比を調べるには、当たり前なのですが、画像の横幅と縦幅を取得して「横幅÷縦幅」の計算をすれば簡単に割り出すことができま […]

マークアップ

【怖くないJavaScript + jQuery】デバッグのススメその2 ~デバッグクイズ:初級編~

明けましておめでとうございます。本年もどうぞよろしくお願い致します。 皆様仕事始めも無事迎えられたようで、如何お過ごしでしょうか。週も半ば、エンジンはかかりましたでしょうか。渋谷は生憎のお天気ですが、今日も張り切って参りましょう。 さて、今日は前回に引き続き、javascriptのデバッグについて書いていきたいと思います。 デバッグのやり方は分かったはいいものの、実際にやってみないとどんな風に使うものかピンとこないと思います。今回はクイズ形式で見て慣れていってもらいましょう。 […]

マークアップ

【怖くないJavaScript + jQuery】デバッグのススメ ~なぜ動かないのか調べる~

jQueryのコードを見よう見まねで書いてはみるものの、動かず、そして結局諦める。初心者の方ならよくあることかと思います。今日は「なぜ動かないのか」を調べる方法を書こうと思います。デバッグの方法ですね。書いたコードのどこがおかしいのか調べて、直してみましょう。 方法は2つ デバッグの方法ですが、2つあります。アラートで出してしまうか、コンソールを使用する方法です。私は、一か所だけちょっと調べたい時とかはアラート、複数個所あったりする時はコンソール、と使い分けています。  01 […]

マークアップ

【怖くないJavaScript + jQuery】SVGデータを使用しての処理

今日はSVGデータを使用してアニメーションさせてみましょう。 SVGデータとは何かといいますと、端的に言うとXML形式で書かれた画像です。 SVGの基本 例えばこのSVGデータをテキストで開くとこんなかんじ。 イメージマップのように頂点の座標が数値で記述されています。 テキストで描画情報を持った画像ってところでしょうか。ベクトルデータなので拡大縮小してもボケることはありません。 pointsの部分、頂点の座標をちょっと増やしてやると、簡単に移動させることができます。 ↓ この […]

マークアップ

【怖くないJavaScript + jQuery】new Date()で日付を動的に書きだしてみる

毎度おなじみ怖くないシリーズです。そろそろ年の瀬ですし、カウントダウンとか作って遊びたくなりますね。 今日はnew Date()を使用して、日付で遊んでみましょう。 日時取得の基本 new Date()を使用すると、現在の日付時刻を取得することができます。 始めの日時の値は「 Fri Dec 04 2015 11:24:37 GMT+0900 」といった形で取得されます。 そこから「年だけ」「年と月だけ」と必要なデータだけ抜き出していきます。 Step1:まず下準備 まずいつ […]

マークアップ

【怖くないJavaScript + jQuery】ウィンドウサイズに合わせてメイン画像のサイズを変えたい

毎度おなじみ、[怖くないJavaScript + jQuery]シリーズです。 かゆい所に手が届くような、ニッチなjsをどんどん作っていきたいと思います。 「今回はウィンドウサイズに合わせてメイン画像のサイズを変えるjs」を作ります。 ファーストビューは維持したいんだけどメイン画像はウィンドウサイズに合わせて大きく取りたいと要望があった時には最適です。ウィンドウをリサイズした時の処理も入れて行きます。スマホにもちょっとだけ配慮します。 仕組みとしては、全体のウインドウのhei […]

Webデザイン

気になって仕方がないこと 1コマ日記

素敵な若いお嬢さんのメガネケースに「うなぎの蒲焼き」シールが貼ってあるとは思いませんでした。 どうしてなんでしょう。とても気になりました。 なんとなく入ったコーヒーショップで何か面白いことがあると少し楽しい気持ちになりますね。 ちなみにこの「うなぎのかば焼き」シール、調べてみると1冊500枚入りで1000円くらいで購入できるようです。 販促シール専門店と言うサイトを見つけたのですが、眺めているとなんだか不思議な気持ちに。自分に全く縁の無いちょっと変わったサイトを眺めていると楽 […]

WordPress

【WordPress 管理画面】一覧画面の一括操作「編集」を消したい

本日はWordPressの管理画面カスタマイズについて。 一つだけどうしても消せなくて悩んでいたのが、投稿一覧画面にある一括操作の「編集」操作。 この編集操作、適用して使用すると一覧画面でタグやカテゴリ作成者コメント果てはフォーマットまで様々なステータスを編集することができますが、何か一つでも使用して欲しくないものが含まれている時、絶対に触ってほしくありません。もうできれば存在に気付かないで欲しい。 CSSで消せばいいやと思っていたのですが、Safariでoptionタグにd […]

Webサイト制作

Sass導入後「.scss」ファイルのDreamWeaver対応がうまくいかない→原因はWindowsのUAC?

先日、いつ案件が舞い込んでも大丈夫なようにと試しにSassを導入しました。 参考にさせて頂いたのはこちらの記事。Sassについて詳しくは下記記事をご覧ください。 参考URL:これからSassを始めたい人へ!導入手順をまとめてみた(Dreamweaver対応) | 株式会社LIG 何回やってもDreamWeaverで有効にならない そこで導入していてつまずいたので、メモのエントリ。 Sassのデータは「.scss」という拡張子なのですが、.scssはDreamWeaverに対応 […]

Webデザイン

からあげクン 1コマ日記

最近驚いたこと。 最近驚いたことです。 からあげクンって1986年にできたんですね。なんと今年で29歳。 当社のエンジニアさんに教えてもらってから、心の中でからあげ先輩と呼んでいます。 オフィスの近くにローソンがあり、毎日通っています。ローソンのからあげはとても好きです。 からあげクンだと昔あった桃味とオリーブ味が好きでした。 からあげクンをとりあげた専用のサイトまであるようです。 カラフルでかわいらしい。 「からあげ王国」 そしてなんと1000個に一個くらいの確率で、レアな […]

マークアップ

【怖くないJavaScript + jQuery】マウスオーバーで注釈を表示させる

毎度おなじみ、[怖くないJavaScript + jQuery]シリーズです。 今回は、マウスオーバーで注釈を表示させるjsを作ります。 デモ 実際に動かしてみるとこんな感じになります。 ボタンにマウスを載せてみてください。 デモを別ページで開く ファイル一式ダウンロード Step1:まず下準備 こちらはいつもと同じですね。まず必要なファイルを読み込みます。 headerの中に、jQueryと、自分で作ったjavascriptのファイル(今回は tips.js とします)を読 […]

Webデザイン

夏のできごと 1コマ日記

本日の渋谷は雨。先週の陽気が嘘のように寒いですが皆様いかがお過ごしでしょうか。 最近の私はと言いますと、腰痛に悩まされています。オフィスでの座り仕事、職業柄なんでしょうか。 さて、今日はなんだかイラストが描きたくなったので、この夏起こったことを1コマ日記にしました。 ビットマップでの色塗りの作業も、たまにやると楽しいですね。

Webデザイン

文字装飾パターン集

バナーやキャンペーンの画像を作る際、ゴテゴテのグラデーションやテクスチャをふんだんに使った文字装飾、大変ですよね。 大体値段やキャンペーンの内容となると分かりやすく金赤やゴールドが使用されるので毎度毎度マンネリになりがちだったりします。 文字装飾のパターン第二弾で集めてみました。 第一段はこちら Fireworksで開いてコピーし、「Shift + Ctrl + Alt + V」の属性をペーストを行うとそのままご自分のデザインに反映できます。

Webデザイン

キャラクターを「見ないで書こう」

おはようございます。毎日暑いですが皆様いかがお過ごしでしょうか。 さて皆様、「見ないで描こう」という遊び、ご存知でしょうか。(他に正式名称あるんでしょうか。) 例えば、ガチャピン。スマホで検索してはいけません。頭の中にあるぼんやりとしたイメージを頼りに絵を描きます。 うろ覚えで出来上がった絵は何だかおかしくてちょっと楽しい、そんな遊びです。 ブログに何か絵を描きたいなと思って考えていたのですが、そういえばこの学生の頃流行ったなぁとこの遊びを思いだしたので、ちょっとやってみるこ […]

1 2 3 4 5 6 12