CSS Gridで実装すると簡単！ コンテンツは中央配置、最大幅・全幅・ちょい広めのレイアウトを実装できるテンプレート
レイアウトにCSS Flexboxは使用しているけど、CSS Gridはこれから。そんな人にお勧めのWebページでよく使用されるレイアウトを簡単に実装できるCSS Gridのテンプレートを紹介します。 レイアウトはコンテンツを中央寄せに配置し、左右のマージンを自由に設定できます。たとえば、テキストには最大幅、画像には全幅、目立たせたい箇所には少し広め・かなり広めといった使い方ができます。 HTMLもCSSもシンプルなので、スニペットに登録しておくと便利です。 Layout Breakouts with CSS Grid HTMLは、非常にシンプルです。 ラッパーに.contentを与え、最大幅を設定した通常のコンテンツはclassなし、あとは幅に応じて.popout, .feature, .fullを与えるだけです。
Brand New
Friday Likes 522Reviewed From Estudio Cariño, The 6th creative studio, and Kleanthis Loizou
マンション光回線の配線方式のお話 - notokenの覚書
これは マンション光配線の方式別になぜ速度が出ないのか？を解説する資料 配線方式によって天地の差が出るマンションタイプの回線を、できる限り快適に利用したい人向けの情報 付随情報として、J:COMとかのCATVの話や、UCOM光とかBB4Uとかのマンション共有インターネットの話も載せておく (注意) 一部例外はあります。例外につきましては、「そういうこともある」だと思って下さい。 想定すべき前提知識 フレッツ光やauひかりの分岐数は方式に関わらず 1収容 あたり 最大で 32 回線 となる 光配線方式はGE-PONの仕様上、どの事業者でも最大分岐数は32分岐となる NUROの採用するG-PONは規格上の最大分岐数は64~254となっているが、実際の運用は資料がないのでわかりません NTT の シェアドアクセスを利用している以上、8以上、8の倍数(8, 16, 24, 32, .... )分岐
熟練の家具職人がアドバイス、家具にする木を選ぶ / カグオカ
家具にする木を選ぶ １１のポイントを押さえたいカグオカは無垢の木の家具屋です。 よそと比べて扱う木の種類は多いと思います。 毎日木に触れて感じたり学んだり家具にしてわかること、気づいたこと、ショップでお客さんとお話をして感じたこと、何を気にされているかなど多くの実体験にもとづいてご説明します。
Refcome Teams
人事だけで頑張る採用を、 チームで行う仲間集めへ 働き方の多様化や、売り手市場が進むいま、逸材はリファラルで動きます。 リファラル採用には、候補者ごとの丁寧な関係づくりが不可欠。それを人事だけで頑張るのではなく、チーム全員で推進する。 「一緒に働きたい人」をみんなで探し出し、みんなで誘う。そんな全員参加型の仲間集めをRefcome Teamsが支援します。 DISCOVER つながりを、 見つける。 メモリーパレス*を実施して、一緒に働きたい仲間候補をSNSから発見。マネージャーや人事も知らない、思いもよらない繋がりが、社内から見つかります。 * メモリーパレスはSequoia Capitalなどが実践する、社員の人脈から候補者を効率的にピックアップする手法です。 お問い合わせ chevron_right
雰囲気でやってる人向けの Redux 再入門
ng-kyoto Angular Meetup #9 での発表資料です。 https://ng-kyoto.connpass.com/event/113358/
配色はセンスじゃない、UIデザインで色をかんたんにキメるメソッド｜Taiki Ikeda｜note
どうも、イケダです。最近よくTwitterで知り合った若いデザイナーにお会いしているのですが、どなたにも決まって聞かれることがあります。 「G●●dpatchってぶっちゃけどうなんですか?」 知りません、なんで僕に聞くんだw 2015年に「Dear G●●dpatch」という内容のサイトを作って持っていったところ、「あー、またこれね...」と土屋さんに非常に悲しいリアクションをされてしまったので別の方法で気を引くことをオススメします。 というわけで今日は先日勝手にリデザインしたPolipoliのデザインを使って、UIデザインを行う時に僕が普段どのように色を選択しているのかをとても正直に書いていこうと思います。僕がこれから記す方法に則って色を選べば、誰でもナウでヤングなアプリを作ることができます。 はじめるよ レイアウトに関してはイニシエよりご先祖様がお築きになられたルールに則って並べればオ
いまさらながら見直したい——Windowsの和文フォント事情2016 - 同調圧力という名の下で
Mac綺麗ですよね。外観から内面まで洗練されている気がしますよね。（私はWindows派なんですが） 特にフォント面では、 OS Xでプロフェッショナルの現場でも使用されるヒラギノフォント（大日本スクリーン製造）を6書体搭載 UI用には混植用かな書体*1の「AquaKana」を使用 Mavericksでは游ゴシック・游明朝（字游工房）を2ウェイトずつ追加 最新バージョン（2016年5月現在）のOS X El Capitanでは游明朝の混植用かな書体である「游明朝体+36ポかな」（字游工房）、藤田重信氏を中心に制作された「筑紫つくしA／B丸ゴシック」（フォントワークス）、教科書体である「クレー」（フォントワークス）を追加し、更にこれまで3ウェイトだったヒラギノ角ゴシックが10ウェイトを拡張 するなど、日本語環境に対しても積極的な取り組みが見て取れます。 ただ、これはMacのお話。世界で約90
Cookpad Product Internship 2018 の振り返り - クックパッド開発者ブログ
新規サービス開発部の出口 (@dex1t) です。普段はデザインからアプリ開発まで、新規サービス立ち上げに必要なことを浅く広くやっています。 さて、R&Dインターンや技術インターンに続きまして、9月10日~14日にかけてデザイナーとサービス開発エンジニア向けのプロダクトインターンシップを開催しました。私は本インターンの全体設計と講師を担当しました。この記事ではその内容を簡単にご紹介します。 このインターンはざっくりいうと、デザイナー・エンジニアでペアを組み、ゼロから"使える"サービスを作るという内容です。なかなかハードですね 😉 今年は「一人暮らししている人の料理が楽しみになるサービス」というテーマで、5日間のサービス開発を実践していただきました！ Day 1-2. 基礎編 ✍🏻 1日目から2日目午前は、「サービス開発を実践するための道具を提供する」という建て付けで、講義やミニワークを
モーショングラフィックス 12のヒント | CyberAgent Developers Blog
こんにちは！ AbemaTVの VX Studio という部署に所属している、白戸(しろと)です。2016年に、とあるポストプロダクションから転職してきました。VX Studio は、AbemaTVで放送される番宣、タップル・AWAなどの自社広告、CIなど、様々な映像・モーショングラフィックスを制作している部署です。 ※ポストプロダクション…映像や音声の編集を行う作業、および場所のこと。「ポスプロ」と訳されることが多いです。編集スタジオとも呼ばれます。 さて、今回ご紹介するのは、【モーショングラフィックス 12のヒント】です。もう知ってるよ！という方も多いかもしれませんが、改めてまとめさせてもらいます。(これからモーショングラフィックスを始めたい！という方にピッタリかも) いつもお世話になっている Adobe After Effects (以下、Ae)をベースに話を進めます。プラグインや
After Effectsを習得したいデザイナーへ、アニメーショントレースが効果的です。｜北川レオ / hicard
こんにちは、BasecampのLeoです。 最近、UIトレースと同じようなことを代わりにアニメーションでやっていて、結構いい感じに学べることがわかったので、その方法についてまとめようと思います。アイコンやロゴのアニメーション実装のためにAfter Effectsを練習したい！というデザイナーにオススメな方法です。 (この記事はAfter Effectsの使い方について書いているわけではありません！) アニメーショントレースが効果的な理由 1. 実践的にAfter Effectsの使い方を学べる 2. 1フレームごとに観察するからこその発見 3. どうしたら気持ちの良い動きになるか感覚で学べる(イージング) 特に3.が大事です。アイコンのアニメーションなどでは複雑なエフェクトを使ったりするわけではないので、結局イージングが肝になってきます。 ふとアイコンを押した時の「なんか気持ち良い
「UXエンジニア」って何する人？ クックパッド流・開発力を高めるDesignOpsの進め方 | SELECK [セレック]
〜デザインとエンジニアリングの境目をなくす「DesignOps」とは？ サービス開発のプロセスを最適化する、その取組みを紹介〜 デザインとエンジニアリングの距離を縮める「DesignOps」という概念が、少しずつ広がってきている。 およそ20名のデザイナーと100名のエンジニアを有するクックパッド株式会社でも、今年から本格的にDesignOpsへの取り組みをスタートした。 その第一歩として、「Citrus（シトラス）」と名付けた社内向けのデザインシステムを構築し、これまで明確に言語化されていなかったデザイン原則を可視化。 DesignOpsという概念をうまく活用しながら、これまで培ってきた「サービス開発のベストプラクティス」を、言葉にして浸透させる、という取り組みを行っている。 また、別の角度からのアプローチとして、デザインとエンジニアリングの両者をひとりで担うことができる「UXエンジニア
![「UXエンジニア」って何する人？ クックパッド流・開発力を高めるDesignOpsの進め方 | SELECK [セレック]](https://cdn-ak-scissors.b.st-hatena.com/image/square/74718f1d51066330663643fd52c29379a708e850/height=288;version=1;width=512/https%3A%2F%2Fseleck.cc%2Fwp-content%2Fuploads%2F2018%2F08%2Fcookpaddesign.png)
SAML認証ができるまで - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは、Slashチームの渡辺です。 Slashチームでは、ユーザー管理や認証周りなどの、cybozu.comの各サービスに共通する機能を開発しています。今回は、3月にリリースされた、SAML認証を用いたシングルサインオン機能1についてお話させて頂きます。cybozu.comでのSAML認証の概要にくわえて、それらの機能をどのように設計・実装していったか、という誰も興味ないニッチな話題を扱います。 SAML2 って？ 「SAMLなんて聞いたこと無いけどなんとなく興味があるぞ！！」という物好きな方のために、SAMLの概要とcybozu.comでの利用について、簡単に説明します。そんなものは既に知っているというSAML猛者な方は読み飛ばして頂いて構いません。 SAMLはSecurity Assertion Markup Languageの略で、OASIS3によって策定された、異なるセキュリ
あなたが「グーグル式仕事術」を完コピすべき理由
クックパッド株式会社プロダクトマネジメント担当本部長。クックパッドには2010年から所属し、国内の利用者の拡大に責任を持ち、WEB・モバイルアプリの戦略やレシピ検索、クックパッドニュースの立ち上げなどに関わる。現在は国内のレシピサービスおよび、毎日の料理を楽しみにするためのレシピサービスにとどまらない新規サービスの立ち上げの責任者を担う。 SPRINT 最速仕事術 Googleで開発され、GV（グーグル・ベンチャーズ）で洗練された究極のスピード術「SPRINT」。GoogleとＧＶが成功を生んできたその秘密のノウハウを、開発者自身が手取り足取り公開する。仕事に最速で最大のブレイクスルーを起こす、その画期的な方法とは？ 世界23ヶ国で刊行の世界的ベストセラーの驚愕のメソッドが、いま明らかに！ バックナンバー一覧 料理レシピ投稿・検索サービスとして圧倒的な利用者数を誇るクックパッド。同社ではど
あるエンジニアが「Kibela」というサービスを考え、リリースするまでのフローを全部教える - エンジニアHub｜若手Webエンジニアのキャリアを考える！
あるエンジニアが「Kibela」というサービスを考え、リリースするまでのフローを全部教える エンジニアがサービスのアイデアを思いつき、それをリリースするまでにはどのような過程があるのでしょうか。情報共有ツール「Kibela」が世に出るまでのフローを、起業した井原正博さんが詳細に振り返ります。 ヤフーやクックパッドでの開発を経て、ビットジャーニーで代表を務める井原正博（いはら・まさひろ／@ihara2525）です。プライベートで超長距離のランを楽しむかたわら、情報共有ツール「Kibela」の開発・運営を手がけています。 Kibela - 個人の発信を組織の力にする情報共有ツール 「Kibela」は僕自身が2015年に起業して立ち上げたサービスですが、この記事では、僕がサービスをいかに開発したか、その方法からリリースまでの過程を振り返りつつ、サービスの現在の状況までお伝えします。 「自分でもサ
これぞプロのデザインテクニック！UIデザインの印象がよくなるデザインの知識とテクニックのまとめ
Webサイトやスマホアプリをデザインする際に、カラー・タイポグラフィ・レイアウトなどはどのようにすればうまくいくのか、ユーザーインターフェイスのデザインが一手間加えるだけでよくなるデザインの知識とテクニックを紹介します。 10 cheat codes for designing User Interfaces 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 1. テキストは重要、より大きく！ 2. 複数のブラックを作成しない 3. カラーを理解するためには数学が大切 4. 空白スペースを活用してグループ分け 5. カラーを使用して行を区切る 6. ドロップシャドウの代わりに乗算を使う 7. 一行の長さ 8. 新しいデザインに執着しない 9. ブランドカラーをアクセントとして使用する 10. リストにおけるビュレットのデザイン 1
Atomic Design を実案件に導入 - UI コンポーネントの粒度を明確化した結果と副産物
ここ半年開発していた動画サービスをベータ版ながらリリースしました（正式リリースは 4 月）。そのサービスの開発において、以前投稿した Atomic Design を採用しました。本記事では Atomic Design を実案件に導入した結果と感想を書いていきます。 Atomic Design の基本的な概念に関して知りたい方は Brad Frost 氏の原文、もしくは私の以前の記事↓を参照できます。 最近よくクリエイターが移住するカナダで Atomic Design を学ぶ Atomic Design を導入して正解 結論から書くと、今回 Atomic Design を導入したことは正解でした。コンポーネントの粒度を論理的に説明できるガイドラインとして十分すぎるほどの役割を果たしてくれました。 このガイドラインがあることで、デザインに関してさほど関心がない人（たとえばデザインよりもエンジニ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
堅牢なCSSをReactに手軽に実装できるstyled-jsx - DMM inside
Timer Tab
flexbox早見表 - Qiita
