入門者向け alt属性の書き方アドバイス Web Accessibility Advent Calendar 2017
入門者向け alt属性の書き方アドバイス Web Accessibility Advent Calendar 2017
BLOG ATOM入門STEP2!おすすめパッケージ設定[atom-color-highlight,color-picker,csscomb,japanese-wrap]など こんにちはおかべんです! 前回「ATOM無料エディタ使い方入門STEP1!特徴と簡単パッケージ設定」で紹介した ATOMエディタの本題であるパッケージについておすすめを紹介したいと思います! atom-color-highlight これはカラーコードの色をプレビューを見なくてもエディタ上で表現してくれる優れモノ。 言葉で説明するより下記のキャプチャを見て下さい。 エディタ上ですぐわかるのでとてもいい感じ! color-picker カラーピッカーをATOMエディタ上に表示させる事ができます。 ちょっとした時に役立ちます。 csscomb CSSプロパティを整理整頓してくれます。 スタイルシートはその時によって記述す
少ない手間と知識でそれなりに見せる、ズルいデザインテクニック with Sass / Compass (English Version) https://speakerdeck.com/ken_c_lo/zurui-design-technique-english-version 第一回 プログラマ向けデザイン勉強会 #design4p http://connpass.com/event/1185/ で発表させていただきました。 (#p4d プログラマ向けデザイン部 主催イベント http://prog4designer.github.io/) @mah_lab さんが ズルいデザインのRails gemを作って下さいました http://blog.mah-lab.com/2012/11/07/zurui-design-for-rails/ (Repository) https://git
最近、デザインやUIについて厚めに勉強時間を割いていて、今更ながら「ノンデザイナーズ・デザインブック」を読みました。 タイトルの通り、デザイナー以外(デザイナーも?)全ての人が読むべきエッセンスが載っています。 Web制作に関わらなくても、ビジネスマンであれば、エクセルやパワポの資料作成に役立つので、読んでおくべきだと思います。 ノンデザイナーズ・デザインブック [フルカラー新装増補版] 作者: Robin Williams,吉川典秀出版社/メーカー: 毎日コミュニケーションズ発売日: 2008/11/19メディア: 単行本(ソフトカバー)購入: 58人 クリック: 1,019回この商品を含むブログ (101件) を見る 4つの基本原則 いわれてみれば確かに!という内容なのですが、意識的に理解しているのとしていないのでは、制作時、レビュー時に大きな違いが出てきます。 近接 似ている要素は近
最近多いですねー、1ページで完結するタイプのサイト。One Page Loveのサイトなんかから、シングルページの事例も大量に見ることが出来ますし、パララックスやらフリップ型のコンテンツやら、なんか色々出てきてて着いて行くのがやっとです… でも実際シングルページをつくろうとすると、え?何これどうなってんの?って物も多くてビビることもしばし。 ってことで、今日は僕が知ってる中で『お、これ、シングルページ作る時に使えるんじゃね?』って物を幾つかご紹介させて頂きます! 主にはシングルページデザインの表現の幅を広げるjQueryプラグインの紹介になるかなと思いますが、楽しい物も多いので、是非興味があれば試してみてくださいませ〜! それではいってみましょー! パララックススクローリング系プラグイン この辺は以前に紹介したことがあるものばかりなので、ぱぱーっと行きます。 jQuery Waypoint
※この記事は2014年2月4日に執筆された記事です。現在は仕様が異なる可能性があります。 CSSを効率的に書ける言語として昨今話題のSass。 これから導入をお考えの方に向けて2時間でマスターできる初心者向けのSass講習スライドを公開致します。 普段CSSを書く人も書かない人もSassがどういうものかを知る良い機会ですので、是非ご覧ください。 スライドに沿って実践すればSassの基本を短時間でマスターできます! この講習では目で見るよりも実際に触れる事で理解が深まるよう、実習スタイルを取っています。 実習に使うファイルセットはこちらからダウンロードして上記のスライドと合わせてお使いください。 https://webnaut.jp/download/markup_140204/sass.zip(3.5MB) Sassの良さを活かすためには、チーム全員がSassを理解することが大切 Sass
ブログのドメインをwww有り、無しのどちらかに統一させたり、サブドメインを利用したり、新しいドメインに引っ越しをした時に役立つリダイレクトに関する.htaccssの設定を紹介します。 CMSでよく見かけるパラメータ(.php?username=namae&page=2)付きをすっきりしたURLにするのも便利です。 Htaccess File Tutorial and Tips. 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。無断翻訳・まとめ記事の転載をしているあのブログの注意喚起を海外のブロガーから聞くのでご注意ください。 リダイレクトの前にやっておきたい.htaccessファイルの設定 .htaccessファイルの準備 「.htaccess」ファイルはテキストエディタで編集します。また、Apacheサーバーのphp.iniでmod_
リダイレクト Fromにサイトパスを入力、ToにURLを入力 301 Moved Permanently 恒久的に移動 From: To: From: To: From: To: 302 Moved Temporarily 一時的に移動 From: To: From: To: From: To:
前回までの記事で簡単なレイアウトを作成して、xhtmlとHTML5でマークアップしたものからHTML5の新要素の説明を行い、アウトラインを確認してみました。最終回となる今回はxhtmlとHTML5のCSSをほとんど変えずに同じレイアウトになるように作成してみたいと思います。 HTML5でCSSを設定する場合は新要素に対応していないブラウザに対してどうするのか。まだ確定していないHTML5の要素が変更になった場合を考慮して、スタイルの設定を考えた方が後々の大きな修正を回避できるのでベターです。ただ今回のレイアウトはほとんど同じCSSを使うということで作成するので、多少気になる部分もあるかと思いますが、ひとつの例として見ていただければと思います。 解説:(有)ムーニーワークス 林 豊/田崎一成 前回まででアウトラインを確認したそれぞれのマークアップしたページのサンプルこちらにあります。 ●HT
Webサイト運用の課題を弊社プロダクトで解決したお客様にインタビュー取材を行い、100の事例を108ページに及ぶ事例集としてまとめました。 100事例のWebサイト運用の課題と解決手法、解決後の直接、間接的効果がわかる 情報通信、 IT、金融、メディア、官公庁、学校などの業種ごとに事例を確認できる 特集では1社の事例を3ページに渡り背景からシステム構成まで詳解
Web制作で面倒な作業を自動化するビルドツール、Grunt v0.4 入門 2013-03-14 / 2014-03-12 Webサイトの表示速度を気にすると、CSSやJavaScriptのminify、gzip、CSS Sprite、画像の最適化などの面倒な作業が発生します。 Grunt.jsとは? Grunt.jsは、サーバーサイドJavaScriptのNode.jsを使用したCUIのビルドツールです。 タスクを設定しておき、それらを自動化します。 コマンドプロンプトやターミナルなど、いわゆる「黒い画面」を使います。 Grunt.jsの現在のバージョンは0.4.1です。 バージョンが0.3から0.4になったことで、大きく仕様が変わりました。 Grunt.js v0.4ではgrunt-cliをインストールしてプロジェクトごとにGruntやプラグインをインストールして使用します。 プラグイ
ウェブサイトの制作に役立つ便利なブックマークレットを紹介します。 ブラウザの機能拡張も便利ですが、入れすぎると重くなるのがイヤな人にぴったりです。 レスポンシブの確認はこれが一番便利 コードとアクセシビリティをチェック ページに柔軟なグリッドを表示 デザインの確認がピクセル単位でできる CSSの変更をリフレッシュ無しで確認 要素のスタイルを確認 CSSのセレクタを確認 ページで使用しているカラーを抽出 CSS3をサポートしていないブラウザでの見え方 ページの見出しを抽出 ページの構造が正しいか確認 ページをワイヤーフレーム化 コードをシンタックス化して読みやすく スマフォやタブレットでもコードが見たい レスポンシブの確認はこれが一番便利
このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。 web帳
スマートフォン、タブレット、ラップトップタイプのタブレットなど、タッチデバイスに最適なナビゲーションの考察を紹介します。 単に見た目のレスポンシブではなく、操作性を考慮したレスポンシブです。 Responsive Navigation: Optimizing for Touch Across Devices 下記は各ポイントを意訳したものです。 各デバイスのサイズ 各デバイスのタッチ方法 タッチデバイスに最適なナビゲーションの位置 デモ スマフォ・タブレット・ラップトップタブレットのサイズ まずは、デバイスごとのスクリーンサイズを確認してみます。 過去2ヵ月にリリースした主要なスマートフォンのサイズ一覧です。
2012年10月20日、金沢歌劇座で UX Kanazawa が開催されました。先月、basecamp NAGOYA でおこなったプロトタイピングのセミナーの金沢版になります。主催者の @ichigami さんのご好意で急遽金沢で開催することができました。かなりギリギリの告知だったのにも関わらず定員オーバーでキャンセルなしという高出席率の会になりました。 基本的に名古屋で行った内容を継承していますが、3時間半という長い時間を活用して名古屋ではカバーできなかったことを金沢で行うことができました。ワークではチーム別で作ったプロトタイプの意図を発表する時間を設けることができましたし、批評の場をもつことが出来たのが長時間イベントの魅力。私の心配とは裏腹に懇親会に持ち越して話し合いをするという濃い時間になりました。 話し合うための領域設計 目的なしにプロトタイプを作るとコスト高になるだけでなく、話し
多くのWebサービスが立ち上がり、そして消えていったこの5年。 それでもまだまだ斬新で面白く、無料、もしくは低価格ではじめることができるサービスが多数あります。 そんなわけで今回は、Webサービス立ち上げ時のユーザビリティの報告をまとめたいと思います。 問題1)SNS連動には理由が無い 実にこの5年間で、FacebookIDがあれば開始できる、TwitterIDがあれば開始できるというWebサービスは膨大に増えました。 しかしその影にかくれ、ユーザーが抱く不信感が増えています。 その一つとして 勝手に拡散されるのがヤダというもの。 実に明確な理由の一つですが、FacebookIDを利用するサービスに多いです。 要するに、ログインしただけで自分のFacebookフィードに「○○がこのサービスを開始しました」と勝手に流されるのが嫌なわけです。 また、なにかする度に勝手にフィードを汚される事もあ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く