[CSS]エレガントからレトロまで、text-shadowを使った美しいエフェクト集
text-shadowを使った美しい4種類のエフェクトを紹介します。 エフェクトはCSSのみで、もちろん画像は使っていません。 HTML <h1 class="elegantshadow">Elegant Shadow</h1> CSS まずは、各見出し共通のスタイルシートから。 h1 { font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif; font-size: 92px; padding: 80px 50px; text-align: center; text-transform: uppercase; text-rendering: optimizeLegibility; } Elegant Shadow用のスタイルシートです。 .eleg
[JS]シンプルなHTMLでレスポンシブ対応のスライダーを実装する超軽量のスクリプト -Unslider
シンプルなHTMLでレスポンシブ対応のスライダーを実装する超軽量のjQueryのプラグインを紹介します。 デスクトップのキーボード操作やスマフォ・タブレットのスワイプ操作にも対応！ Unslider Unslider -GitHub Unsliderの特徴 Unsliderのデモ Unsliderの使い方 Unsliderの特徴 超軽量のオープンソース スクリプトは3KBと超軽量のオープンソースです。 実装は簡単でクリーン HTMLは非常にシンプルで、カスタマイズも容易です。 高さの調整 サイズに合わせて、スライダーの高さを自動調整します。 レスポンシブ対応 デスクトップ・タブレット・スマフォなど、さまざまなデバイスに対応。 キーボード操作の対応 キーボード（矢印キー）での操作をサポートします。 スワイプ操作の対応 jQuery.event.swipeをサポートしているので、スワイプ操作に
ECサイトにおける考えるべきユーザビリティ9ヶ条 ｜https://wp.yat-net.com/name
ECサイト、ネットショップにおいて考えておくべきユーザビリティを9つピックアップしました。もちろんこれが全てではありませんし、サイト設計の上ではもっともっと細かく考えることはたくさんあります。今回はコンバージョンを下げない、直帰率を下げないために施策する場合に何をするか？を簡潔にまとめています。他のネットショップを運営されている方がどういう事をされているかも凄く気になりますね。 1.ロゴはHOMEへ ロゴをクリックすればトップページへ行くという認識を持たないユーザーは沢山います。トップページへ行くためのボタンは別途用意し、そういったユーザーへのフォローも施策しておく事が大切です。 リンク時における色を変更し統一することでユーザビリティは確保ます。しかし、ブラウザのデフォルトである青色に下線と言ったルールを採用することで、より多くのユーザーに対してそれがリンクであると言うことを認知してもらい
Photoshopのシェイプでできること。
PhotoshopをWebデザイン制作として使ってると、画像を編集する事よりも、シェイプを使って図形を描く事の方が多い気がします。Illustratorで描くのと違って、ピクセル具合も気にしながら描けるので、小さいアイコンなんかはPhotoshop上で作った方がきれいに描けたりします。それでいてパスなので、拡大しても劣化しないし、ダブルクリックでカンタンに色を変えられるし、もちろんIllustratorでも使い回せるし、いろいろ重宝ポイントがあるんです。 そんな万能シェイプの機能や特長について、個人的なまとめです。 ※この記事では、主にPhotoshop CS4を使っていますが、Photoshop CS6との違いも、分かる範囲で注釈入れてます。 ※OSはMac OS X 10.6 Snow Leopardを使ってますが、Mac OS X 10.8 Mountain Lionとの違いも、分か
Photoshopの効率化になるショートカットキー一覧とカスタム方法【2022年最新】 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーの王です。ぼくは普段Photoshopを使うとき、極力ショートカットを使っているショートカット野郎です。 英語で言うところの「ショートカット」は、「近道」を表しているというのはみなさんご存知ですよね。方向音痴の方は別として……近道があれば、誰しも遠回りしようだなんて思わないはずです。 今回は、Photoshopの作業効率化におすすめのショートカットを一挙に紹介します。前半では基本のショートカットキー、後半ではプロ向けに選んだ意外と知られていない隠れショートカットも紹介しているので、ぜひ実践してみてください。 macの場合とWindowsの場合それぞれで記述しているので、該当する欄をご確認ください。 「ググってわからないこと」が一瞬で解決するかも？ Webデザインを効率的に学びたい、転職・就職を目指している、誰かに教えてもらいたい……という方は、「スクールでの勉強」もお
美しいWebデザインをタイプ別に！見ないと損するパーツ別ギャラリーサイトまとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
中型ライダー（二輪）免許を持っているライターの内藤です。 本日は、ライダーキック並みの強烈さで役に立つ見本サイトをまとめてみたいと思います。 Web屋さんはご存じの方も多いかもしれませんが、ブログをしている一般の方、Webデザイン・DTPに興味のある方、お店を持っている方なども必見です！ 部品に特化した見本 部品に特化した見本サイトをご紹介します。 見出しデザイン（h1,h2,h3……その他DTPでも） はじめは見出しデザインに特化した見本サイトまとめ。 見出しデザイン.com http://midashi-design.com/ 見出しタグ（h1,h2,h3……）のデザインの見本ですが、DTPなどでもヒントになるものがたくさんあります。 カテゴライズは、グラデーション・テキストのみ・テキスト非画像・上線・下線・丸・四角・囲み線・斜線・点線・角丸。 ヘッダー部分に凝っても見出しが適当だと全
麻布中学「ドラえもん問題」の真相 （プレジデントファミリー） - Yahoo!ニュース
受験生だけでなく、大人までも悩ませた「ドラえもん問題」。あなたは正解できますか？ 「ロボットだから」では0点です。 「な、なんだ、コレは!?」 さぞかし受験生は面食らったことだろう。それは問題用紙の4ページ目に印刷されていた。問題用紙を開くと突如としてネコ型ロボット・ドラえもんの挿絵が出現するのだ。 設問文の要旨はこうだ。＜「ドラえもん」がすぐれた技術で作られていても、生物として認められることはありません。それはなぜですか＞ 選択式の問題ではない。解答用紙には空白の記述欄のみだ。 この御三家・麻布中の入試で今年出題された理科の問題が、ネットや新聞で取り上げられ、大きな話題となっている。 私立中学の入試問題で、アニメなどの題材から出題されることは時々ある。しかし、今回はその知名度において比類のないドラえもんだ。ネット上では「答えが明確に出ない出題は不適切」といった批判や、ストーリー
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
