CSSを活用してHTMLのセマンティックエラーを指摘する方法 - ICS MEDIA
CSSはWebページの見た目を整えるものですが、ちょっと違う使い方もできます。たとえば、予期せぬ横スクロールが発生した時、以下のようにすることで全ての要素のアウトラインが表示され、不用意にはみ出している部分が視覚的に分かりやすくなります。 * { outline: 2px solid red; } これを応用してタグの不適切な利用部分をハイライトできます。 このような不適切なタグ利用を検知して警告する「デバッグCSS」を作ってみました。このようなCSSをLintのようにする使い方は#lintHTMLwithCSSのハッシュタグで海外でも考案されています。仕様上許可されないものは赤色で点滅、ダメではないが、やらない方がベターなものは黄色で点滅するようになっています。 当記事では下記のデモを見ながらだと理解を深めやすいので、合わせて読むことをオススメします。 サンプルを別ウィンドウで開く コー
お問い合わせフォームのウェブアクセシビリティー対応の方法 - ICS MEDIA
フォームはウェブサイトの中でもインタラクションの多い箇所です。ユーザー側にきちんと情報を伝え、そして正しく入力してもらう必要があるのでアクセシビリティーには気をつけたいです。アクセシビリティー対応といえばWAI-ARIAによる支援がありますが、この記事ではWAI-ARIAに限らずどう対応するべきなのか、デモを用いて紹介します。 バリデーションに関してシンプルに実現できるものと、ちょっと凝ったリアルタイムバリデーションのものと2例用意しています。後者は動的に変化するコンテンツへのアクセシビリティー対応について解説しています。 サンプルを別ウィンドウで開く（シンプル版） サンプルを別ウィンドウで開く（リアルタイム版） コードを確認する ▼シンプルなバリデーション ▼ちょっと凝ったバリデーション まずはセマンティックなマークアップを WAI-ARIAを使ったコーディングというと、とにかくrole
Adobe XD 待望の新機能！自由自在な動的レイアウトを実現するスタックとスクロールグループの使い方 - ICS MEDIA
Adobe XD 待望の新機能！自由自在な動的レイアウトを実現するスタックとスクロールグループの使い方 Adobe XDの2020年6月の大型アップデートでは、目玉機能として「スクロールグループ」と「スタック」が搭載されました。 「スクロールグループ」はアートボードとは別のスクロール領域を定義できる機能、「スタック」はオブジェクトの並び順と間隔を管理できる機能です。 とくに「スタック」は使いこなせるかどうかで、デザイン制作のスピードがかなり変わってくるのでしっかりと覚えておきましょう！ スクロールグループの使い方 スクロール領域を定義できる「スクロールグループ」が登場しました。「水平方向にスクロール」「垂直方向にスクロール」「水平方向と垂直方向にスクロール」という3種類の方向を設定できます。 「水平方向にスクロール」はカルーセルのような、画面幅以上の要素を横スクロールさせるのに便利です。
Adobe XDでスマホとデスクトップのプロトタイプを同時に管理できる！最新機能マルチフローとは - ICS MEDIA
Adobe XDの2020年8月のアップデートでは、「マルチフロー」が搭載されました。 「マルチフロー」とは、複数のプロトタイプのフローを設定できる機能です。プロトタイプを理由に、デスクトップとスマートフォンのデザインを別々のファイルで管理する必要がなくなる他、ユーザーの流入経路による表示切り替えなどもプロトタイプしやすくなります。 プロトタイプがさらに簡単で管理しやすい機能になりますので、デザイナー・ディレクターにはとても嬉しい機能です！それでは、「マルチフロー」の使い方と注意点を紹介します。 マルチフローとは 前述の通り、マルチフローとは1つのファイル内で複数のプロトタイプのフローを設定できる機能です。 今までのXDでは1ファイルの中で管理できるプロトタイプのフローは1つでした。そのため、デスクトップとタブレット、スマートフォンのデザインを同じファイルで作っていると共有リンクの作成や更
Adobe XDで3D表現が可能に！ 3D変形、CCライブラリの統合強化など新機能紹介 - ICS MEDIA
2020年10月20日〜23日に開催されたAdobe MAXで発表され、大きな盛り上がりをみせたAdobe XDのアップデートについて紹介します。 今回のアップデートの目玉機能はオブジェクトに3Dの軸を追加できる「3D変形」です。これにより奥行きのある表現が可能になりました！ 以下のようなプロトタイプもAdobe XDで作成されています。 そのほかにも、「強化されたCCライブラリの統合」「自動高さ調整テキスト」「ネストされたコンポーネント」などたくさんの新機能が登場しました。今回のアップデートで登場した、全ての新機能の使い方を紹介します！ 3D変形 XDで3D空間の変形ができるようになりました！ 3D変形によって奥行き（Z位置）やY軸方向の回転、X軸方向の回転ができるようになります。 3D変形の登場によりXDでAR分野のプロトタイプができるようになり、デザインツールとしてレベルアップしまし
最新版で比較するAdobe XDとFigmaの違い - プロトタイプ機能編 - ICS MEDIA
この記事は『最新版で比較するAdobe XDとFigmaの違い - デザイン機能編』の後編です。 前編ではAdobe XDとFigmaのデザインに関する主要な機能を比較しながら紹介しました。それぞれのツールでデザインを行う上での得意、不得意について理解いただけたかと思います。 後編では作成したデザインに画面遷移やインタラクションを追加できる「プロトタイプ機能」と、ユーザーテストやデザインのフィードバックが行える「共有リンク機能」について紹介します。最後に、各ツールに用意されている「学習手段」についても紹介します。 プロトタイプ機能の比較 プロトタイプ機能とは、デザインに画面遷移やインタラクションを追加して実際の動きを試作できる機能です。これによって、早期のユーザーテストや仕様のチェック、インタラクションのイメージ共有が容易になります。 トリガーとアクション トリガーとはユーザーが行う「クリ
最新版で比較するAdobe XDとFigmaの違い - デザイン機能編 - ICS MEDIA
近年、UI/UXデザインで活躍するデザインツールとしてAdobe XD、Figma、Sketch、InVisionなどさまざまなツールが登場しています。本記事では日本での人気が高い「Adobe XD」と近年盛り上がりを見せている新進気鋭のデザインツール「Figma」にフォーカスして機能の紹介、比較をします。 UI/UXデザインツールには、大きく分けてデザイン機能とプロトタイプを作成し共有する機能の2種類の機能があります。今回の記事では、デザイン機能に重点を置いて紹介します。 Adobe XDを使っているけどFigmaも気になっている方や、その逆という方のデザインツール選定のヒントになればと思います。 Adobe XDとは？ Adobe XDとは、2017年に正式リリースされたUI/UXデザインツールです。IllustratorやPhotoshopと操作感が似ておりAdobeユーザーであれば
リプレースしたいのに出来ない、COBOLシステムへの悲痛な叫び - 提案依頼ポスト DX：日経クロステック Active
日経クロステックの調査によると、約6割の企業にCOBOLを使った情報システムがいまだに存在している。さらにこのうち76.9％は具体的なリプレース計画がない状況だ。深刻なのは「リプレースしたいが具体的な計画はない」という回答の多さ。リプレース計画がない回答の約3割に上っている。これらの企業は「お荷物」と化した塩漬け状態のCOBOLシステムを捨てるに捨てられない状況といえる。 コメントを見ても、お荷物ぶりがうかがえる悲痛な叫びが多く寄せられた。例えば40代の社内SEは「リプレースしたいと考えているが、ベテランエンジニアは既に退職し、仕様を深く理解している人がいない。この状況では、なかなかしづらい」と嘆いている。 「リプレースする上で、設計書に記載されていない部分をソース（コード）から読み解く作業で漏れが多発する。当時、設計書の作成が重視されていなかったことに起因するが、COBOL自体を知らない
6割の企業にCOBOLシステムがいまだ存在、「お荷物」なのに捨てられぬ理由 - 提案依頼ポスト DX：日経クロステック Active
2019年に生誕60周年を迎えたプログラミング言語の「COBOL」。人間にたとえれば「還暦」に相当するが、今でも企業内にはCOBOLを使ったシステムが広がっている。 日経クロステックが2019年に実施したアンケートによると、ユーザー企業は自社内に、IT企業は担当企業にCOBOLシステムがあると答えた割合は、実に61.6％に上った。登場から60年を経た今でも、多くの企業でCOBOLシステムが現役として使われている状況だ。 COBOLシステムの有無をユーザー企業とIT企業別に見るとどうか。ユーザー企業に所属する回答者は55.5％が社内にCOBOLシステムがあると答えた。これに対してIT企業に所属する回答者は68.4％があると答えた。約13ポイントの差はあるが、いずれにしても高い水準である。 注目すべきはリプレース計画の少なさだ。COBOLシステムがあると答えた回答者にリプレース計画をたずねると
【Xcode】コードスニペットを作って効率化を図ろう！ | DevelopersIO
こんにちは、リルオッサです。 以前コードスニペットを登録したことがあったのですが、忘れてしまっていた箇所があったので再度調べてまとめてみました。 そもそもコードスニペットってなに？ コードスニペットとは、こんな感じです↓ 酢にペット、、、 はい、残念。全然違います。 スニペット（snippet）は、英語で切れ端や断片を意味し、コードスニペットは、プログラム上で簡単に切り貼りして再利用できる部分のことです。 プログラムを書いていると、「この部分頻繁に書いてるな」とか「少し修正したら使い回しできるな」というものに出くわしますが、そういうパターンをスニペットとして登録しておいて簡単に再利用できるようにします。 コードスニペットを登録してみよう まずはコードスニペットとして登録したいプログラムコードを選択します。 選択して右クリックを押すと、メニューが出てくるので、Create Code Snip
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
