破綻しにくいCSS設計の法則 15 - Qiita
ブラウザスタイルは平坦化しておく リセットCSSはオプトアウト可能にしておく 登場頻度の高い組合せはplaceholderとして登録してから利用する 可能な限り画像はスプライト生成してから利用する それ以上分解不可能なコンポーネントは要素のように扱う コンポーネントは自己完結型のものを使う BEMはDRYになるよう粒度を下げる 可能な限り@extendは利用しない レスポンシブでない場所では、Utilitiesクラスを活用する shame.cssはいつも綺麗にしておく 詳細度または特異性の高いものほど後方に記述する 可能な限り!importantしない 可能な限りハックしない 変数をデザインガイドとして活用する CSSファイルを分割するメリットはほとんどないので一つにまとめる 1. ブラウザスタイルは平坦化しておく 例えば、こういうScrap & Buildは単に通信量のムダ。 * { f
ウェブデザインの勉強に！サイトのトレースを爆速化するツール5選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーのみやです。 僕の地元では電車のドアは手で開閉します。襖のように左右に手で開けるのですが、未だにこの癖が残っていてたまに手を持っていかれます。 ところでデザイナーの皆さんは、どのようにウェブデザインを勉強していますか？ 僕は最近、ウェブサイトのトレースを始めました。 トレースとは、実際のウェブサイトをキャプチャしてその上から全く同じサイトを作っていく作業のことになります。 実際に手を動かしながらサイト構造やトンマナを学べるため、非常に効果的な勉強法です！ 今回はこのトレースを効率良くおこなうためのツールをご紹介します。 ウェブサイトの勉強で何をすればいいか分からない方や、なかなか時間が取れない方などにおすすめです！ Google Chrome拡張機能 サイトのキャプチャに便利な『Awesome Screenshot』 https://chrome.google.com
2015年のWebサイトの作り方 at 67ws
The document summarizes quotes from three individuals about web design and development. Tim Berners-Lee notes that the primary principle of the web is universality, meaning it should be accessible from any device. Jason Fried argues that designing in Photoshop wastes time, as the design then needs to be rebuilt in HTML/CSS. Instead, one should design directly in HTML/CSS to allow for faster iterat
ユーザ体験（UX）を語るWeb制作会社に求められるサービスの質とは | ベイジの日報
僕はコーヒーを飲まないのだけど、外出時に時間が空くと、ついスタバに行ってしまう。コーヒー以外に飲むものがあるから、というのも確かにそうなのだけど、理由はそれだけではない。 快適な店内空間、隣と程よく離れた席のレイアウト、PCが繋げる電源、禁煙であること、どの店員さんも必ず愛想がよいこと、といったような、スタバで体験する様々なことの質がおしなべて高いため、わざわざGoogleMapで検索してまで最寄りのスタバに行く。行ってみたらやたらと狭いお店でガッカリすることもたまにはあるのだけど、そういうことが一番少ないのがスタバだと思う。 そして、これこそが「良質なユーザ体験がデザインされている」ということなのだろう。 Webやアプリを作る業界では、毎日のように「UX（＝ユーザ体験）」という言葉が飛び交っている。僕はいろいろと考えがあって、この「UX」という言葉はあまり使わないようにしている。なのでこ
Googleウェブマスターツール活用できてる？アクセスアップのために見るべき4つの項目とその見方、教えます。
昨日の記事で、Googleアナリティクスでは足りない部分を補うのに色々なツールを使いましょうという事をお伝えしました。 参考：Google アナリティクスに決定的に欠けているもの。知ってる？ 特に、検索エンジン（特にGoogle）からの流入を増やしてアクセスアップを目指したいなら、Google ウェブマスターツールは、どう考えてもアナリティクスに負けず劣らず重要なツールになります。 にも拘らず、不思議なことにウェブマスターツールのアクセスアップ活用法をガッツリ説明してるサイトは非常に少ないですよね。 という訳で、今日はGoogleウェブマスターツールの活用方法について、お伝えしたいと思います。 ここだけはメモして欲しい大事なポイント昨日の記事でもお伝えしましたが、 Googleウェブマスターツール = サイトに訪問するまでの解析Googleアナリティクス = サイトに訪問した後の解析ここが
ゼロから始める！tumblrカスタマイズ超入門！
こんにちは！はじめまして！ カヤックHTMLファイ部に来年度新卒で入社予定のもときです。 現在はインターンとしてカヤックに来ています。 今回はtumblrについての記事です。 tumblrに関する記事はググればいくらでも出てきますが、 このデザイナーズブログではまだ扱っていないようなので、 tumblrの魅力と、tumblrサイトのカスタマイズのはじめかたを、 僕なりに紹介してみたいと思います！ ・tumblrってなんとなくは知ってるけど、一体どんないいことがあるの？という方 ・いまtumblrを使ってて、もうちょっとカスタマイズしてみたい方 ・これからtumblrでサイトを作ってみようと思ってる方 そんな方に向けた記事です。 tumblrの魅力 tumblrとは このブログを見ているような方々なら、今や知らない人のほうが少ないのではないでしょうか。 それほどにすでに有名なサービスですね。
背景に動画を使ったWebサイトの作り方
2023年5月12日 jQuery, Webサイト制作, Webデザイン 2012年後半あたりから少しずつ目にする機会が増え、今では海外サイトを中心に世界中に広まった、背景に動画を用いたWebサイト。サイトの雰囲気や、サービスの具体的な内容を背景に流すことで、よりユーザーの視点をスクリーンに注目させることができます。今回はそんな背景動画の実装方法を、実例サイトと共に紹介していこうと思います。 ↑私が10年以上利用している会計ソフト！ KINS WITH 動物病院のWebサイトでは、かわいいわんちゃんの動画とともに院内の様子がよくわかる動画を掲載しています。 AquallのWebサイトでは画面全体ではなく、動画の一部をくり抜いたような形で動画を掲載。背景の装飾としてよく溶け込んでいます。 動画を用意する まずは背景に表示したい動画を用意します。動画を用意する方法は大きく分けて4通り。 自分で
見出しデザインの参考にしたい CSSで作るhタグのサンプル集 | 日刊ウェブログ式
ブログの記事タイトルやサイドバーのタイトルなどで使えるオーソドックスな見出し（hタグ）のデザインサンプル集です。見出しにはCSS3や画像を使っていないのでシンプルですが、一応よく使うので、メモとしてエントリーしておきました。 ※追記6/24 HTMLのマークアップをpからh3に置き換えました。 見出し(Headline)のサンプル集 色やボーダーサイズ等の装飾部分は お好みで編集してください。 見出しサンプル01 .selector01{ border-left:7px solid #e3297d; padding:.6em .8em } 見出しサンプル02 .selector02{ border-left:7px solid #ccc; border-bottom:1px solid #ccc; padding:.6em .8em } 見出しサンプル03 .selector03{ bor
FINDJOB!終了のお知らせ | FINDJOB!
FINDJOB! 終了のお知らせ 2023年9月29日にFINDJOB!を終了いたしました。 これまでFINDJOB!をご利用いただいた企業様、求職者様、様々なご関係者様。 大変長らくFINDJOB!をご愛顧いただき、誠にありがとうございました。 IT/Web系の仕事や求人がまだ広く普及していない頃にFind Job!をリリースしてから 約26年間、多くの方々に支えていただき、運営を続けてまいりました。 転職成功のお声、採用成功のお声など、嬉しい言葉もたくさんいただきました。 またFINDJOB!経由で入社された方が人事担当になり、 FINDJOB!を通じて、新たな人材に出会うことができたなど、 たくさんのご縁をつくることができたのではないかと思っております。 2023年9月29日をもって、FINDJOB!はその歴史の幕を下ろすこととなりましたが、 今後も、IT/Web業界やクリエイティブ
PHP で「Login with Facebook」を実装する基本的な方法まとめ
Facebook は Login with Facebook という機能を提供してくれてて 手元のウェブサービスに Facebook を使ってログインすることができますね。 日本語表示だと「Facebook でログイン」というやつ。 本家から便利なツールも提供されていて かなり簡単に使えるようになってるんだけど、 最初は少し戸惑うかもしれないので使い方をまとめておきます。 やり方もできることもいっぱいあると思いますが 簡単だと思われるやり方と、最も基本的な機能を中心に。 やりたいこと ウェブサービスのページ上にこういうボタンか 専用のボタンまたはリンクが表示されていて ユーザーがこれをクリックするといったん Facebook に飛び そこで承認ボタンを押したら元のページに帰ってきて その時点でウェブサービスがユーザーの ID や名前などを取得できるというの。 以下、手順です。 Facebo
日本の全エンジニアに捧ぐ！現在公開されているAPI一覧【2013年版】 | Find Job ! Startup
2013年のいま、API界隈が熱い！ 今年に入り、官公庁の統計データやNHKの番組情報など、今までなかなか利用できなかったデータがAPIとして扱えるようになってきました。このエントリでは現在公開されているAPIを一覧でまとめます。いま使えるAPIはこれだけ読めば大丈夫。2013年の最新マッシュアップ事情をあますとこなく網羅します！ HOT! API 総務省 次世代統計利用システム（国勢調査、人口推計、就業構造、企業統計、物価統計 etc.） NHK番組表（※未公開） 行政・自治体・公共サービス 郵便番号 郵便番号検索API（郵便番号 → 住所） 郵便専門ネット（郵便番号 → 住所、郵便番号の簡易存在チェック） ぽすたん（郵便番号 → 住所、住所 → 郵便番号） IW3 PROJECT（郵便番号 → 住所、住所 → 郵便番号） 宇宙 Google+ JAXA PR（※現在一部の学生に限定公開
「Web制作のリアルな工数と見積もりの話」の話をしようじゃないか！
raf00がWEB制作の見積もりについて書きたいなぁとか言いながら1年半が経ちました。 で、いずれ書かなきゃなーと思いながら過ごしていたら、WP-Dさんが非常に興味深いエントリを上げられていましたので、これに便乗する形であれこれ書きちらしてみたいと思います。 WordPressのリアルな工数と見積もりの話をしようじゃないか！ | WP-D ウェブ制作の見積もりを金額付きで晒してやろうじゃないか！ | WP-D ■あの見積もりは妥当か否か なかなかブコメなどの反応が興味深い見積もりサンプルですが、現在の（上場企業の制作業務に対応できるくらいには）真っ当なWEB制作会社が企業向けに出す見積もりとしては項目・工数・価格的には概ね妥当かつ適切だなと感じられます。サンプルであるがためにこまごまとボヤけた点はあるものの、WEB制作会社のプロデューサー・ディレクターやクライアント企業のWEB担当者ならば
デザインどや！？｜海外カジノ オンラインのWEB作成
Webページレイアウト、ナビゲーションプラグイン、フォーム、スライダー＆カルーセルプラグイン、チャート＆グラフプラグイン、イメージエフェクトプラグイン、ビデオプラグインなど。チェックしておきたいです。海外カジノ オンラインサイトの制作はワードプレスのプラグインを利用して様々な機能を付け加えて完成させることができます。2012年のjQueryプラグインまとめでは、デザインの一新や個別のカスタムにも対応した国際的で魅力的なサイト作成に役立つ情報を紹介しています。
見た目を綺麗に整列する！ブロックレベル要素の高さを揃えるJS3選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
お疲れ様です、デザイナーのモモコです。 コーディング中にいざ本番の文言を入れたら、予想以上に長さがバラバラで見た目が揃わない…！なんてこと、ありますよね。今回はそんな時に活躍してくれるブロックレベル要素の高さを揃えるjsを3つご紹介します。 heightLine.js 配布ページ <script type="text/javascript" src="heightLine.js"></script> class名のつけ方によって高さを揃える要素をコントロールできるJavascriptです。 子要素の高さを統一できる「heightLineParent」が便利で良くお世話になっていました。 jQueryAutoHeight.js 配布ページ※このページは現在削除されています。 <script type="text/javascript" src="jquery.js"></script> <s
身につけておきたいWebサイト高速化テクニック #2｜検証ツールとそもそもHTTPって何だ編 | DevelopersIO
第1回のアジェンダ編では、高速化に関わる要因と解決策の全体像を紹介しました。 アジェンダ編にもかかわらず多くのブックマーク、シェアをいただきありがとうございます！ 余談ですが、記事にブックマーク、シェアをしていただくと、このブログでは執筆者に経験値がたまるような仕組みになっています。 たくさん経験値を貯めると四半期ごとに良いことがあるかもしれないので、気が向いたらこの他の執筆者の記事もシェアしていただけるとうれしいです。 言葉にせずとも、わかっていただけると思いますが、この記事も・・・ね？ 右上にあるボタンをちょちょっと。 本題 余談はさておき、本題に入りましょう。 今回は「無駄なリクエストとレスポンスの削減」に視点を置き、解決策について調査、計測して紹介してみたいと思います。 と思ったのですが、長くなりすぎたため、まずは「検証ツールとHTTPについて」紹介することにしました。 この記事の
HTML5 × CSS3 × jQueryを真面目に勉強 – #12 Pinterest風グリッドレイアウトを作ってみた | DevelopersIO
そんな訳で、写真共有SNSの一つであるPinterest(ぴんたれすと)。従来のグリッド式レイアウトのように高さが均一のグリッドが整然と並べられているのと違い、異なる高さのグリッドが画面いっぱいに敷き詰められているレイアウトが特徴的でオサレです。（※こういったレイアウトはピンボード風と呼べば良いのでしょうか…？） Pinterest Pinterest とはピンボード風の写真共有のソーシャル・ネットワーキング・サービス。特に女性に人気がある。ウェブサイトとアプリはテーマに基づいて写真のコレクションを作ることが出来る。サイトのミッションステートメントは「面白いと感じるものを通じて世界全員をつなぐ」。アメリカ Palo Alto にある Cold Brew Labs によって運営されている。 Wikipediaより引用(http://ja.wikipedia.org/wiki/Pinteres
3分LifeHacking：Webサイトのブラウザ別スクリーンショットを一括取得する - ITmedia Biz.ID
自分のWebサイトが、ブラウザによって、またはOSによってどのように見られているか――。いちいちブラウザをインストールするのも面倒だし、OSの切り替えはもっと難しい。オンラインで手軽にチェックできるサービスを紹介しよう。 Webページの表示に利用するブラウザやOSなど、人によって利用環境はさまざまだ。自分の環境ではきちんと表示できるWebページでも、他人の環境では見え方がまったく違っていて、レイアウトがガタガタだったり、最悪の場合は一部が表示されないなど、ヒサンな状態になっていることもしばしばだ。 最近であれば、個人のブログが要注意。さまざまなブログパーツを共存させている場合は、ブラウザやOSなど条件の違いによってレイアウトが崩れる確率も高くなる。こうした事故はなるべく防ぎたいと思っていながらも、チェックの手間がかかることから、半ばあきらめている人も多いのではないだろうか。 今回紹介するの
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IDEA * IDEA
Web制作会社に飛び込んだ新入社員にとりあえず読ませたいスライド
日本語で学べるHTML5関連資料15個まとめ : 二十歳街道まっしぐら
