[B! web制作][Webデザイン] kamanobeのブックマーク

ウェブアクセシビリティ導入ガイドブック｜デジタル庁

デジタル庁では「誰一人取り残されない、人に優しいデジタル化」を実現するため、継続的に「ウェブアクセシビリティ」の向上に取り組んでいます。この度、ウェブアクセシビリティに初めて取り組む行政官の方や事業者向けに、ウェブアクセシビリティの考え方、取り組み方のポイントを解説する、ゼロから学ぶ初心者向けのガイドブックを公開します。優しいサービスのつくり手になる一助として、ぜひご活用ください。公開の背景ウェブアクセシビリティの向上に取り組むには、非常に専門的な複数の規格とガイドラインをそれぞれ確認する必要があります。そのため、適切なやり方がわからないままに、現在は間違っている対応の踏襲、不要・過剰な対応、不適切な対応をしてしまうことがあります。ウェブサイトだけではなく、申請・手続等のデジタルサービスの重要性が増す中で、最新の技術動向を踏まえた、初心者が学習できる行政機関向けの研修資料が不足していま

kamanobe 2023/06/27

そんなことより字が小さい……！！

リンク

Figmaでbootstrapを作ったので無料配布します。｜hikaru-takase /Loglass

仕事でbootstrapを使う機会があったので、これを機にfigmaでbootstrapデザインテンプレートを構築しました。Figmaとbootstrapの相性と生産性はめちゃくちゃ良いと感じてます。エンジニアさん御用達！みんな大好きbootstrapは優れたコンポーネントを提供しており、その優れたbootstrapコンポーネントを共有&共同作業に特化したFigmaで事前にコンポーネント化しておく事で、デザイナー以外の人でもパーツの組み合わせを考えるだけで実際の画面に近いプロトタイプを構築することが可能になります。細かなデザインやパーツ製作に注力しなくて良くなる分、プロジェクトの課題であるビジネス課題やシステム構成にフォーカスする事ができるのが特長です。優れたコンポーネントがデザインされていれば、デザイナー以外でも（チームで）UI/UX課題に対してアプローチしやすくなる思想や考え方は素

kamanobe 2021/07/03

リンク

ごめんなさいね。 - Lopan.jp

Webデザインとかサイト制作について、知ってる事知らない事を展開するサイト。

kamanobe 2018/01/10

リンク

Solved by Flexbox — クリーンでハックのない CSS

イントロダクションCSSには長らく適切なレイアウトメカニズムが不足していました。トランジション、アニメーション、フィルタ、これらはすべて素晴らしくて有用な言語への追加機能ですが、しかしWeb開発者が不満だった、永遠に続くようにも思われた主要な問題に対処するものではありませんでした。 Flexboxに感謝します。ついに我々は解決方法を手に入れました。このサイトはCSSフレームワークではありません。その代わり、CSSだけでは解決するのが難しい、あるいは不可能だった問題が、今やFlexboxでとても簡単になった事例のショーケースとなることが、このサイトの趣旨です。また、Internet Explorer 11の最近のリリースとSafari 6.1により、今やすべてのモダンブラウザがFlexboxの最新仕様に対応しています。以下のデモをご覧ください。Webインスペクタでスタイルを眺めるか、また

kamanobe 2016/10/04

リンク

[CSS]レスポンシブ対応のMasonryレイアウトをスクリプト無し、ピュアCSSで簡単に実装できる -driveway | コリス

去年くらいまでは、こういったレスポンシブ対応のMasonryレイアウトはJavaScriptで実装するのが主流でした。jQueryのプラグインも数多くリリースされています。そんなレスポンシブ対応のMasonryレイアウトをスクリプト無し、CSSで簡単に実装できるdrivewayを紹介します。CSSアニメーションを使ったインタラクションにも注目です！実装が簡単インタラクティブレスポンシブ対応カスタマイズが簡単拡張性も豊か実装にはFlexboxが使用されており、2016年1月12日にIEの古いバージョンのサポートが終了し、実質IE11+となった現在、多くのプロジェクトで利用できるでしょう。ちなみに、2017年4月11日にVistaのサポートも終了します。参考: Windows 製品のサポートライフサイクルについて drivewayのデモデモではdrivewayで実装され

kamanobe 2016/05/16

リンク

iPhone/iPad/Apple Watch解像度(画面サイズ)早見表 - Qiita

用語解説ポイント boundsやframe等で使用される論理的な画面サイズ。通常はこれを意識してプログラムを作成します。ピクセル描画が行われる論理的な画面サイズ。ピクセルパーフェクトな描画が必要な場合には、このグリッドに合うように描画を行う必要があります。デバイス端末に搭載された液晶の物理的なピクセル数。これが上記ピクセル数と一致しない場合には、ピクセルパーフェクトの描画は非常に難しくなります。このサイトの解説がわかりやすいです。 https://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions 拡大モード iPhone6, 6 Plusでは、画面設定から拡大モードが選択できます。上記の表にまとめた通り、retinaの倍率はそのままで、ワンサイズ小さいiPhone相当のポイント数になります。 iPho

kamanobe 2016/04/13

リンク

もう逃げない。HTMLのviewportをちゃんと理解する

kamanobe 2015/06/17

リンク

SVGを使用してる企業・団体のサイトを22ヶ国、160件以上調べてみた - 聴く耳を持たない(片方しか)

このダイアリーでは過去に何度かSVGの記事を書いているのですが、それに対する反響で SVGって未だに使ってるところを見たことが無いとかいつになったら使えるようになるのか永遠に普及しなさそうみたいな意見をよく見かけます。そうした反応にカチンときた……というほどではないのですが、納得してもらうには実例を挙げて反論するのが分かりやすいだろうな、と考えてSVGの利用状況を調査してみました。かといって個人サイトの利用例を挙げるだけでは説得力がないでしょうから、著名な企業や団体でのSVG採用事例をリストアップしてみた次第です。そしてもう一つの動機として、Webサイトの制作現場でSVGの導入を検討する際に、同僚や上司、またクライアントからの同意を得る・説得する手段としても、既に実際に利用している企業や団体を提示できれば話を進めやすいだろうな、……といった狙いもあります。例えばあの有名な

kamanobe 2015/05/25

リンク

CSSでblock要素を上下左右中央寄せにする、イマドキの方法。 | バシャログ。

Backjoyを買ってみたらほんとに腰が楽なminamiです。 CSSで要素を上下中央寄せする方法は古くから色々と試されてきました。今回は海外のサイトで知って目から鱗だった方法をご紹介します。基本的な設定上下左右中央寄せしたい要素に以下のCSSを設定します。 position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 任意の値 height: 任意の値これだけ。これだけで親要素に対しての上下左右中央寄せを実現できます。追記‥ 親要素にはposition: absolute;かposition: relative; を設定してください。body に対してセンター寄せしたい場合はそのままでOKです！今までtop とleft の値を50%にとって、要素の高さと幅の分だけマイナスのmarg

kamanobe 2014/11/13

リンク

Normalize.cssを使ったコーディングの注意点とリセットCSSとの違い | Cappee Design

東京でも桜が開花しましたね、@cappeeです。色々と検証した結果、私も﹁Normalize.css﹂を本格導入することにしました。勘違いしがちなのは、﹁Normalize.css とリセットCSS どっちがいいの？﹂ということではなく、この2つはまったく別物なので比較しようがないのです。Normalize.css を実際使ってみての注意点や、リセットCSSのデメリットなどメモしておきたいと思います。デフォルトスタイルシートまず、Normalize.css とリセットCSSを説明する前に知っておきたいのが、ブラウザごとに定義されている﹁デフォルトスタイルシート﹂です。 CSSを指定しなくても、hタグやpタグでマークアップすると、タグの意味に合ったデフォルトスタイルシートが効いてmarginだったりテキストが太字になったりします。だたしデフォルトスタイルシートはブラウザによっ

kamanobe 2014/10/20

リンク

OGPとか色々書かれてて便利なHTMLテンプレート「Rin」を公開しました | SANOGRAPHIX

HTML と Less をセットにした Boilerplate 的なテンプレート﹁Rin﹂を作りました。ダウンロードは下のリンクから。 Rin は、以前 html-template という名前で公開していたプロジェクトの改良版ですが、あまりに名前に芸がなさすぎたので、今回の変更に合わせてリポジトリ名も変えました。リーンなテンプレートなので凛です。 Rin は色々な web サイトで使える HTML テンプレートです。jQuery とか、Google Analytics のコードとか、Like ボタン設置に必要な Facebook の JavaScript SDK とか、よく使いまわすコードがあらかじめ書かれてあるので、スムーズにサイトを作り始めることができます。また、ついつい忘れがちな OGP タグもあらかじめ仕込んであるので、あとは項目を埋めていくだけでOKです。比較的最近登場した

kamanobe 2013/11/21

リンク

フォントデザイナー・インタビュー藤田重信 | 日本語Webフォントサービス

digitalstageのサイトは新会社のサイトに移動いたしました。このページは5秒後に自動的にジャンプします。 WEBLIFEコーポレートサイトへ

kamanobe 2013/08/23

リンク

floatを解除する手法のclearfix と次世代のレイアウトの話

floatを解除する手法のclearfix と次世代のレイアウトの話 2013-06-20 / 2013-06-30 2011年にclearfixについて記事を書きましたが、Micro clearfixなどの新しい手法も出てきました。記事を書いてから2年が経ち、色々思うところも出てきたので、改めてclearfixについて書きます。 floatを解除するには CSSでレイアウトの構築を行う際に、よくfloatプロパティが用いられます。しかしfloatを使用すると、「親の背景が表示されない」「下の段のレイアウトが崩れる」などのトラブルが起こりやすくなります。 floatプロパティの特性親の背景が表示されない理由は、floatプロパティを指定しているボックスが浮動化し、通常のボックスのフローから外されることが原因です。通常フローから外されたボックスは、親のボックスの高さを認識できなくな

kamanobe 2013/07/26

リンク

Tokusetsu は、同人音楽CD特設サイトが簡単に作れる無料Tumblrテンプレート（テーマ）です。

同人音楽CD特設サイトを一瞬で作ろう Tokusetsuは、同人音楽CDの特設サイトが簡単に作れる無料Tumblrテンプレート（テーマ）です。 HTMLの知識を必要とせず、フォームに情報を入力していくだけで特設サイトが作れます。カスタマイズヘッダ画像やジャケット画像はもちろん、ソーシャルボタンの有無、背景画像やフォントもカスタマイズできます。テーマカラーも白・黒の2種類から切り替えられます。

kamanobe 2013/02/13

リンク

あなたの作業を音速にするかもしれないWEB屋の作業スピードを上げるチートシート大量紹介 | バンクーバーのうぇぶ屋

このブログがフロントに関する記事が多いもんだから、たまにデザイナーと呼ばれることがあるんですが、僕は業務としてはデザインよか制作ディレクションの方がどちらかと言えばメインなんですよね。そんなディレクターとしての役割の一つに、周りにいる優れたデザイナーやプログラマー、デベロッパーの業務効率を考えることが挙げられます。何を取るわけでもなく中途半端な僕ですが、ディレクターとして周りの各プロフェッショナルの役に少しでも立てればと、そして制作する上での効率を向上させるべく色々情報収集をする中で、よくチートシートの存在を目にします。︵チートシートってどれだけ普及してるのかわかりませんが、つまりカンニングペーパーのことらしいです。︶ WEB屋にとってのチートシートって、どれだけ優れた技術力やデザイン力を持っていても、何かしら新しい発見がある物ですよね。以前書かせてもらった時間の価値は人によって違う！

kamanobe 2011/11/21

リンク

CSSでレイアウトするなら絶対覚えておきたい配置のルール：フロートや絶対配置、z-index とかいろいろ

最近改めて CSS の基本、要素の配置、レイアウトについて学習しました。過去に CSS でのレイアウトなどの記事を書いた事があるんですけど、改めて勉強してみたら、いろいろ間違えて解釈していたなー ... っていうか、基本が分かってなかったんだなーと反省 ...。今回は CSS の基本中の基本、視覚整形モデルについてまとめてみました。 Webデザインをする上で、必須とも言えるのが CSS …。このブログ – Webデザインレシピでも、過去に CSS について書いた記事がいくつかあります。最近 … でもないけど、以下のふたつは CSS でのレイアウトについて、いろいろと書いた記事でした。 CSSでレイアウトするなら絶対覚えておきたいブロックレベル要素のクセとかいろいろ – 2011年6月17日 CSS‥初心者の頃にハマったスタイルシートのあれこれ … IE7多め -2011年4月21日で

kamanobe 2011/11/07

リンク

CSSは分かるけど jQuery は苦手 … という人が jQuery に親しんでくれるといいなーと思って書きました

Webデザインをしていると、HTML と CSS だけではできない表現ってありますよね。そんな時によく使うのが jQuery。今回は jQuery っていまいちよく分からない ... っていう人が、jQuery に少しでも親しんでもらえたらいいなーと思って、知ってる事をまとめてみました。なので jQuery 初心者さん向けの記事です。とっても当たり前なんですけど、Web サイトは基本的に HTML で書かれていて、デザインは CSS で装飾されていますよね。最近では CSS3の登場で、簡単なアニメーションも CSS で作れるようになりました。でもクライアントワークでは、まだまだ CSS3を使える部分が限られているし、Webデザインに少し動きなどをつけたい時などは、まだまだ jQuery を活用する事も多いです。私は Javascript が苦手で、jQuery もどちらかというと苦

kamanobe 2011/10/19

リンク

CSSアニメーションの基礎

今さらながらCSS Animationsの使い方が分かってきたので、プロパティなどを簡単にまとめておきたいと思います。これを書くにあたって、以下の2つを参考にしました。 CSS Animations Editor’s Draft 25 July 2011CSS animations - MDN上のはdev.w3.orgにある、2011年7月25日版のエディターズドラフトです。ちなみにwww.w3.orgにある仕様は﹁CSS Animations Module Level 3﹂です。これを書いている現在、こっちは2009年3月20日版が最新となっています。基本的に2011年7月25日版のエディターズドラフトをベースに説明したいと思います。なので、現在のブラウザの実装とは異なることもあります。2つ目のは﹃Mozilla Developer Network﹄のドキュメントです。日本語版も

kamanobe 2011/10/08

リンク

著作権放棄・シンプル・軽量で、iPhoneなどにもレイアウトを調整できるレスポンシブWebデザイン対応のHTML5フレームワーク・Fluid Baseline Grid

なかなか凄いフレームワークがあったので反射的にメモ。パブリックドメインというのが何より太っ腹ですねー。自由に使用できて、シンプルで汎用的、しかも軽量で iPhoneやiPadにもレイアウトを自動調整するレスポンシブWebデザイン対応のHTML5フレームワークです。これ、凄く良い感じです。いいもの全部詰め込んだ、みたいなソフトウェアですね・・・ちゃんと使いこなせるようになりたいかも。 Media Queriesを使ったレスポンシブWebデザイン対応のCSSフレームワークです。3カラム構成で組めるようにもしてあります。マークアップはHTML5+CSS3ですが、jsを使ってIEにも対応してくれています。以下にざっと特徴を。著作権放棄(パブリックドメイン)軽量(CSSは9kb)ベースライングリッドに揃済みグリッドレイアウト対応iPhoneやiPadなどにも自動でレイアウトを調整HT

kamanobe 2011/09/27

リンク

クライアントワークでよくお世話になっているjQueryプラグインいろいろ

私が仕事で Web制作をする時に、よく利用させてもらっている jQuery のプラグインをまとめてみました。ライセンスはMIT、GPL のものばかりです。デザイン、レイアウト的に汎用性のあるものになっています。また、IE特有のバグ︵透過PNGの黒ずみなど︶対策についても少し触れてみました。 Webサイトを作る時に、何かとお世話になっている jQuery のプラグイン。HTML と CSS だけでは表現できないことも、Javascript を使うことでいろいろできるようになりますよね！インターネットを見ていると、本当にたくさんの jQuery のプラグインが公開されています。feed を読んでいても、1日一個くらいは新しい jQuery のプラグインに出会います。どれを使ったらいいか迷うくらい … 。今回は、そんな数ある jQuery のプラグインの中から、私がクライアントワーク︵仕

kamanobe 2011/09/20

よくまとまっている上に丁寧な解説つき。パララックスデザインやってみたいな〜。

リンク

はてなブックマーク

タグ

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

web制作とWebデザインに関するkamanobeのブックマーク (23)

お知らせ

はてなブックマーク透明性レポート（2024年 2月-2024年4月）

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

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

公式Twitter

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

はてなブックマーク

公式Twitter

はてなのサービス