群雄割拠のCSSフレームワークのトレンドを理解する | レバテックラボ（レバテックLAB）
執筆 山内 直 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ（代表 山田祥寛）に所属するテクニカルライター。出版社を経てフリーランスとして独立。ライター、エディター、デベロッパー、講師業に従事。屋号は「たまデジ。」。著書に『Bootstrap 5 フロントエンド開発の教科書』、『作って学べるHTML＋JavaScriptの基本』など。 監修 山田 祥寛 静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「独習」シリーズ、「これからはじめるReact実践入門」、「改訂3版 JavaScript本格入門」他、
システム構成図、ER図、フローチャートなどを描くときに無料で使える作図ツールやドローイングツールまとめ。2024
システム構成図、ER図、フローチャートなどを描くときに無料で使える作図ツールやドローイングツールまとめ。2024 システムを開発する際には、インフラを構築するためのシステム構成図やアプリケーションの仕様を検討するためのさまざまなUML関連のダイアグラム、フローチャートやデータベース設計におけるER図など、さまざまな作図をする場面があります。 これらの作図作業を支援してくれるツールは多数存在しますが、ここでは無料で使えるツール、あるいは無料プランが利用できる有料サービスなどをまとめました。 draw.io 無料で利用できるドローイングツールの代表的な存在がdraw.ioでしょう。ユーザー登録すら不要ですぐに使い始めることができて、作図したデータはGoogle DriveやOneDrive、Dropbox、GitHubやGitLab、ローカルデイバイスなどに保存できます。 GitHubにサーバ
Marp: Markdown Presentation Ecosystem
Marp:Markdown Presentation EcosystemGet started! Find Marp tools on GitHub! Create beautiful slide decks using an intuitive Markdown experienceMarp (also known as the Markdown Presentation Ecosystem) provides an intuitive experience for creating beautiful slide decks. You only have to focus on writing your story in a Markdown document. The slides above are from generated directly from Marp CoreSho
Slidevを導入してMarkdownで美しいスライドを書こう - Qiita
(PR) 本記事でご紹介している Slidev などのテクニックについて、2021/11/20(土) 開催の VS Code Conference Japan 2021 にてご紹介しました。YouTubeアーカイブや発表資料も是非ご参照ください。 Slidevとは Slidevはエンジニア向けプレゼンテーションツールです。 Markdownで記述した文書から美しいスライドを生成できます。 公式デモ とそのソースとなるMarkdown もご参照ください。 ドキュメントは以下にあります。 すぐに使えるサンプル 使用頻度の高いと思われる記法を含めたサンプルのMarkdownを以下に公開しています。 コピペするなどしてお使いください。詳細は後述します。 上記Markdownを使用しているスライドを以下にデプロイしています。 上記Markdownの記述内容と見比べていただけると分かりやすいかと思いま
Visual Studio Code入門 (全13回) - プログラミングならドットインストール
マイクロソフトが開発する多機能エディタであるVisual Studio Codeについて見ていきます。
社内SQL研修のために作った資料を公開します | 株式会社AI Shift
こんにちは、Development Teamの三宅です。 先日、社内（AI事業本部内）でSQL研修の講師を担当したので、今回はその内容について簡単に共有したいと思います。 はじめに 例年、AI事業本部では、新卒エンジニアの育成のためにソフトウェアエンジニア研修を行っております。今年はフルリモートでの実施となりました。研修期間は2週間ほどで、内容は前半が講義、後半が実践（チーム開発）でした。私が担当したのは、講義パートの一部であるSQL研修です。SQLやRDBにあまり慣れていない人でも、できるだけ体系的な学びが得られるようにすることを目標に、様々な資料をまとめて提供する方針で準備しました。結果的には、ハンズオン込みで4時間ほどのやや長い講義となりましたが、勉強になったという声も頂けたのでやって良かったと思っています。 研修資料 研修内容 SQL研修の内容は、基本的には大学のデータベース講義で
【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 items to include when referencing any individual icon: Set the pseudo-element to match eithe
【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
デザインの参考になる！ 最近のWebサイトやスマホアプリで見かけるUI、インタラクションがまとめられたギャラリーのまとめ
最近のWebサイトやスマホアプリで見かけるUI、レイアウト、コンポーネント、アニメーション、インタラクションなどがまとめられたギャラリ−を紹介します。 デザインのアイデアを探している時に、ブックマークしておくと便利です。
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フォントに変換したり改
UI画面生成AI「Uizard」でデザイナーいらず？業務の最前線で使ってみた | DevelopersIO
「Uizard」はAIを使ったUIデザインツールで、ワイヤフレーム、モックアップ、プロトタイプを短時間で作成できます。最新の「Generate with Autodesigner」サービスはUI画面を自動で生成可能。今回は実務に根ざしたサンプル生成で、UIの精度を検証します。 こんにちは。CXデザイナー事業本部のスギヤマです。普段はモバイルアプリケーションやLINEアプリケーション開発に携わっております。 「Uizard」は、デンマーク コペンハーゲンのソフトウェア企業が開発しました。AIを利用したUIデザインツールで、ワイヤフレーム、モックアップ、プロトタイプを短時間で作成することが出来ます。手書きスケッチもワイヤフレームに変換し、簡単にプロトタイプ化すること出来ます。 以前から、「手書きのUIスケッチを美しい画面デザインに変換してくれるサービス」として話題だった「Uizard」ですが、
CSS Modules で作る SVG Icon Component
この<Icon />コンポーネントを使用すると、以下キャプチャのようになります。 UI ライブラリから提供されているものを使用する選択肢もありますが、デザイナーが用意した SVG を使用する場合は自作する必要があります。自作<Icon />コンポーネントのフォルダ構成は、概ね以下のようになるでしょう。 SVG Icon Component をどう作るか アイコン画像を背景画像ではなく SVG にする理由は「塗り色」を動的に変更したいためです。新色を追加するとき、全種のアイコン画像を追加するのは大変です。SVG であれば、要素に対しpath { fill: #ff0; }のように CSS 指定をすることで動的に塗り色を変更できるため、このようなケースでは「インラインレンダリング」が選択できます。インラインレンダリングであれば、塗り色だけでなくサイズも動的に変更できます。 ただし、インラインレ
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 一番安いプランを
ユーザー操作の一括無効化で役立つ！ HTMLのinert属性の紹介 - ICS MEDIA
HTMLやCSSには、ユーザーインタラクション（ユーザー操作）を無効化するための方法がいくつか存在します。たとえば、マウスやタッチ操作を無効化したいときはCSSでpointer-events: noneを要素に指定するなど、制御したいユーザー操作によってさまざまです。 カルーセルやモーダルなユーザーインターフェイス（UI）では、非アクティブな要素が操作されないように「画面には表示されているが、あらゆるユーザー操作を受け付けない状態」にしたい場合があります。具体的には、以下のユーザー操作を無効化します。 マウスやタッチ操作を無効化したい テキスト選択を無効化したい キーボードフォーカスをあえて無効化したい 音声読み上げをあえて無効化したい 必要なプロパティや属性を複数指定することが考えられますが、そのようなときに役立つのがinertイナートと呼ばれるHTMLのグローバル属性です。 inert
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内に記
これなら分かりやすい！Webサイトのデザイン仕様書・指示書の作り方
デザイナーがWebサイトのUIを実装する際にデベロッパーに渡すデザイン仕様書・指示書の作り方を紹介します。 仕様書を作成する基本ツール、指示に適したフォントやカラー、グリッドや要素間の距離を自動的に計算するツールをはじめ、レイアウトや各UIコンポーネントのデザイン仕様の記述例まで、デザインを仕様化する解説記事です。 ブレイクポイントの説明、スティッキー要素の仕様説明、相対サイズの要素の説明方法、ボタンの文字数の説明、アニメーションする要素の説明方法など、デベロッパーに分かりやすく、デザイナー自身も見直せるデザイン仕様書を作成します。 The Art of Design Spec'ing by Mahdi Farra 🍉 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 デザイン仕様書とは デザイン仕様書に使用するツール デザイン
なぜアドビは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
Google検索品質評価ガイドラインとは？要点や有効な活用方法など徹底解説！｜ディーボのSEOラボ
検索品質評価ガイドラインの特徴 検索品質評価ガイドラインの特徴は、定期的に内容が更新されることです。 また、基本的に日本語版はなく英語版のみの提供で、ページ数が多くボリューミーです。 さらに、評価者の評価が検索順位に直接影響しません。 定期的に内容が更新される 日本語版はなく英語版のみ ボリュームが多い 検索順位に直接影響しない 定期的に内容が更新される 検索品質評価ガイドラインは、定期的に内容が更新されます。 例えば、ガイドライン「General Guidelines」の1ページ目を見ると、”March 5, 2024″のように日付が書かれてます。 これはガイドラインの内容を更新した最終日付（最終更新日）です。 この更新は過去に幾度もあり、2017年からさかのぼると計12回あります。 2017年3月14日更新 2017年5月15日更新 2018年7月20日更新 2019年5月16日更新
codic - デベロッパーのためのネーミング辞書
codicは、プログラマーのためのネーミング辞書です。新しいcodicでは、翻訳エンジンを搭載しネーミングをジェネレートできるようになりました。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://www.boel.co.jp/tips/vol154/