2020年2月25日 CSS どのサイトでも見かけるテキストリンク。リンクのついたテキストにマウスオーバーすると文字色を変更する、というシンプルかつわかりやすい効果を実装しているWebサイトが多いかと思います。この装飾をもう少し変更できないかな？と思いCSSのみでプラスすることができるエフェクトをいくつか紹介します。 ↑私が10年以上利用している会計ソフト！ 目次 ちょっと予備知識 文字色をふんわり変える 背景色をふんわり変える 文字をぼかす 光を放つグロー効果 背景を角丸に レインボーカラーに 拡大・縮小 角度を変える くるっと回転 1. ちょっと予備知識 今回はjQueryなどのJavaScriptを使わず、CSSのみで実装できる小技を集めています。その中でどの小技にも採用しているのが transition プロパティです。transitionプロパティは、時間の変化を操作するもので、
独自視点で順番に特に意味はありません。 これから春に就職する方も、今も奮闘中の方も是非お勧めしたいデザイナー、Webデザイナー、デベロッパー向けの国内ブログのまとめです。 さらにそのブログの中でもおすすめの３記事をピックアップいたしました。お時間の有るときにでもどうぞ。 Webデザイナーなら知ってるでしょ？ １）Webクリエイターボックス 私のブログのデザインを作った人。世界を放浪しながらデザインを学んでいる。もっと手軽に楽しくWeb制作ができるようにみんなになってほしいをモットーにしているのでわかりやすい記事が豊富。 Facebookページの作り方 2012年1月版少しの手間で大きく変わる、細部にこだわったWebデザインを少しのコードで実装可能な20のCSS小技集 ２）Webデザインレシピ リファレンス的な分厚い記事が豊富。正直分厚い記事を書く人といえばもはやこの人しか居ないというくらい
最近スマートフォンサイトの案件が増えてきました。そこで、個人的によく使いそうなコードをEvernoteにまとめたりしていたのですが、 まだまだスマフォサイト構築のノウハウ記事も少ないですし、共有しておこうと思います。…最近スマートフォンサイトの案件が増えてきました。 そこで、個人的によく使いそうなコードをEvernoteにまとめたりしていたのですが、 まだまだスマフォサイト構築のノウハウ記事も少ないですし、共有しておこうと思います。 すべてのデモ（chromeなどのwebkit系ブラウザまたはスマートフォン実機でご覧ください） download ヘッダーの右にメニュー <h3>ヘッダーの右にメニュー</h3> <!--ヘッダーの右にメニュー--> <header class="header1"> <h1><a href="#"><img src="title.png" alt="SIT
こちらはヘッダー素材です。 そのままお使い頂いても良いですし ご自由にカスタマイズしてご利用下さい。 尚、元サイズは800-132となっておりますので 画像をクリックして元サイズでご確認下さい。
Free Icons無料のフリーアイコン Commercial Use商用利用も可能 Pixel Perfectピクセルに沿った高い明瞭性 Pixel & Vector画像とベクター形式 One Styleひとつのスタイルで迷わない Simple Designシンプルで飽きないデザイン エブリデイアイコンズは商用利用可能なアイコン素材を無料でダウンロードできる素材配布サイトです。このサイトで配布しているアイコンは、ウェブサイトやモバイルアプリ、グラフィックデザイン、映像など、あらゆるメディアで利用可能です。 Everyday Icons is a material distribution site where you can download icon materials for commercial use for free. The icons distributed on this
Androidと-webkit-tap-highlight-color Androidと-webkit-tap-highlight-colorの関係がよくわからず色々と悩んでいたのですが、ひと通りの結論が出たので紹介します。 そもそも-webkit-tap-highlight-colorってなによ iPhoneなどのスマートフォンでa要素をタップしたときにハイライトさせるプロパティです。ハイライトと言ってもiPhoneの場合は半透明のグレーのレイヤーが表示されるのですが。 サンプル このレイヤーの色を-webkit-tap-highlight-colorで制御することが可能です。 a { -webkit-tap-highlight-color: rgba(0,0,215,0.40); } このようにするとハイライトカラーが半透明な青色に変わります。 サンプル ただし、このように指定してもA
弊社代表の著書、「iPhoneとツイッターで会社は儲かる」の出版記念と、巷で話題の「基礎文法最速マスター」ブームに便乗して、iPhone（iPod Touch）向けサイト構築における基礎とプラス応用のネタと、参考になるリンク集をまとめました。 2010/11/18追記： iPhone向けサイト制作の書籍を執筆しました！ 既存のデスクトップ向けサイトをモデルにした iPhoneに最適化したサンプルサイトの紹介と コードの解説をしています。 iPhone向けサイト制作の入門書に最適です。 「HTML5＋CSS3で作る 魅せるiPhoneサイト」 基礎編 対象ブラウザはMobileSafariです レンダリングエンジンはSafariと同じwebkitですが、MobileSafariの方にはiPhone向けの一部独自拡張（CSS）があります。検証の際は、通常のSafariのウィンドウサイズを狭くし
カテゴリー別配色アイデア100配色によってそのデザインの印象は大きく変わると思います。色は大切な要素のひとつですね！ということで、色の持つ印象別に配色アイデアをずらりと並べてみます。配色はおなじみ（？）のCOLOURloversから、「これは！」と思うものを選ばせて頂きました。素敵な配色がいっぱいのこのサイト、ぜひ覗いてみてください！また、今回紹介するのはあくまで一例ですので、自分なりにアレンジしてみるのも楽しいと思います。サイトの雰囲気にあう配色を探してみてください。 配色に関するおすすめサイトCOLOURlovers色をテーマにしたコミュニティサイト、COLOURlovers。自分の考えた配色を登録したり、お気に入りの配色を保存しておくことができます。今回はこちらから配色アイデアを選びました。 ウェブ配色ツール Ver2.0以前「配色に自信がなくても！Web デザインが好きになる配色ツ
Twitter でアドバイス頂いことを下記にメモしておきました。個人的なメモですが公開しておきます。他にも情報があればコメント欄から情報提供頂けると幸いです。 また別途アドバイス頂いた情では御座いますが、本格的に作るなら携帯サイト コーディング&デザインを読むと良いらしいです。 現在は3キャリア GIF と JPEG を使うことができる 透過 GIF は OK GIF アニメは5コマまで Photoshop で書きだされる GIF89a で、アニメなし、インターレースなし、20KB以下なら問題が起きたことはない インターレースは一部機種不可、アニメは6コマ以上かつサイズが大きいとドコモ旧機種で問題有り Photoshop の「Web およびデバイス用に保存」の画面でインターレースとありますが、このチェックボックスのチェックは外す インターレース GIF はプログレッシブ JPEG (最初モ
DotsDomino home ドラフティングテープのテクスチャ、限界解像度で作った15個のPSブラシ Photoshopのブラシ 仮止めやマスキングに使われるドラフティングテープを高解像度のブラシにしたものですが、このサイズになると、面に与えるテクスチャとしてしても面白い効果があり、手でテープをちぎったときの形、テープの浮きや厚み、独特のシワシワはテクスチャとしても新鮮です。フリーダウンロードの Sticky Tape ブラシ（Photoshop）を紹介します。 最終更新 ( 2010年 4月 23日(金曜日) 03:22 ) 続きを読む... 生活感を撮影した10枚の布・織物テクスチャ、無料の高解像度Photo JPEG（.jpg）ファイルのテクスチャ素材 塗りにテクスチャをブレンドすると、より自然な質感と感覚をデザインに与えることができます。 ウール、綿、デニムジーンズなど
レンタルサーバなら「さくらのレンタルサーバ」！ 月額換算でわずか131円、缶ジュース1本分のお値段で使える格安プランから、ビジネスにも使える多機能＆大容量プランまで、 用途と予算に合わせてプランを選べます。 さらにマルチドメイン対応でメールアドレスも無制限。無料ウイルススキャンや無料電話サポートもあるので安心して ご利用いただける共用レンタルサーバサービスです。
クリエイティブなオフィスが掲載されているエントリーのご紹介。 こういうのみると、男ってバカだからなぜかやる気出るんですよねぇ。こういうところで働きたいっていうモチベーションがアップルするからでしょうか。 あいや、私だけかもしれませんが・・・。 続きを読む 2012/04/26(木) 10:10:44| デザインを学ぶ | トラックバック:0 | コメント:6 ロシアのアートデザイナー「Irina Vinnik」。 イリーナ氏はゲルペンを使ってファンタスティックなデザインを描かれています。今回、イリーナ氏のスケッチブック、及びカレンダーなどがまとめられていたのでご紹介。 フリーハンドとスケッチブックっていうのはなかなか味があって良いですよね。 続きを読む 2012/04/26(木) 10:01:17| デザインを学ぶ | トラックバック:1 | コメント:0
Windows 7やWindows VISTAでIE6/IE7/IE8/IE9を共存させる方法です。IE9はまだベータ段階ですが、周辺ツールも対応してきた頃なのでまとめてみました。 公式ブラウザの共存はできませんが、以下に示す方法で各バージョンの表示を確認することができます。最近はIETesterが主流になってきたようなので、そこを踏まえてます。 IETesterを利用＋IETesterでIE9を確認できるようにカスタマイズする 「Microsoft Expression Web SuperPreview for Windows Internet Explorer」と「Internet Explorer Platform Preview（「Internet Explorer 9 Platform Preview」）」を併用する IE9のブラウザーモードとドキュメントモードを利用する 以下、
「ピラティス」で心と身体を整えよう！ 突然ですが問題です。次の3人に共通することと言えば、何でしょう？ お分かりになるでしょうか？ 渡辺満里奈さん（1970年11月生、タレント） 米倉涼子さん（1975年8月生、女優） クルム伊達公子さん（1970年9月生、テニスプレーヤー） 3人とも美しい？ 芯が強そう？ おしゃれ？ たしかにそれもあるかもしれませんね。じつは、ご存知のかたもいらっしゃることと思いますが、この御三方は「ピラティス」と深い関わりをもった方々なのです。 ※：私の記憶違いでなければ、米倉さんと伊達さんはピラティスのインストラクターの資格を持っていらっしゃるはずです。 さて、そこで今回は、「なぜこの3人はいつまでもしなやかで美しく、均整のとれたスタイルを保っていられるのか？」と疑問をもっていらっしゃる方々のために、ピラティスをご紹介させていただきます。 そろそろ健康に不安を感じは
HTML5分かりにくいですよね。 初めまして。11月からME課で働いている久保田(@ta2_o2p)です。よろしくお願いします！ 自分の仕事としては、携帯サイト中心にコーディングを行っているのですが、BMKidsの縁起物と笑い袋の紹介ページのコーディングを行ったり、他にも色々とPCサイトのコーディングをしています。 さて、実はカヤックで働き始めてHTML5を本格的に触ったのですが、触れていくうちに「HTML5はややこしい所があるなー」と思い、この記事を書きました。 そういう訳で、HTML5でコーディングするに当たって間違いやすいポイントについて、書いていきたいと思います。 まずその前に 本題とは反れますが、HTML5でコーディングするにあたって、押さえておきたいポイントを2つ書きます。 文字コードの指定はmeta要素のcharset属性で 今までは以下のようにmeta要素の中に長々と属性を
一部、直訳ではなく意訳した部分がございます。原文と表現が異なることがございますので、ご了承ください。この日本語訳は、私が理解を深めるために、自分なりに日本語化したものです。本日本語訳には、翻訳上の誤りがある可能性があります。したがって、内容について一切保証をするものではありません。正確さを求める場合には、必ず原文を参照してください。当方は、この文書によって利用者が被るいかなる損害の責任を負いません。もし誤りなどを見つけたら、当サイトのお問い合わせより連絡いただければ幸いです。 原文URL：http://www.w3.org/TR/2011/WD-html5-diff-20110525// 原文タイトル：HTML 5 differences from HTML 4 - W3C Working Draft 25 May 2011 翻訳日：2011/05/26 最終更新日：2011/05/26
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
