noonworks

絵を描いたり、プログラムを作ったり、ゲームをしたりします。アイコンはぼやけたヒヨコです…

noonworks

絵を描いたり、プログラムを作ったり、ゲームをしたりします。アイコンはぼやけたヒヨコです。 好きなゲーム：FF14、Minecraft

  • デザイナー向けのVue.js紹介

    「HTML/CSSはわかるけれど、JavaScriptは少し読んだことがあるくらい」というデザイナー向けの、Vue.js紹介記事です。

UIデザイン反面教師日記：言いがかり警告

はじめに言い訳させていただくと、私はUIデザインのプロではありません。しかし、プロでなくとも「このUI/UXはイヤだな」と感じることはよくあります。 この記事はそういった「イヤだな」の考察であり、特定サービスを貶める目的のものではありません。 謎のエラーメッセージ？ある日、私はスマートフォンのブラウザでブログ記事を読んでいました。読んでいるうちに知らない言葉が出てきたので、その文字列を選択し、ブラウザの機能でウェブ検索しようとしました。なんてことない、よくある操作だと思いま

noonworks

    • (7) コンポーネントの属性 - デザイナー向けのVue.js紹介

      「HTML/CSSはわかるけれど、JavaScriptは少し読んだことがあるくらい」というデザイナー向けの、Vue.js紹介記事です。 この記事では、コンポーネントに属性値を渡す方法を解説します。 連載をまとめたマガジンはこちら↓ コンポーネントの属性前回作成したBaseButtonコンポーネントは、現段階ではまだリンクやボタンとして動作しません。BaseButtonコンポーネントにリンク先のURLやクリック時のイベントなどを設定できるようにしていきましょう。 まずは、B

      noonworks

      • キーボードと手

        （PCのモニタが映らなくなってしまったので、今日の連載更新は休止で、スマホから日記をお届けします……） 私は手が小さいです。 すごく小さいというわけではありませんが、知り合いの女性の平均よりもやや小さく、一般的な男性の手よりは0.5～1cmくらい指が短いと思います。 その私からすると、プログラマーに人気のHHKBシリーズなどは、大きすぎて指が疲れます。キーピッチには困りませんが、キーストロークが深かったりキーキャップに高さがあるのがキツいです。 悲しいことに、手の小さい

        noonworks

        • (6) 子要素を持つコンポーネント - デザイナー向けのVue.js紹介

          「HTML/CSSはわかるけれど、JavaScriptは少し読んだことがあるくらい」というデザイナー向けの、Vue.js紹介記事です。 この記事では、子要素を持つコンポーネントを作る方法を解説します。 連載をまとめたマガジンはこちら↓ コンポーネントのルート要素前回までに作ったコンポーネントは、単一のHTML要素を持つコンポーネントでした。今回からは、もっと複雑なコンポーネントを作っていきましょう。 複雑なコンポーネントを作るにあたり、覚えておくべき制約があります。Vue

          noonworks

        UIデザイン反面教師日記：言いがかり警告

        noonworks

        マガジン

        • デザイナー向けのVue.js紹介
          8本

        記事

          (5) スタイルの適用と閉じ込め - デザイナー向けのVue.js紹介

          「HTML/CSSはわかるけれど、JavaScriptは少し読んだことがあるくらい」というデザイナー向けの、Vue.js紹介記事です。 この記事では、コンポーネントにスタイルを適用し、スタイルを閉じ込める方法や共通CSSを使う方法を解説します。 連載をまとめたマガジンはこちら↓ スタイルの適用前回までに作った新しいコンポーネントにスタイルを適用してみましょう。今回は下のように、端が透明にグラデーションする、文字色と同じ線にしてみました。（BaseLine.vueの<styl

          noonworks

          (5) スタイルの適用と閉じ込め - デザイナー向けのVue.js紹介

          noonworks

          (4) 新規コンポーネントの追加 - デザイナー向けのVue.js紹介

          「HTML/CSSはわかるけれど、JavaScriptは少し読んだことがあるくらい」というデザイナー向けの、Vue.js紹介記事です。 この記事では、新規コンポーネントを追加してみます。 連載をまとめたマガジンはこちら↓ 新規コンポーネントファイルの作成 前回までで基本的なファイル構成や動作の流れがわかりました。 今回は、新規コンポーネント作成のサンプルとして、シンプルな水平罫線（<hr>）のコンポーネントを追加します。 コンポーネントの名前 コンポーネントの名前は自由に

          noonworks

          (4) 新規コンポーネントの追加 - デザイナー向けのVue.js紹介

          noonworks

          (3) サンプルで見る動作の流れ - デザイナー向けのVue.js紹介

          「HTML/CSSはわかるけれど、JavaScriptは少し読んだことがあるくらい」というデザイナー向けの、Vue.js紹介記事です。 この記事では、前回作成したサンプルの動作を解説し、いじってみます。 連載をまとめたマガジンはこちら↓ サンプルのフォルダ構造まずはサンプル・サンドボックスの構造を確認してみましょう。ファイルエクスプローラー上でフォルダをすべて展開すると、以下のようになります。 publicフォルダの中身は、よくあるindex.htmlとfavicon.i

          noonworks

          (3) サンプルで見る動作の流れ - デザイナー向けのVue.js紹介

          noonworks

          (2) CodeSandboxでサンプルを動かす - デザイナー向けのVue.js紹介

          「HTML/CSSはわかるけれど、JavaScriptは少し読んだことがあるくらい」というデザイナー向けの、Vue.js紹介記事です。 この記事では、Vueを使ったプロジェクトのサンプルを作成します。 連載をまとめたマガジンはこちら↓ アカウントの準備 Vueに触れ、プログラミングを始めるにあたって、便利なWebサービスがいくつかあります。まずはそこへの登録から始めましょう。（すべて無料で使用可能です。） GitHub GitHubはかなり有名なサービスなので、すでに使っ

          noonworks

          (2) CodeSandboxでサンプルを動かす - デザイナー向けのVue.js紹介

          noonworks

          (1) Vue.jsの概要・機能・メリット - デザイナー向けのVue.js紹介

          「HTML/CSSはわかるけれど、JavaScriptは少し読んだことがあるくらい」というデザイナー向けの、Vue.js紹介記事です。 この記事では、Vue.jsの概要・機能・メリットの解説をします。 連載をまとめたマガジンはこちら↓ Vue.jsとは？Vue.js公式サイトの「はじめに」のページにリンクされている動画が非常にわかりやすいです。プログラミングの専門用語を含んだ英語の動画なので、抄訳しつつ用語を言い直して説明します。 ここ10年でWebページはダイナミックに

          noonworks

          (1) Vue.jsの概要・機能・メリット - デザイナー向けのVue.js紹介

          noonworks

          デザイナー向けのVue.js紹介

          「HTML/CSSはわかるけれど、JavaScriptは少し読んだことがあるくらい」というデザイナー向けの、Vue.js紹介記事です。 この記事では、執筆経緯や想定読者、記事の方針などを説明します。 執筆経緯私自身はプログラマーで、趣味で小さなwebアプリケーションを作っています。その中で Vue.js を使用し、とても便利なのでデザイナーさんにも触ってみてほしいなぁと思いました。 さっそくTwitterのフォロワーにお勧めしようとしたのですが、入門用の参考資料を検索した

          noonworks

          デザイナー向けのVue.js紹介

          noonworks

          はじめまして

          noonworksと申します。 絵を描いたり、プログラムを作ったり、ゲームをしたりします。アイコンはぼやけたヒヨコです。 主にプログラミングに関する記事を書いていこうと思っています。 よろしくお願いします～ 扱う予定のテーマ： Vue.js、フロントエンド、TypeScript、ユーザーインターフェイス 好きなゲーム：FF14、Minecraft、CookieClicker Twitter: @noonworks ※オタクアカウント、かつ、超たくさんツイートします

          noonworks

          はじめまして

          noonworks