2020/7/25にtraPで実施したUIデザイン講習会の資料です

以前社内に書いたポエムなんだけど年に1回くらい引用したくなるので公開した tl;dr; 質問をする時はゴールを提示する【MUST】 理由1 理由2 コンテキストを詳しく共有する【SHOULD】 期待してた結果(expect)と実際の結果(actual)を書く【IMO】 2020/7/22 12:30追記 2020/7/22 19:00追記 tl;dr; テンプレ 【質問内容】 【やりたいこと or 今困ってること or 質問の意図】 質問をする時はゴールを提示する【MUST】 なにかやりたい けど実現できない、うまくいかない それで質問する って感じに、質問をする動機としてまず やりたいことありき のはずなので、それを提示すべきです 理由1 質問される側（以下回答者）は質問内容がふわっとしていると色々なケースを想定して回答を組み立てます *1 例「Aの場合は～だけど、Bの場合は～」 こうい

今回は Netlify + GitHub 環境で簡単にサイトを公開する方法 について解説したいと思います！ 「 Netlify 」は静的コンテンツのホスティングサービスです。 GitHub や GitLab、Bitbucket のリポジトリに置いてある静的コンテンツを比較的簡単な設定で Web 上に公開することができます。 サイトを更新する場合も、GitHub に更新内容をプッシュするだけでサイトが更新 され、非常に便利です。 その他、公開用ブランチやディレクトリの選択が自由 だったり、無料枠の範囲で独自ドメインを設定できる など、簡単設定かつ高機能、懐にも優しいサービス内容となっています。 目次 目次 簡単な流れ 公開用の GitHub リポジトリの作成 リポジトリ作成 & クローン 公開用のブランチを作成 公開用ファイルを追加 コミット & プッシュ Netlify で公開設定 Net

サポートしているJavaScriptライブラリの一覧（上記以外にもたくさんあります） Snipsnapは現在のプロジェクトで使用している言語やパッケージに基づいて、ライブラリで使用可能なスニペットをナビゲートし、必要なスニペットを選択します。 Snipsnapのインストール Snipsnapのインストールは、VS Code Marketplaceから。 VS Codeで開いたら、「Install」をクリック Snipsnapの使い方 Snipsnapは、手動でアクティブ化する必要はありません。ワークスペースフォルダにpackage.jsonファイルが含まれ、すぐに使用できます。トリガーが必要な場合は、コマンドパレットのReload Windowを使用します。 設定 利用可能な設定オプションは、スニペットのリクエストから特定のライブラリを除外することだけです。Snipsnapはロックファイル

<blockquote class="hatena-bookmark-comment"><a class="comment-info" href="https://b.hatena.ne.jp/entry/374853132/comment/quality1" data-user-id="quality1" data-entry-url="https://b.hatena.ne.jp/entry/s/www.excelspeedup.com/ketsugoukaijyoshiteumeru/" data-original-href="https://www.excelspeedup.com/ketsugoukaijyoshiteumeru/" data-entry-favicon="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%

このあいだ、GAFA数社のコーディング面接を受けて全落ちしました。後続のため、オンサイト面接がこんな感じだったよ、というのをストーリー風に仕立てて公開します。問題と会話はダミーですが、雰囲気はかなり近くできたと思います。なお実際の会話はすべて英語で、バーチャルでの実施でした。 メイン問題はLeetCodeのNo.1472をもとに作成。 https://leetcode.com/contest/weekly-contest-192/problems/design-browser-history/ ちなみに「ぼく」はIQ+30くらいの設定です。それではどうぞ。 入室と自己紹介 面接官「やあ！わたしはシンディ。会えて嬉しいよ！」 ぼく「こんにちは、シンディ。ぼくはyambe2002。調子はどう？」 面「超いい感じだよ。きみは？」 ぼ「ぼくも超いい感じさ」 面「それはよかった。わたしは部署Aのソフ

皆さんこんにちは、エンジニアの西尾です。 新しい機能・サービスを開発する際、私は特にデータベース設計に気をつかいます。 データベースはシステムの土台です。 土台が不安定だと、その上に積み上げていくアプリケーションコードがいびつなものになり、つらい思いをします。 また、一度動き出してしまったシステムのデータベース設計を変えるのは、容易なことではありません。 データベース設計には”これだ！”という正解はないと思っています。 サービスの特徴、システムの性質、toB向け/toC向け、Readが多い・少ない、Writeが多い・少ない。 その他もろもろの背景により、データベース設計の仕方も変わってきます。 このテーブルは正規化していないから駄目だ、この設計はいわゆるポリモーフィック関連だから使ってはいけない、などということはありません。 アンチパターンと呼ばれるものも時と場合によっては正解になります。

Watch Practice your skills with projectsBuild projects to skill up Developer Roadmaps roadmap.sh is a community effort to create roadmaps, guides and other educational content to help guide developers in picking up a path and guide their learnings. Community created roadmaps, guides and articles to help developers grow in their career.

flexboxって？ flexboxレイアウトは、複数の子要素を揃えてレイアウトする仕組み 参考：A Complete Guide to Flexbox 親要素のCSSを設定するだけで子要素が簡単に揃ってくれる。 最低限「display: flex;」だけで横に揃う bootstrapの場合、揃えたい子要素全てにclass="col-xx-yy"を書く必要があるのに対して、flexboxの場合は必要な最小コードはたった一行、揃えたい子要素の親要素に加えるだけ。 目的 個人的にflexboxでよく使うコードのメモを残す 基本のき flexboxを使う最小限のコード 横に揃えるだけなら、親要素に display: flex;を加えるだけ。

皆さんこんにちは、リースブログ編集部です。 本日は、レスポンシブ対応でかなり使えるCSSテクニックをご紹介します。 高さ不明のブロック要素の比率を維持させる方法 レスポンシブで組んでいると、どうしてもブロック要素をそのままの比率を維持しながら可変させたいという要望が生まれます。 画像の可変は、width=”100%”を指定すれば画像の比率を維持しながら勝手にウィンドウサイズに合わせてサイズが変更されるので楽ですが、ブロック要素では高さ方向でつまづきがちですね。 【NG例】通常のレスポンシブ対応方法例 通常であれば、heightを指定しない限り、親ブロック要素は子ブロック要素のコンテンツによって高さが依存します。 具体的な例がこちら。 ブラウザのウィンドウサイズをグイングイン動かしてみてください。 サンプルへ 一応コードはこちらから確認頂けます。 <div class="adjust-box

The internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome.

Googleフォームの埋め込み機能を使えば簡単に、機能するフォームを設置できる。 しかし、デザインはGoogleフォームのデフォルトから変わらないので、サイトの雰囲気は大きく損なわれる。 見た目を思い通りにカスタマイズできるgoogleフォームを、埋め込みと同じくらい簡単に実装できる手段を見つけたので、覚え書き程度に書いておく 完成イメージ これ、実はGoogleFormなんです。 ↑こちらは株式会社スマートルアーのむかしのホームページ。IoTルアーの開発をしています。釣り好きの方は是非チェックを！！(現在はバージョンが変わっておりフォームのテストはできません) フォーム送信後の画面については、こちらの記事で深掘りされております。ありがたい！ https://qiita.com/sugitata/items/182173c01e0470a3a4a8#_reference-a3a8c18aa

CSS チュートリアル CSS の基本 CSS の第一歩 CSS の第一歩の概要 CSS とは何か CSS 入門 CSS の全体像 CSS の働き 評価課題: 経歴ページのスタイル設定 CSS の構成要素 CSS の構成要素の概要 CSS セレクター Type, class, and ID selectors Attribute selectors Pseudo-classes and pseudo-elements Combinators カスケードと継承 Cascade layers ボックスモデル 背景と境界 書字方向の操作 内容のはみ出し CSS の値と単位 CSS における大きさの指定 画像、メディア、フォームの要素 表のスタイル付け CSS のデバッグ CSS の整理 評価課題: CSS の基本的な理解度 評価課題: 素敵なレターヘッドの便箋の作成 評価課題: かっこいいボック

この春、CSSコーディングの仕事を始めた新人さんへ、「きれいなCSS」を書くためのガイドラインをお届け。 きれいなCSSを書くためにはいくつかルールがあります。ルールに従うとレイアウトの崩れを最大限防げるだけでなく、軽量で再利用可能なCSSを書けるメリットもあります。ここで紹介するルールは次のとおりです。 グローバルセレクターや要素セレクターを避ける 詳細度が高すぎるセレクターは使わない セマンティックなクラス名を使う マークアップ構造とCSSを密結合しすぎない ルールを1つずつ説明していきます。 グローバルセレクターを避ける グローバルセレクターには全称セレクター（*）、p、button、h1といった要素セレクター、[type=checkbox]といった属性セレクターが含まれます。これらのセレクターに適用されるスタイル宣言は、サイト全体にわたって該当する要素すべてに適用されます。以下に例

ブログパーツなどでよく使われる、HTMLタグをコピペするだけでサードパーティーのコンテンツを表示させることができるウィジェット。 TwitterやFacebook、はてなブログ等いろいろなサービスがウィジェットを提供していたり、表示をサポートしていたりしますね。 先日GitHubのコントリビューションチャートを任意のページに貼り付けられるウィジェットYourcontributionsを作ったので、これを例にしてiframeを使ったウィジェットのベーシックな作り方をメモ。 GitHubのcontributionを見られるウィジェットを作った : Query OK. http://queryok.ikuwow.com/entry/github-widget-released/ こんなウィジェットです。 Yourcontributions: GitHub Contribution widget

2021年12月18日 CSS, ダウンロード FlexboxとはFlexible Box Layout Moduleのことで、その名の通りフレキシブルで簡単にレイアウトが組めちゃう素敵ボックスです。現在ほとんどすべての最新ブラウザーでFlexboxをサポートしており、Flexboxを使ったレイアウト組みが今後のWebデザインのスタンダードとなるでしょう。Webクリエイターボックスでは以前からFlexboxの使い方について紹介してきたのですが、最近Flexboxが浸透してきたこともあってか各プロパティの使い方について質問される機会が増えてきたので、チートシートとしてまとめてみました。この記事ではなるべく画像メインでプロパティーの使い方を紹介したいと思います！ ↑私が10年以上利用している会計ソフト！ 動画で学ぶCSS Flexbox この記事はYouTube動画でも解説しています。動画派の

運動不足だ。もともと運動が苦手なくせに、外に出なくなったのでたちが悪い。ひどい時は1日30歩しか動かないし、歩き方を忘れてしまいそうである。体重は増加の一途を辿り、腹をつまむと見慣れぬ脂肪がぷにっと浮き上がった。君、いつの間に生まれたんだ。 というわけで買った。 エアロバイクである。フィットネスバイクとも呼ばれる。自転車のように漕ぐあれだ。色のクセが強すぎるのは安かったのと、他のバイクはどれも品切れだったからである。皆考えることは同じらしい。 早速漕いでみる。 ああ… 続かねえ。 全然続かねえ。漕いだ時間より組み立てる時間の方が長かった。かつてランニングも筋トレも、フィットネスゲームだって続かなかったのに、ただ漕ぐだけの運動が続くはずもない…。 申し遅れましたが、ライターの岡田悠と申します。趣味は旅行です。最近趣味が消滅しました。 そう、そもそも本当だったらGWは旅行に出かけていたはずだっ

数日前（4/21頃）に Next.js のチュートリアルが一新されました。 Next.js は 3 月頭に ver 9.3 がリリースされ、ビルド時に静的に HTML を生成する関数などが追加されるなど、今までよりもかなりパワフルになり、いわゆる JAMstack と呼ばれるようなアプリケーションを作りやすくなりました。 そのバージョンアップに対応するかたちで、チュートリアルも大幅に書き直されました。 参考（開発チームの @chibicode さんのツイッター） Next.jsの公式チュートリアルを最新版に沿ってゼロから書き直しました! 🎓英語ですが初心者向けです! ⚛️最近導入されたgetStaticProps等の関数や、 🎨CSS Modulesの解説をしています! 🗣ブログを作りながら学びます 🤗ご感想お待ちしております!https://t.co/R4j9vpAQoc — S