こんばんは！　永理だよ。 最近タスク管理がうまく行くようになってきてて（当人比）ノリノリだよ！　そして今日は先日作ったアイコン画像を利用して吹き出しっぽいUIをCSSで作ってみた！ ところで、先日久しぶりにブログを書いたんだけど、所要時間が二時間もかかっていたことが判明！ ブログはできれば毎日更新したいけど、毎日二時間もとれないなあと思って、今試行錯誤中。しばらくフリーダムに更新するよ！ 進捗：Twitterプロフィール画像作成 先日のブログ更新で、何に時間がかかってるのかっていうと、ヘッダ画像のイラストだった…。 ↑これね。　こんなしょぼい絵。顔だけ。 でも今の自分にはそのくらい時間かかるかなあ。うーん。しょうがない。 それに以前からTwitter用のプロフを作りたいと思ってたので、まあそれはよい。ことにする。 そのあとアイキャッチ画像からちょっと修正＆調整してTwitterのプロフはこ

Hey there! I wrote a book called Atomic Design that dives into this topic in more detail, which you can buy as an ebook. We’re not designing pages, we’re designing systems of components.—Stephen Hay As the craft of Web design continues to evolve, we’re recognizing the need to develop thoughtful design systems, rather than creating simple collections of web pages. A lot has been said about creating

タイトルの通りですが、アイコンの上にマウスを乗せると吹き出しが現れるサンプルを紹介します。今回は現れる動きが違うサンプルを5つ用意しましたので、気に入ったものがあればうれしいです。 Chrome、Firefoxの最新バージョンやIE10だとすべてのサンプルが動きます。CSS3のtransitionやrotateが使えないブラウザでも機能的には問題はないと思います。opacityが使えないIE8以下はちょっと厳しいですが、最後に少し対応法を紹介します。 では、一番上のサンプルを解説します。 HTML まずはHTMLから。 Home Twitter Facebook RSS Setting a要素がアイコンで、span要素が吹き出しです。アイコンはWebフォントで表示します。 続いてCSSです。いつも通りまずは全部載せます。 @font-face { font-family: 'typicon

If you use Sass in your development workflow, you know the importance of mixins. When you see some things that are written repeatedly and tediously in CSS, that’s where mixins can help you prevent repetitive work. A mixin contains CSS declarations that you can reuse throughout your site. There are many mixins are made by developers, to help you when working with Sass in your development. Most cove

David Bushell Web Design & Front-end Development I make websites I design and build websites with a focus on standards, performance, and accessibility. With a decade of professional experience — in-house and remote — I've delivered for all types of organisations. Whether it's WordPress, JAMStack, or PWAs, I have the know-how to help you. What my clients say Highly skilled, personable, helpful and

これからのプロジェクトに使ってみたくなるような素敵なアイデア満載のクリエイティブなスタイルシートのテクニックを紹介します。 今年もCSSの進化がすごかったですね。

Bukmacherzy Polska 2025 Rynek bukmacherski w Polsce kwitnie z dnia na dzień, a żywym dowodem tego są chociażby nowi operatorzy, którzy pojawiają się na rynku. Aczkolwiek, od ich nadmiaru użytkowników może rozboleć głowa, dlatego też pochyliliśmy się nad dostępnymi opcjami i od deski do deski przeanalizowaliśmy temat.

2014.10.22 | 活動 入社2年目マークアップエンジニアの情報の集め方 アップルップル公開社内勉強会で「入社2年目　マークアップエンジニアの情報の集め方」というタイトルで発表しました。 今回は初めてGoogleスライドを使ってみました。 入社2年目 マークアップエンジニアの情報の集め方 SlideShareにもアップしてみました。お好きなほうでご覧ください。 情報収集はWeb制作者には欠かせないスキル 入社1年目のとき、新人の入る隙は情報収集だと思ってがんばっていたのですが、入社2年目にして先輩が退職されるというまさかの展開にまた情報収集をがんばることになりました。 どの立場にしろ、情報収集は大事だなあと実感した今、公開社内勉強会という場を借りて新人さん2人に向けてお話ししてきました。 お話の内容 情報収集の大切さ 新しい情報を収集する すでに浸透している情報を収集する 情報を発信

.play { color: #ffba16; font-family: 'FB Condor Bold', sans-serif; font-size: 100px; letter-spacing: 0.2em; padding: 10px 0; -moz-transform: skew(-25deg) rotate(5deg); -ms-transform: skew(-25deg) rotate(5deg); -webkit-transform: skew(-25deg) rotate(5deg); transform: skew(-25deg) rotate(5deg); text-shadow: 0 1px #ff9b0d, 1px 0 #f79100, 1px 2px #ff9b0d, 2px 1px #f79100, 2px 3px #ff9b0d, 3px 2px #f79

9月20日にWCAN 2014 Autumnで「ウェブデザインにおける動きの演出について」というタイトルで1セッション担当させていただきました。 普段のウェブ制作の仕事の中で、CSSやJSで動きをつける場面が増えてきた一方で、その辺りの情報をあまり整理できていなかったので、自分自身の勉強もかねてこのテーマを選びました。実ははじめは「クリエイティブマインドセット」を読んで、誰もがデザインに関わるべきですよというような話をしたかったのですが、7月の社内勉強会の時に私のプレゼンの準備不足もあり反応がいまいちだったので、もう少しわかりやすいテーマにしようとウェブデザインにおける動きというテーマにしました。8月の社内勉強会で一度プレビュー版を発表して、そこでの感想も参考にしながら本番用の内容の準備をしました。WCANの週の頭に社内で本番用の内容で今一度見てもらって伝わりにくかった部分を修正して、最後

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

フラットなデザインのタブを実装するjQueryコードとCSSを紹介します。 例によって簡単にタブを作れるjQueryライブラリがありますので、めんどうな方はそちらを使用するとラクチンだと思います。 jQueryライブラリ jQueryUI 仮にjquery.tab.jsと名前をつけて保存 $(function(){ $('.tabbox:first').show(); $('#tab li:first').addClass('active'); $('#tab li').click(function() { $('#tab li').removeClass('active'); $(this).addClass('active'); $('.tabbox').hide(); $($(this).find('a').attr('href')).fadeIn(); return false;

こんにちは、デザイナーのサリーです。 今回は「タイムライン」のサンプルを10例ほど紹介していきます。 たとえばLIGの沿革ページもSNSのタイムラインっぽいデザインになっているように、沿革や実績をタイムラインで見せたいという要望はときどきあるので、デザインの際の参考になればと思います。 それでは、はじめます。 さまざまなタイムライン10例 1. Vertical Timeline http://codyhouse.co/gem/vertical-timeline/ レスポンシブ対応のタイムライン。 JSも使用していて、スクロールでコンテンツが“びよよん”と気持ちいい動きで出現します。 中央のカテゴリーのアイコンがアクセントになっていて、かわいいですね。 2. VERTICAL TIMELINE http://tympanus.net/codrops/2013/05/02/vertical-