[B! webdesign] joker1007のブックマーク

デザイナさん直伝のCSSテクニックが満載！「RubyistのためのCSS勉強会」を開催しました - give IT a try

はじめにさる2016年1月9日、西脇.rb＆神戸.rbの合同勉強会として「RubyistのためのCSS勉強会」を開催しました。主催者の僕自身が「参加して良かった！」と思えるぐらい有益な情報がたくさん詰まった勉強会になったので、今回のエントリではこの勉強会の内容を紹介します。もくじちょっと長いので、先に目次を載せておきます。はじめにもくじ講師は合同会社フィヨルドの町田さん！この勉強会で講義してもらったテーマ座学編 Railsの app/assets/stylesheets 内のディレクトリ構成例最近注目を集めているAtomic Designについて 3種類のリセット系CSSの特徴について変更に強いマークアップのルールについてプログラマとデザイナの協業についてハンズオン編進め方の具体例 1問目：グローバルナビゲーションの作成 2問目：アラート画面の作成 3問目：記事

joker1007 2016/01/14

リンク

いま俺たちに必要なのはz-indexの明確な指標だ - Qiita

こんにちは、@armorik83です。こういう煽ったタイトルを書きたいってずっと思っていたので今回やってみます。 z-indexの値付けどうしてる? z-indexの説明は省略しますが、この値は取りうる範囲が膨大1でそれに対する指標が無いことから、複数のWeb設計者が入り混じる場合にバッティングする恐れがあります。1から10までの範囲で収めていた設計者のサイトに100刻みの値付けをするプラグインが導入されると、一気に関係が崩れてしまうことが想像できます。 W3Cではこの値についての明確な指標を載せていないようにみえます。︵調査不足だったらすいません︶広告業界では Web広告業界の展開は日本国内外問わず盛んで、さまざまな手法でうっとうしい広告を載せてきます。この時、元のコンテンツにオーバーレイする形で表示される広告や、マウスオーバーで拡大する広告などが普及してきたことで、2012年にこの

joker1007 2015/02/23

桁上がり過ぎだろ……。

リンク

Codrops | Useful resources and inspiration for creative minds

Codrops Demos Hub Discover our curated collection of 500+ free animations, interaction concepts, UI designs, web templates & more. Stay in the loop: Get your dose of frontend twice a week 👾 Hey! Looking for the latest in frontend? Twice a week, we'll deliver the freshest frontend news, website inspo, cool code demos, videos and UI animations right to your inbox. Zero fluff, all quality, to make y

joker1007 2015/02/19

かっちょいいエフェクトとかスマートなUIのサンプルが大量にある。

リンク

TECH PROjin

セキュリティソリューション事業部からのお知らせセキュリティソリューション事業部のブログサイトを新たに開設いたしました。 https://blog.sie-security.com/ 今後のセキュリティニュースの投稿は上記URLのサイトからとなります。よろしくお願いいたします。担当：TY …More Read

joker1007 2015/02/11

リンク

メンテナブルでありつづけるためのCSS設計

2014年11月8日大阪「Web制作者のためのCSS設計の教科書」出版記念イベント x CSSオジサン #0 のスライドです。Read less

joker1007 2014/11/11

ごめんなさいと土下座して謝りつつブクマしたい資料

リンク

Coolors.co - The super fast color schemes generator

The super fast color schemes generator! Create, save and share perfect palettes in seconds! Start the Generator, it's free! iOS App

joker1007 2014/10/23

サイトの配色決めるのに良さそう！

リンク

4色ほど指定するだけでTwitter Bootstrapの配色を良い感じにしてくれるSass | mah365

そんなSassが町田先生のCustomizedTwitter Bootstrapに含まれていたので、これをTwitter Bootstrap3に対応させてみたのでした。ソースこちらが良い感じにしてくれるベースの変数です。 $base-color、$main-color、$accent-color、$base-text-colorを決めることで良い感じにしてくれます。僕は下のファイルみたいなテイストが好きです。ほんわかしている。仕事では使えない感じがある。実際に読み込むときには、Twitter Bootstrapより先に変数を読み込んでおきます。 //--------------------------------------------------------- // Color Scheme for Bootstrap @import colors/try @import color

joker1007 2014/02/05

リンク

デザインの裏側を理解できるエンジニアになろう - Qiita

﹁画面﹂のデザインは、エンドユーザーから見た﹁プロダクト﹂との唯一の接点。超大事。そんな画面のデザインにまつわる、エンジニアが﹁いじる﹂ときに気をつけると、もしかしたら面倒が減って争いが減ってみんなが幸せになれるんじゃないかなあ、とか、そもそもの設計上で考慮できると、もしかしたら使う人たちが幸せになれるんじゃないかなあ、というポイントを、思い付きで書いていくので、あとは誰か整理してほしい的な投げやり感あふれるアレコレ。デザインとコーディングの話を混ぜて書いてます。空白の理由を考える編その1. 空白にまつわる認識の相違例えば、Tumblrのダッシュボード。右肩のメニューの隅までちゃんとレイアウトされてるなーって感じがします。でも、もしあなたが﹁空白を理解しないエンジニア﹂だった場合、こんな感じにコーディングしてしまうかもしれません。︵※画像はイメージです︶﹁なーんか、素人感があ

joker1007 2014/01/23

デザイン上のスペースの重要性は分かるのだが、自分で調整するのは余りやりたくないw 後コーディングにおけるインデントはなんか違う気がする。

webdesign

リンク

現場で使える効果的なHTML&CSS構造設計（Effective HTML&CSS）

実務でよく使うhtml,css,jsの小技をつらつらと紹介します。 ※2/11のスクーの授業中で使った資料です。 https://schoo.jp/class/1776 【オシャレCSS編】 1. transf ormを使って要素を変形させるワザ 2. transitionを使い、CSSだけで簡単なアニメーションを行うワザ 3. keyframesを使ってCSSだけで複雑なアニメーションを行うワザ 4. 矢印アイコンをcssだけで表現するワザ 5. アイコンをアニメーションさせるワザ 6. CSSプロパティ”filter”で画像を加工するワザ【地味だけど使えるワザ編】 7. 今どきの、要素を上下中央寄せにするワザ 8.「flexbox」で要素を自由自在に整列させるワザ 9. Windowsでwebfontをちょっとマシに見せるワザ 10. ア

joker1007 2013/10/27

これは参考になる！

リンク

Gumby - Bootstrapの強力なライバルになるか！？シンプルかつ強力なCSS3フレームワーク MOONGIFT

CSS3フレームワークは数多くなってきたのでその特徴をちゃんと掴んでおかないといけないですね。 GumbyはSassを使ったCSS3フレームワークです。他のフレームワークと同じようにレスポンシブ、モバイルフレンドリーになっています。その特徴を見ていきましょう。まずデスクトップからです。ヘッダーバー。フラットだったり、幅が固定だったりと色々な形式が想定されています。タイポグラフィ。可読性高いです。リストだけでも黒丸、白丸、ドット、数字など多数用意されています。さらに定義リストまで！ボタン。サイズ、色、形が様々です。片方だけ丸い、なんて便利そうですね。インジケーターやラベル、アラート。こういうのもよく使いますよね。フォーム。基本的にplaceholderを使った表示になっているようです。テーブル。角丸サポートです。タブ。幅が設定できます。縦のタブもあります。ドロワー。クリ

joker1007 2013/10/25

リンク

ズルいデザインテクニック2013 + セミフラット version

[大阪] プログラマー向けデザイン勉強会で発表させていただきました。 http://connpass.com/event/3086/ --- [あわせて読みたい] KSSで作るパターンライブラリ by @machida https://speakerdeck.com/machida/kssdezuo-rupatanraiburari 【アイコンを200こ描いた振り返り！】アイコンから知るデザインのヒントby @awayuki http://www.slideshare.net/awayukin/awayuki-pmd01-share ビジュアルデザインまでのデザインワーク by @yokotak0527 http://www.slideshare.net/YokotaKenji/ss-26460108

joker1007 2013/09/25

リンク

Gitを使ったデザイナーとプログラマの協業について話してきた #P4D #phpcon2013 - 納豆には卵を入れる派です。

常連プログラマがほぼ Rubyist しかいないP4Dなのですが、なぜかPHPカンファレンスで枠をいただいたとのことで、デザイナーとGitについて話し合ってみようという企画に参加してきました。﹁生煮えぷるり﹂をプログラマとデザイナーの間で行ったり来たりさせる話 Pull Request 4 Designers - GitHubを使ったプログラマとデザイナーのイテレーティブな開発フロー// Speaker Deck GitHubを使った、実際のプログラマとデザイナーの協業の様子を見てもらおうということで、私がお手伝いさせていただいている、[https://forkwell.com:title=Forkwell] と [https://jobs.forkwell.com:title=Forkwell Jobs] での開発の様子を例にお話させていただきました。補足とか﹁生煮えぷるり﹂という

joker1007 2013/09/16

リンク

Media Queryを使用したレスポンシブWebデザインの構築時にはResponsivepxっていうツールが超オススメです

たまたま見つけたツールが泣きそうなくらい便利だったのでシェア。Media Queryを使用したレスポンシブなWebデザインの構築時にとっても役に立ってくれるツールです。URL を指定するだけで、あとは幅を調整しながらレイアウトの微調整が可能です。ページ推移も不要なのが大きいですね。今日ご紹介するResponsivepxは、インタラクティブに指定幅の表示を確認出来るWebサービスです。Media Queryを使用したレスポンシブなWebデザイン構築時に、微調整したいときはかなり効果を発揮しそう。 Kristaliaでテスト。URLを入力するとそのサイトが表示されますので、あとはマウスでバーを動かして好みのサイズに変更するだけ。 MediaQueryを使ったレスポンシブなWebデザインのサイトなら設定値に達した時点でMediaQueryが適応され、レイアウトが変化しますので、微調整

joker1007 2013/04/08

webdesign

リンク

HTML5 × CSS3 × jQueryを真面目に勉強 – #16 レスポンシブWebデザインでテーブルを最適化するベストプラクティス | DevelopersIO

dislay 属性についてもっと知りたいという方は、こちらのサイトを参照ください。 display - CSS | MDN 要するに何が言いたいかというと、テーブルもまたスタイルシートの display 属性によってその形状を実現しているに過ぎず、この値を色々と操作すればスマートフォンのようなスクリーンサイズの狭い環境にも最適化された表示が出来るのではないかということです。実際に作ってみた - 下準備今回は4パターンの表示を紹介します。まずは下準備として簡単なテーブルレイアウトと元となるスタイルを組んでいくとします。はじめに HTML で適当なテーブルを作ります。 <table class="table table-striped table-responsive"> <thead> <tr> <th>First Name</th> <th>Last Name</th> <th>Ag

joker1007 2013/03/18

リンク

【図解】CSSだけで画像の縦横比を維持したサムネイルを表示する - Qiita

サムネイルを表示するときに、サーバサイドプログラムで画像の縦横を計算してサムネイル画像を作ることがあります。しかし、場合によってはCSS3でサムネイル画像を描画したほうが実装コストが低い場合があります。ここでは、CSS3を使ってサムネイル画像をキレイに描画する方法を紹介します。 1. 内接・外接とは？画像の変形方法はいろいろありますが、ここでは内接リサイズ・外接リサイズについてのみ紹介します。内接リサイズ・外接リサイズとは、画像の縦横比を維持したまま、枠のサイズにフィットするように画像のサイズを変更する描画方法です。印刷出版系の用語だそうです。内接リサイズ外接リサイズ

joker1007 2013/02/28

リンク

[ HUE / 360 ] The Color Scheme Application

joker1007 2012/10/29

webdesign

リンク

ノンデザイナーのための配色理論

「のどが渇いた」というユーザーに何を出す？ユーザーの「欲しい」に惑わされない、本当のインサイトを見つけるUXデザイン・UXリサーチYoshiki Hayama

joker1007 2012/10/29

webdesign

リンク

BootstrapのUIがドラッグアンドドロップだけで組める！最速でウェブのユーザーインターフェースが構築できるエディタ「Jetstrap」 - Chrome Life

先日、Twitter Bootstrapが2.1.1にアップデートされました。 Bootstrapが2.1になって大幅に機能も追加され、ウェブサイトを構築する上で必要なUIがほとんど揃っている感じがします。最近では、スタートアップ系のWebサービスを作る人にとっては、Bootstrapが必要不可欠な存在になりつつあります。とはいっても、Bootstrapに慣れていない人が、実際にページを作っていくにはコンポーネントのタグ構造やClass名を意識して作らないといけないので、少し難しい部分もあります。 Bootstrapのサイトを見ればマークアップのサンプルがあるので、それを見ながら作れば良いのですが1つ1つ確認しながら行うのも手間です。そこで今回ご紹介するのが、BootstrapのUIをドラッグアンドドロップだけで簡単に組めるエディタ﹁Jetstrap﹂です。 jetstrap - B

joker1007 2012/09/12

実際、そんな使わない気もするが、ブクマはしておこう。

リンク

はてなブックマーク

タグ

関連タグで絞り込む (88)

webdesignに関するjoker1007のブックマーク (321)

お知らせ

今週のはてなブックマーク数ランキング（2024年7月第2週）

はてなブックマーク透明性レポート（2024年 2月-2024年4月）

今週のはてなブックマーク数ランキング（2024年7月第1週）

公式Twitter

キーボードショートカット一覧

はてなブックマーク

公式Twitter

はてなのサービス