Webサイトの横幅まとめ - ULTRAZONEデスクトップ向けページの横幅をまとめた一覧表です。188の企業や組織について、業種ごとにまとめました。 レスポンシブWebデザインのページ(表中の赤字)は、「ブレイクポイントの最大値」と「コンテンツの横幅」のうち、大きい方を採りました。 2015-07-18
ディレクター必見！打ち合わせ時に使える、認識を“目”で合わせるテクニック | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
お世話様です。ディレクターの鮫島です。 最近、よくUNIQLOのサラファインを着ているのですが、ふとした時に「あ、それサラファインっしょ」って言われるととても恥ずかしくなるのはなぜでしょう。僕はUNIQLOさんが大好きですよ。無印さんも。 ※ちなみに男性用は「シルキードライ」って言うらしいが、サラファインという言い方のほうが印象に残るのでサラファインで通します。 そんなサラファイン鮫島がお送りする本日の記事内容は 「打ち合わせの時に使える、認識を“目”で合わせるためのテクニック」です。 私自身ディレクターなのでお客様とは、ほぼ毎日打ち合わせをさせていただくのですが、イメージ合わせを口頭でしても、なかなか完璧に合わせることは難しいです。 打ち合わせの後で認識を合わせるために簡易な資料は作ったりするものの、それでは時間のロスだったりしてあまり効率的ではないので、私は打ち合わせの場で双方のイメー
jarallax.jsの使い方解説
こんにちは、デザイナーのサリーです。 JSを書けない私が、いろいろとパララックスのJSを漁ってみて、一番書き方がシンプルでわかりやすそうだったのが「jarallax.js」でした。 使ってみたら簡単でいい感じでしたが、ところどころクセがあって悩んだ箇所があったので、覚え書きの意味も兼ねて、今回はjarallax.jsの使い方を解説します。 （注：スマホやタブレットでは上手く動きませんので、PCでご覧ください。詳しくはこちら「パララックスサイトをつくるときにディレクターが気をつけるべき4つのこと」をどうぞ。） jarallax.jsとは？ パララックスの動きが実装できるJSです。その名の通りjQueryを使用します。 公式ページはこちら： http://www.jarallax.com/ HTML <!DOCTYPE html> <html lang="ja" dir="ltr"> <hea
クライアントワークでよくお世話になっているjQueryプラグインいろいろ
私が仕事で Web制作をする時に、よく利用させてもらっている jQuery のプラグインをまとめてみました。ライセンスは MIT、GPL のものばかりです。デザイン、レイアウト的に汎用性のあるものになっています。また、IE 特有のバグ（透過PNGの黒ずみなど）対策についても少し触れてみました。 Webサイトを作る時に、何かとお世話になっている jQuery のプラグイン。HTML と CSS だけでは表現できないことも、Javascript を使うことでいろいろできるようになりますよね！インターネットを見ていると、本当にたくさんの jQuery のプラグインが公開されています。feed を読んでいても、1日一個くらいは新しい jQuery のプラグインに出会います。どれを使ったらいいか迷うくらい … 。 今回は、そんな数ある jQuery のプラグインの中から、 私がクライアントワーク（仕
CSSを使ってどのブラウザでもフォントサイズを「％」で統一させる方法 | colori
CSSによるフォントサイズの指定は「font-size」属性を使って簡単に設定することができますが、ピクセル指定などの絶対的サイズで統一する方法にくらべて非常にやっかいなのが、相対的なサイズによるサイズの統一です。 ブラウザによって異なる、フォントサイズの境界 例えば「font-size:70%」というふうに指定して、Internet Explorer 6とFirefox2.0で見てみたページが以下のようなものです。 ※ページはxmlタグつきのXHTML1.0 Strictで作成、つまりInternet Explorer6は下位互換モードで表示されていますが、標準モードでも同じサイズで表示されます。 あきらかにFirefoxで表示されたページのフォントサイズが小さくなっていることがわかります。 このように、フォントをパーセント指定した場合は、その数値によってフォントサイズを規定する境界に微
Web制作における文章の可読性について考える ｜https://wp.yat-net.com/name
ブログにしてもサイトにしても同じ事が言えますが、サイトのコンテンツで一番読むのは文章です。なので我々作り手も文章の可読性に関してはしっかり考えたいなというところです。 Index 1.文章の可読性とは？ 2.文章のブロック・段落 3.行間 4.余白 5.テンポ・リズム 6.フォントについて 1.文章の可読性とは？ 当たり前なことですが文章の可読性とはつまり「読みやすさ」です。文字が小さすぎたり、背景色に近い文字だったりすると当然可読性は落ちますね。 コンテンツに記述されていることが優れていても、文章が読みづらそうといった先入観や、読んでいて読みづらいという認識を持つとそのサイトに対してどう思うでしょうか？ 文字のサイズが小さいだけならブラウザのサイズを変更して読んでくれるかも知れませんが、他のサイトへ離脱してしまう可能性は十分に考えられます。人はストレスを感じることを嫌がりますのでよっぽど
スマートフォンサイトのHTMLコーディングメモ12個 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
display:table-cell; を活用する リキッドレイアウトのコーディングにすごく便利。 親要素に display:table; 子要素に display:table-cell; 記事リストなど、画像とテキストを横並びにするときに。 均等に横並びにしたいときに。 タップ時のカラー設定 CSSで以下のように設定。アルファ値も設定可能。 -webkit-tap-highlight-color: rgba(255,105,183,0.6); 画像、iframeに max-width を指定 img・iframeは、サイズが大きすぎて画面からはみ出すことがあるので max-width:100%; を指定する。 word-break:break-all; を指定 スマホは幅が狭いため、長いURLなどが1行に入りきりません。 word-break:break-all; を適宜指定する。 フォ
【保存版】Webフォントの使い方と無料のおすすめサイト一覧（日本語・欧文） | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
先週、新婚旅行という人生最大級の贅沢を楽しんできたため、日本に帰ってきて放心状態になっている野田です。 もう少し逃げていたかった……現実から……。 という話は置いておいて。最近LIGのブログではフォントネタが頻繁に登場するようになってきたので、それに僕も便乗しようと思います。 Webに関わっている人でも、「フォントが大事なのはわかるけどWebフォントは設定していない……」 という人も多いんじゃないですか？ 今日はWebフォントの使い方とおすすめの無料で使えるWebフォントサービスをご紹介します。 「わからないこと」が一瞬で解決するかも？ Webデザインを効率的に学びたい、転職・就職を目指している、誰かに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。LIGのスクールでは、現役デザイナーがマンツーマンで指導します！ ▼少しでも気になる方は、ぜひ公式サイトをご覧ください！
[JS]機能も充実、設置も簡単、デザインも素敵！モーダルウインドウを実装する超軽量のスクリプト -Pop Easy
Google Maps Pop Easyの使い方 使い方は非常にシンプルです。 Step 1: 外部ファイル スクリプトを</body>の上あたりに、外部ファイルとして記述します。 <script type='text/javascript' src='js/jquery.modal.js'></script> <script type='text/javascript' src='js/site.js'></script> Step 2: HTML 最低限必要なHTMLの構造は、こんな感じです。 L.1がトリガー、L.2がオーバーレイ用の空div、L3-6がモーダル内のコンテンツです。 <a class="modalLink" href="#">Click Me</a> <div class="overlay"></div> <div class="modal"> <a href="#"
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
【配色 - デザイン ★★★★★】 - Color Scheme Designer 3
Paletton, the color scheme designer In love with colors, since 2002. Paletton application Colorpedia About Paletton About Paletton Paletton.com is a designer color tool designed for creating color combinations that work together well. It uses classical color theory with ancient artistic RYB color wheel to design color palettes of one to four hues, each of five different shades. Various preview sty
面白法人カヤック
参加者の募集からトーナメントの進行対応まで、主催者が大会をより円滑に管理することのできるトーナメントプラットフォームです。
[web制作]webコンテンツの可読性を左右しそうな要素を思いつくだけ書き出した
最初に定義をしておくと、可読性とは、素早く読めるか、理解しやすいか、読んでて疲れないかという事です。これらにおいて可能な限り優れたものを作ることが、コンテンツと、それを届けようとする各セクションに関わる人が考えるべきことだという事になります。 可読性とコンテンツ まず、何はなくともコンテンツです。文章が読み易いものであることを可読性が高いという言い方をするのは聞いたことがあるかと思います。そのうち、コンテンツ自体が読み易い内容であるかどうかをリーダビリティー(readability)と言います。 リーダビリティーに関わってくるのは 文章量 図版率 内容 表現、言葉遣い といったものです。コンテンツを作る人は、自分の書いている文章の長さ、文字と図の割合、内容、表現の複雑さ等を届ける相手に適したバランスにしなければいけません。 可読性の低いコンテンツ
![[web制作]webコンテンツの可読性を左右しそうな要素を思いつくだけ書き出した](https://cdn-ak-scissors.b.st-hatena.com/image/square/78812e072c3d7a68d5f12a10df31d88ce5989c9f/height=288;version=1;width=512/http%3A%2F%2Fwebcre8.jp%2Fwordpress%2Fwp-content%2Fuploads%2F2013%2F05%2Fweb-readability-legibility-02-150x150.png)
CSSだけで簡単に吹き出しを作成する方法4つ！
こんにちは、橋本です。 今日はCSSだけでお手軽に吹き出しを作る方法をご紹介したいと思います。 今回ご紹介するサンプルは4つ 一般的な三角の吹き出し 一般的な三角の吹き出し（ボーダー付き） ぽわわーんとした吹き出し 丸い（曲線の）吹き出し 4つのサンプルの実行結果は、ここで確認できます。 IE9以上とIE以外のブラウザであればちゃんと表示されるかと思います。 IE8以下はborder-radiusが使用出来ないため、サンプル3とサンプル4がちゃんと表示されません。 それでは1つ1つ見て行きましょう。 1.一般的な三角の吹き出し まずはソースから。 <!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="UTF-8"> <style type="text/css"> * { box-sizing: border-box; } .wrapp
フッターデザイン.com -Webデザインの“フッター”を集めたサイト-
はてブ ツイートする シェアする 他のギャラリー ファビコンギャラリー 見出しデザイン ウェブコレクション このサイトについて いろんなWEBサイトのフッター（ページ下部も含む）部分を集めました。デザインの参考に。掲載サイトがリニューアルした場合はご紹介のフッターが使用されていない場合があります。 連絡先：manage.hp+footer@gmail.com copyright © footer-design.com All Rights Reserved.
デザインどや！？｜海外カジノ オンラインのWEB作成
Webページレイアウト、ナビゲーションプラグイン、フォーム、スライダー＆カルーセルプラグイン、チャート＆グラフプラグイン、イメージエフェクトプラグイン、ビデオプラグインなど。チェックしておきたいです。海外カジノ オンラインサイトの制作はワードプレスのプラグインを利用して様々な機能を付け加えて完成させることができます。2012年のjQueryプラグインまとめでは、デザインの一新や個別のカスタムにも対応した国際的で魅力的なサイト作成に役立つ情報を紹介しています。
WEBセーフカラー216色－WEBカラーリファレンス
●WEBセーフカラー216色 8ビットカラー256色のうち、MacintoshとWindowsで異なる40色を除いた216色をWEBセーフカラーといいます。 ユーザーの閲覧環境によっては、制作者の指定した色が変換されて表示されてしまう可能性がありますが、 WEBセーフカラーを使用することでそのリスクを低くすることができます。 安心して使用できる“セーフ”なカラーというわけです。 WEBセーフカラーは、RGBの各色をそれぞれ6段階に分けて、それらの組み合わせでできる色です。 16進表記の場合は00、33、66、99、CC、FFの6段階、 0～255の10進表記の場合は0、51、102、153、204、255の6段階、 パーセンテージ指定の場合は0％、20％、40％、60％、80％、100％の6段階の組み合わせでできる色は、全てWEBセーフカラーとなります。 6×6×6=216色です。 カラー
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
解放新聞による在特会関連の虚報について - 在日特権を許さない市民の会 - ニュース
http://www.designwalker.com/2009/02/clone-webdesign.html
Wireframe Showcase