CSS フォーカスしたフォームにエフェクトを加えたいとき
お問い合わせ入力フォームや検索フォームなどで、フォーム欄にフォーカスした際に背景色を変えるなどのエフェクトを加えたいときには、疑似クラスの「:focus」を利用します。これは、「:active」や「:...
CSS 
CSS PDFファイルリンクにのみPDFアイコンを表示させる
前回、「外部サイトへのリンクにアイコンを付ける方法」をご紹介しましたが、今回は「PDFファイル」のように、拡張子が違うファイル「.pdf」のような場合にアイコンを変えて表示したい際の方法になります。こ...
ITEM logicool製キーボードのプリントスクリーンが効かないときの対処法
つい先日、logicool製のワイアレスキーボードを購入しました。そこですぐに気がついたのですが、プリントスクリーンが効かない！ ちょちょっと調べてみると「FN」キーと「Print Scr」キーを同時...
CSS 外部リンクにのみアイコンを表示させる
Webサイト内において、外部リンクがある場合、何の注意もないまま外部サイトへリンクしてしまうと、ちょっとした不安感を感じることがあります。そこで「このリンクは外部ページへ移動します。」ということが一目...
SERVICE とっても簡単に最大1GBをファイル共有できるサービス「OneTimeBox」
誰かとデータのやり取りをする際に、皆さんはどのサービスを使っていますか？良く利用するオンラインストレージサービスは、人それぞれ“用途”や“容量”によって異なってくるかと思いますが、その中でも極めてシン...
ブログ ウェブデザイン技能検定2級に合格しました！
今年の春に3級を受けて半年が経ちましたが、さらに一歩先へ進んでみようと思い「ウェブデザイン技能検定2級」を受けに行ってきました。3級よりもやはりハードルは少し高くなり、出題内容も新たなバージョンに関す...
SERVICE 好みの色合いの画像からカラーパレットを作成してくれる無料ツール「pictaculous」
Webサイトの色味を考えるときに、ベースカラーが「白」か「黒」か？メインカラーが「赤」か「青」か「ピンク」か？など、大まかなビジュアルカラーは決まりやすいものですが、補色的な位置づけの色味をどうしよう...
HTML faviconの設定方法
ブラウザのタブなどでよく見かけるマークのようなもの、通称「ファビコン」と呼ばれる画像ファイルを設定したい場合の方法をご紹介します。// // 指定方法はいくつかありますが、今回はルートディレクトリに「...
CSS テキストリンクをボタンのように配置したい
テキストリンクを配置したい場合に、デザイン的にリンクボタンであることを直感的に見せたい場合、背景のスタイルを指定して実現出来ますが、いくつか注意しなければならない点もありますので確認していきましょう。...
HTML 何故かページが文字化けしてしまう！？
Webページの文字コードを指定する方法にはいくつか方法がありますが、その指定方法を今一度確認しておきましょう。最も推奨されている文字コードの指定方法は、HTTPレスポンスヘッダー内にて指定する方法にな...
SERVICE これが無料？しかも商用利用可能！UNSPLASH
「mororeco」でもサンプルデータ等を作成するときに、無料の写真素材をよく利用させてもらっていますが、ほんとちょっとしたものを作りたいときに、せっかくなら格好良くてお洒落な素材を使いたいですよね。...
CSS CSSで画像にリボン装飾をする方法
ベクターデータなどで見かけるような「リボン」を、「NEW」などのアイコン的要素で画像にひっかけて表示しているサイトなどがあります。一般的にpng画像などで画像を作成し、position属性で絶対配置に...
Photoshop ベースラインJPEGとプログレッシブJPEGって何が違うの？
ファイル形式のひとつである「JPEG」ですが、“ベースラインJPEG”と“プログレッシブJPEG”というものがあるのはご存じでしょうか？Photoshopでは、画像を保存する際に、下図のような画面にそ...
CSS 特定の要素以外をフェードアウトさせる方法
ギャラリーページなどで、サムネイル画像の一覧を並べて配置する場合などに、ある特定の要素にマウスオーバーした際にちょっとした効果を付けてみたいと思います。ここでは、フォーカスの当たった要素以外を半透明に...