[B! おしごと] contractioのブックマーク

Visual Studio Code入門 (全13回) - プログラミングならドットインストール

マイクロソフトが開発する多機能エディタであるVisual Studio Codeについて見ていきます。

contractio 2024/06/26

リンク

社内SQL研修のために作った資料を公開します | 株式会社AI Shift

こんにちは、Development Teamの三宅です。先日、社内︵AI事業本部内︶でSQL研修の講師を担当したので、今回はその内容について簡単に共有したいと思います。はじめに例年、AI事業本部では、新卒エンジニアの育成のためにソフトウェアエンジニア研修を行っております。今年はフルリモートでの実施となりました。研修期間は2週間ほどで、内容は前半が講義、後半が実践︵チーム開発︶でした。私が担当したのは、講義パートの一部であるSQL研修です。SQLやRDBにあまり慣れていない人でも、できるだけ体系的な学びが得られるようにすることを目標に、様々な資料をまとめて提供する方針で準備しました。結果的には、ハンズオン込みで4時間ほどのやや長い講義となりましたが、勉強になったという声も頂けたのでやって良かったと思っています。研修資料研修内容 SQL研修の内容は、基本的には大学のデータベース講義で

contractio 2024/05/26

リンク

【Font Awesome】バージョン6で変わったCSS擬似要素の設定でアイコン表示する時の備忘録いろいろ – 株式会社アップリーチ

Font Awesome 6がリリースされたのが2022年2月だそうです。結構前ですね〜（汗）いまさらですがバージョン6でどこが変わったのか改めてFont AwesomeのDocumentsを見てみました。私たちがよく利用する方法としては、CSSの疑似要素でアイコン表示をしますので主にその周辺を備忘録として。 fontプロパティを使った記述方法バージョン6では、CSS擬似要素でアイコンを参照する時にfontプロパティに、CSS Custom Propertyをセットする方法に変わったようです。 2. Reference Individual Icons There are a few important it ems to include when referencing any individual icon: Set the pseudo-element to match eithe

contractio 2024/02/25

リンク

【CSS】スタイルが適用される範囲を限定する@scopeが非常に便利で有能 - Qiita

CSSの大きな問題点のひとつとして、スタイルが影響する範囲を指定することができませんでした。そのため一か所だけ書き替えたと思ったら全然関係ないところが崩れたりして、その欠陥をどうにかすべくBEMやらScoped CSSやらStyled Componentsやら解決策が乱立してどうにもならなくなりました。とりあえずStyled Componentsとかの乱数スタイルシートはユーザスタイルシート適用が困難なのでさっさと滅びろ。さて先日リリースされたGoogle Chrome 118でCSSが@scopeに対応しました。なんと、素のCSSで適用範囲を制限できるようになります。 <div class="out"> <span>ここはfooの外</span> <div class="foo"> <span>ここはfooの中、barの外</span> <div class="bar"> <sp

contractio 2023/11/08

リンク

デザインの参考になる！最近のWebサイトやスマホアプリで見かけるUI、インタラクションがまとめられたギャラリーのまとめ

最近のWebサイトやスマホアプリで見かけるUI、レイアウト、コンポーネント、アニメーション、インタラクションなどがまとめられたギャラリ−を紹介します。デザインのアイデアを探している時に、ブックマークしておくと便利です。

contractio 2023/08/05

リンク

VS Codeにお勧めのフォント！似た字形をはっきり区別でき、プログラミング向けに読みやすさを追求 -Commit Mono

コードがはっきりときれいに見えるように、プログラミング向けに読みやすさを追求したフォント﹁Commit Mono﹂を紹介します。似た字形︵﹁tl1I|!ij﹂﹁O0QDØ38B﹂﹁:;.,''''"﹂﹁2Z5S7T6b﹂︶ははっきりと区別できるようにデザインされており、また等幅フォントでよくある特定の文字間で幅が等しく見えない問題︵﹁mm﹂﹁oの左右﹂など︶も改善されています。 Commit Mono. Neutral programing typeface Commit Monoは、デンマーク出身のクリエイティブデベロッパー兼デザイナーであるEigil Nikolajsen氏によるプロジェクトで、プログラミング向けに読みやすさを追求して作成されたフォントです。ライセンスはSIL OPEN FONT LICENSE Version 1.1で、商用利用は無料、Webフォントに変換したり改

contractio 2023/07/31

リンク

UI画面生成AI「Uizard」でデザイナーいらず？業務の最前線で使ってみた | DevelopersIO

﹁Uizard﹂はAIを使ったUIデザインツールで、ワイヤフレーム、モックアップ、プロトタイプを短時間で作成できます。最新の﹁Generate with Autodesigner﹂サービスはUI画面を自動で生成可能。今回は実務に根ざしたサンプル生成で、UIの精度を検証します。こんにちは。CXデザイナー事業本部のスギヤマです。普段はモバイルアプリケーションやLINEアプリケーション開発に携わっております。﹁Uizard﹂は、デンマークコペンハーゲンのソフトウェア企業が開発しました。AIを利用したUIデザインツールで、ワイヤフレーム、モックアップ、プロトタイプを短時間で作成することが出来ます。手書きスケッチもワイヤフレームに変換し、簡単にプロトタイプ化すること出来ます。以前から、﹁手書きのUIスケッチを美しい画面デザインに変換してくれるサービス﹂として話題だった﹁Uizard﹂ですが、

contractio 2023/07/28

おしごと

リンク

CSS Modules で作る SVG Icon Component

この<Icon />コンポーネントを使用すると、以下キャプチャのようになります。 UIライブラリから提供されているものを使用する選択肢もありますが、デザイナーが用意した SVG を使用する場合は自作する必要があります。自作<Icon />コンポーネントのフォルダ構成は、概ね以下のようになるでしょう。 SVG Icon Component をどう作るかアイコン画像を背景画像ではなく SVG にする理由は﹁塗り色﹂を動的に変更したいためです。新色を追加するとき、全種のアイコン画像を追加するのは大変です。SVG であれば、要素に対しpath { fill: #ff0; }のように CSS 指定をすることで動的に塗り色を変更できるため、このようなケースでは﹁インラインレンダリング﹂が選択できます。インラインレンダリングであれば、塗り色だけでなくサイズも動的に変更できます。ただし、インラインレ

contractio 2023/07/28

おしごと

リンク

Adobeユーザーに朗報！日本語フォントが650種類超えに、Adobe Fontsで使用できる日本語書体一覧のPDF 2023年最新版

フォントの日︵4/10︶に、Adobe Fontsで使用できる日本語フォントが増えました！今回のアップデートでは、SCREEN GAがパートナーに加わり﹁ヒラギノフォント4書体﹂、清和堂から﹁清和堂明朝L﹂、フォントワークスから﹁UDフォント6書体﹂が使用できるようになりました。これらのフォントをはじめ、Adobe Fontsで利用できる日本語フォントすべてが一覧できるPDFも無料でダウンロードできます。さらに、新しいフォントパックも追加され、フォント選びに迷った時にすぐに選りすぐりのフォントが使用できます。 Adobe Fonts日本語書体一覧のPDF 2023年4月版 Adobe Fontsは、Adobe CCのユーザーなら追加料金なしで利用できます。もちろん商用利用もOK、詳しくはライセンスページをご覧ください。フォントのライセンス -Adobe Fonts 一番安いプランを

contractio 2023/04/13

リンク

ユーザー操作の一括無効化で役立つ！ HTMLのinert属性の紹介 - ICS MEDIA

HTMLやCSSには、ユーザーインタラクション︵ユーザー操作︶を無効化するための方法がいくつか存在します。たとえば、マウスやタッチ操作を無効化したいときはCSSでpointer-events: noneを要素に指定するなど、制御したいユーザー操作によってさまざまです。カルーセルやモーダルなユーザーインターフェイス︵UI︶では、非アクティブな要素が操作されないように﹁画面には表示されているが、あらゆるユーザー操作を受け付けない状態﹂にしたい場合があります。具体的には、以下のユーザー操作を無効化します。マウスやタッチ操作を無効化したいテキスト選択を無効化したいキーボードフォーカスをあえて無効化したい音声読み上げをあえて無効化したい必要なプロパティや属性を複数指定することが考えられますが、そのようなときに役立つのがinertイナートと呼ばれるHTMLのグローバル属性です。 inert

contractio 2023/04/09

リンク

2023年最新版: HTMLのheadの書き方、head内に記述する要素の総まとめ

HTMLページのhead内に記述する最小限の構成、そしてmeta要素やlink要素、ソーシャルサービス用の要素、デスクトップ・スマホのブラウザ用の要素などがまとめられた「HEAD」を紹介します。 HEAD: A simple guide to HTML <head> elements 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。以前の版からいろいろと変更されています。 2016年版: head内に記述する要素の総まとめ 2018年版: head内に記述する要素の総まとめ head内に記述する最小限の構成 head内の要素 meta要素 link要素ソーシャル関連のhead内の要素ブラウザ・プラットフォーム関連のhead内の要素メモ head内に記述する最小限の構成下記はシンプルなWebサイトで必須となるhead内に記

contractio 2023/01/31

あとで読む

おしごと

リンク

これなら分かりやすい！Webサイトのデザイン仕様書・指示書の作り方

デザイナーがWebサイトのUIを実装する際にデベロッパーに渡すデザイン仕様書・指示書の作り方を紹介します。仕様書を作成する基本ツール、指示に適したフォントやカラー、グリッドや要素間の距離を自動的に計算するツールをはじめ、レイアウトや各UIコンポーネントのデザイン仕様の記述例まで、デザインを仕様化する解説記事です。ブレイクポイントの説明、スティッキー要素の仕様説明、相対サイズの要素の説明方法、ボタンの文字数の説明、アニメーションする要素の説明方法など、デベロッパーに分かりやすく、デザイナー自身も見直せるデザイン仕様書を作成します。 The Art of Design Spec'ing by Mahdi Farra 🍉 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。デザイン仕様書とはデザイン仕様書に使用するツールデザイン

contractio 2023/01/28

おしごと

リンク

なぜアドビはFigmaを買収することを決めたのか--幹部の回答、FigmaとAdobe XDの展開は

Adobeは、9月15日︵米国時間︶にウェブデザインツールの最大手﹁Figmaを約2.9兆円で買収する﹂と明らかにした。Figmaは、Adobe自身がCreative Cloudの一部として提供している同様のWebデザインツールとなる﹁Adobe XD﹂の競合とみられており、これまでFigma自身もXDからの移行をユーザーに促してきた歴史もある中で、なぜAdobeがFigmaを買収したのかいぶかる声も少なくなかった。 Adobe MAXで講演するAdobe Creative Cloud担当上級副社長︵EVP︶兼 CPO︵最高製品責任者)︶スコット・ベルスキー氏︵左︶のゲストとして呼ばれたFigma CEO ダイラン・フィールド氏︵右︶10月18日︵米国時間︶から米国カリフォルニア州ロサンゼルス市にあるLACC︵Los Angeles Convention Center︶で行なわれたCre

contractio 2023/01/27

リンク

Google検索品質評価ガイドラインとは？要点や有効な活用方法など徹底解説！｜SEOラボ

検索品質評価ガイドラインとは、Googleが検索結果の品質を評価するために、外部の検索品質評価者向けに作成したガイドライン(マニュアル)のことです。﹁General Guidelines﹂という題名で英語版のみのPDFファイルで提供されてます。この検索品質評価ガイドラインの要点を抑えてコンテンツ作成すれば、良いSEOの効果が期待できます。一方、検索品質評価ガイドラインの要点を知らなければ、対策が疎かになります。具体的には、関連性の低いWebページを増やして内部リンクが構築できなかったり、作成したWebページの宣伝が消極的になります。そうなれば、専門性や権威性、信頼性が高まらないので、サイトの品質が上がりません。結果、Googleに評価されづらいでしょう。こうした悪い状況を回避する為に、検索品質評価ガイドラインをうまく活用して、サイトの品質を高めましょう。この点踏まえて今回は

contractio 2022/12/22

リンク

codic - デベロッパーのためのネーミング辞書

codicは、プログラマーのためのネーミング辞書です。新しいcodicでは、翻訳エンジンを搭載しネーミングをジェネレートできるようになりました。

contractio 2022/12/21

おしごと

リンク

Web制作を変える！2022年の便利オンラインツール・ベスト110選

Web制作を変える！2022年の便利オンラインツール・ベスト110選これからのウェブデザインに欠かせないツール大集合この記事では、2022年に公開された便利なWebオンラインツール・ベスト110個+をまとめてご紹介します。定期的にリストアップしている最新オンラインツールまとめ記事では、2022年にかけて、合計343個の新しいツールやサービスを紹介してきました。その中でも、Webデザイン制作に便利なツールを厳選したコレクションで、﹁無料で利用できるツール﹂を揃えています。特に今年は、人工知能やAI テクノロジー関連のツールが増えたことで、Webデザイン制作をより快適に進めることができるでしょう。カテゴリごとに整理しているので、目的にあったお気に入りツールを探してみましょう。コンテンツ目次 🕹 CSSツール︵16個︶ 🧰 Webデザイン便利ツール︵19個︶ 🦄 デザインツール

contractio 2022/12/21

リンク

スマホのSEO施策は大丈夫？今やるべき画面の改善案をアユダンテ株式会社の江沢氏が解説【2022年版】 | 【レポート】デジタルマーケターズサミット2022 Summer

contractio 2022/12/15

リンク

UXライティングについて考える。「使う人に寄り添った文章」はなぜ大切？｜平野太一

プロダクトのおしらせ系の文章は、﹁やってほしいこと﹂があった上で、使う人にわかりやすく伝えるというのが役割です。でもそれだけだと、コンテンツ過多な状況では難しいのでは？と感じることが増えてきました。なぜなら読む側は、つねに﹁読まない﹂﹁行動しない﹂という選択ができるから。これからのプロダクトは、使う人の感情に寄り添い︵共感して︶、使う人の言葉で説明できるという新しいスキルが求められるのではないか？そんなふうに思ったので、この機会にまとめてみました。・・・きっかけは、Slackの﹁アップデート文言﹂ Twitterで Slackのアップデート文言がすごい！と話題になっていました。ただ、当時の自分は何がすごいのか言語化できなかったので、﹁SlackのUXコピーが名文だったので写経した﹂の記事をまねして、自分も写経してみました。このnoteを見習って、Slackのアップデート文を

contractio 2022/12/09

「これらの文すべて、ユーザーである僕らのことを先回りして寄り添ってくれる文章であることが伝わってきました。」気持ち悪い。

おしごと

リンク

UXライティングで「短く書く」がクソ大事なのは人間がマジでWEBのテキストを20%程度しか読まないから｜nao | UXライター / コピーライター | 著書『#秒で伝わる文章術』発売中

私がUXライティングをする中で気を付けていることのひとつが、とにかく短く書くということです。広告コピーの講座に通うと、コピーは短く、簡潔に書くことを求められます。広告コピーの教科書として評価の高い﹁広告コピーってこう書くんだ！読本﹂の中で、著者の谷山雅計さんは、その理由を﹁誰も広告を積極的に見ようとはしない﹂からだと書いています。テレビを見ていても、新聞を読んでいても、意欲をもって広告を﹁さあ、見るぞ！﹂﹁さあ、読むぞ！﹂とはならない。基本的にはボーッと見ています。極端なことを言えば、広告など見ていないと言い切ってもいいぐらいです。広告をつくる側は、その彼らを振り向かせなくてはいけない。﹁あれ、なんだろう？﹂と注目させて、しかも伝えたい内容をしっかりと理解してもらうところまで誘導しなくてはいけない。そう考えると、長いコピーは、読む手間がかかるというそれだけで、まず高いハードルになってし

contractio 2022/12/09

2019年12月の記事

おしごと

リンク

ユーザーはいかにテキストを読まないか

月並みなWebページの場合、平均的アクセス中にユーザーが読むテキストの量は多くても全体の28％にすぎないという分析結果が出た。より現実的には、20％程度とみられる。 How Little Do Users Read? by Jakob Nielsen on May 6, 2008 Webユーザーによるテキストの読み方を調べ始めた当初から目に付いたのは、彼らが大してテキストを読まないものだという事実である。テキストを流し読みするのは、リテラシーが比較的高いユーザーにきわめてよく見られる行為だ。最近実施したアイトラッキング調査でも、それを一段と裏付ける結果が出ている。これまで唯一欠けていたのは、ユーザーがどれだけ多くの（またはどれほどわずかな）テキストをオンラインで読むのかを正確に割り出す公式だ。新たなデータのおかげで、それもやっと用意できた。調査研究データすべての調査結果を詳しく見たい

contractio 2022/12/09

2008年5月の記事

おしごと

リンク

はてなブックマーク

タグ

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

おしごとに関するcontractioのブックマーク (1,321)

お知らせ

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

月間はてなブックマーク数ランキング（2024年6月）

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

公式Twitter

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

はてなブックマーク

公式Twitter

はてなのサービス