いますぐ使えるCSS3テクニック集！ コピペ用サンプル付き！
面白法人カヤックがサイトリニューアル！ いきなり手前みそで恐縮ですが、今年の夏、面白法人カヤックがコーポレートサイトを2年ぶりにリニューアルしました。 「世界一更新頻度が高く、カヤックの活動がひと目で分かるコーポレートサイト」をコンセプトに、可読性が高く容量も軽いサイトに仕上げました。 ひと目見るだけで、最近のカヤックの動向が分かるようにニュースでTOPページを構成し、日々リアルタイムにカヤックの最新の情報を発信します。 技術的には、ブラウザのウィンドウサイズによって拡縮する画像はベクターファイルであるSVG（Scalable Vector Graphics）画像で置き換えたり（SVGはベクトル形式の画像のため、拡大してもボケない）、CSS3を用いることで画像の使用を極力控えたりするなど、ページの軽量化を実現しています。 カヤックサイトのCSSテクニックを丸ごと伝授！ 本稿では、サイトリニ
ホーム - ウェブパッケージ
整理され、シンプルで、使い勝手が良い。メトロスタイル（カードスタイル）は、すべてのメインコンテンツが配置されたセクション（カード）を使ってサイト構造を構築するという原則に基づいています。
デザイナーからデザインの基礎や原則を学べるエントリーまとめ（webデザイナ向け）
webデザインの入門書を買おうか迷っている方。 もしもそんな方がいたら、ネット上にはここを押さえておこうよと、webデザイナーが直接良質な記事を仕上げてくれていますのでそちらを是非一度参考にしてみて欲しいなと思いまとめて見ました。 また、その記事で、もっともぐっときた台詞もチョイスすてみました。 どんな想いで記事を書かれているかというのも大事かなと。 こちらもあわせてどうぞ。 Web制作をこれから始める人の為のスキル・HTML・CSS・ブラウザ・写真素材入手の基礎情報 とりあえず時間のない人はこの3つだけでも食べて デザインを勉強したことがない人でもデザインできるようになるかもしれない4つの基本原則 最初、デザイナーは型破りであるというイメージを抱く人も多いのですが、実際の現場では、様々な原則の上にあるルールにのっとり、そのルールを崩す「理由」があります。 例えばそれがセンスと呼ばれること
sitemap – norirow.chips.jp
コンテンツへスキップ モバイル通信 オプション扱いにはなりますが…。 大概のプロバイダーが…。 毎日WiMAXを使用しているわけですが…。 ワイモバイルと言いますのは…。 WiMAXに関しては…。 LTEに関しては…。 ワイモバイルも通信可能なエリアは拡大の一途を辿っており…。 オプションにはなるのですが…。 現段階で市場にある色々なモバイルルーターの中で…。 いろいろ調べましたが…。 思いの外知らない人が多いようですが…。 WiMAXモバイルルーターに関しましては…。 正直申し上げて…。 キャッシュバックを受け取る前に「契約を解約」なんてことになりますと…。 様々に比較検討してみましたが…。 「ポケットWiFi」と申しますのは…。 モバイルWiFiの月額料金を格別低い金額にしている会社を調査してみると…。 NTTDoCoMo又はY!mobileに規定されている速度制限が行われますと…。
クライアントワークでよくお世話になっているjQueryプラグインいろいろ
私が仕事で Web制作をする時に、よく利用させてもらっている jQuery のプラグインをまとめてみました。ライセンスは MIT、GPL のものばかりです。デザイン、レイアウト的に汎用性のあるものになっています。また、IE 特有のバグ（透過PNGの黒ずみなど）対策についても少し触れてみました。 Webサイトを作る時に、何かとお世話になっている jQuery のプラグイン。HTML と CSS だけでは表現できないことも、Javascript を使うことでいろいろできるようになりますよね！インターネットを見ていると、本当にたくさんの jQuery のプラグインが公開されています。feed を読んでいても、1日一個くらいは新しい jQuery のプラグインに出会います。どれを使ったらいいか迷うくらい … 。 今回は、そんな数ある jQuery のプラグインの中から、 私がクライアントワーク（仕
無料・商用利用OK・バックリンク不要・著作権表示も不要で使える写真や日本語フォントなどの素材サイト集 - かちびと.net
少しリソースが溜まってきたのでリンク集に して開放します。バックリンク不要で、商用 の利用可能、著作権表示も不要のWebデザイン 向け素材サイト。商用で使ってもいいけど リンクしてね、といったようなCCのBY的な ライセンスだとどうしても個人的に使いにく いのでバックリンク不要は割りと必須です。 今までのリソースをまとめただけなのでほぼ全部既出だと思います。自分用リンク集なのでいろいろ適当です。 細かいライセンスもあるので利用規約には必ず目を通してください。 9search この記事の題名の条件の素材を紹介しているサイト。小物系探すなら最初にここ見たほうが早いです。 9search ソザィ-Sozay- こちらもこの記事の題名の条件で収集していますが、素材単位ではなく、Webサイト単位で紹介しています。国内多めですかね。 ソザィ-Sozay- 国内のWeb制作に役立ちそうな無料の写真素材や
CSS Sprite Generator
What are CSS Sprites CSS sprites are a way to reduce the number of HTTP requests made for image resources referenced by your site. Images are combined into one larger image at defined X and Y coorindates. Having assigned this generated image to relevant page elements the background-position CSS property can then be used to shift the visible area to the required component image. This technique can
カラーコード変換ツール
カラーコードを指定するとき、#FFFFFFという表記のほかに、 Ｒ:255 Ｇ:255 Ｂ:255という表記をすることがあります。 これは、16進数と10進数の表現の違いによるものです。 このツールは、16進10進変換のための補助ツールです。 ■使い方■ １．変換元進数のテキストボックスに半角で数値を入力します。 ２．変換したい方向の矢印のある「変換」ボタンを押します。
How To Enable HTML5 In Chrome | Robots.net
Introduction In the ever-evolving landscape of web browsing, staying abreast of the latest technologies is crucial. HTML5, the fifth and current version of the Hypertext Markup Language, has revolutionized the way we experience the web. With its advanced features and enhanced capabilities, HTML5 has become the cornerstone of modern web development, offering a more seamless and interactive user exp
HTML/CSS テンプレート集まとめ - Cube Lilac
サイトのデザインを変更しようかと思ったのですが，自力でデザインを考えるのは限界があるのでフリーの HTML/CSS テンプレート集をざっと探してみました．尚，どのサイトが人気なのか分からなかったので，各種ソーシャルメディアのカウントを取得して併記してみました．海外サイトばかりなので，SBM としてははてなブックマーク以外に Delicious のカウントも取得しています． 掲載されてあるデザインはまったく見ずに，サイトの使いやすさ（と言うか「広告の少なさ」かな）だけからの感想ですが，個人的には http://www.solucija.com/ が使いやすいかなぁと言う気がしています． URL Delicious Hatena Twitter Facebook 1 http://www.oswd.org/ 24,170 951 471 1,002 2 http://www.freecsste
あなたのウェブページが機能しているか7つの面からチェックできるオンラインツール -Spur
Spur [ad#ad-2] Spurの使い方 入力フォームにチェックしたウェブページのURLを入力して、「Spur it on」ボタンをクリックします。 画像でチェックしたい場合は、「Spur it on」ボタンの下にある「Upload an image」をクリックします。 クリックすると、ウェブページに7種類のエフェクトを与え、そのままでは気がつきにくい面からさまざまなポイントを確認することができます。 以下、その7種類のエフェクトを紹介します。 Grayscale グレースケールはデザインからカラーを取り除くことで、ユーザーの目がページのどこに引き寄せられるか確認するのに役立ちます。 見出しはブラックの背景にホワイトのテキストで高いコントラストを確認できます。 ロゴとナビゲーションはコンテンツサイトにドロップバックしています。 最新情報のコンテンツはグレースケールになると、コントラス
未経験からWebデザイナー、Webクリエイターを目指す人のためのWordPressとTwitterをつかった就転職活動のすすめ - DESIGNMAP
仕事を続けながら勉強、制作をしよう 未経験からWebデザイナーになる場合も作品が求められる。未経験だからこそ、しっかりしたクオリティの作品を用意したい。そういう作品をつくるために、勉強をすることになる。 Webデザイナーになる準備期間は個人差や目指すスキルにもよる。Illustrator、Photoshop、HTML、CSS、JavaScript（jQueryも含む）、WordPressでサイトが作れるくらいのスキルを目指すとすると、目安で１年くらいはかかるだろう。もちろん、スキルや期間はあくまで目安である。習得には個人差があり、あくまで自分のペースを守ることが大事である。 具体的な勉強や行動のステップは「まったくのゼロから、独学でWebデザイナーになる方法」を、デザイン自体の勉強は「まったくのゼロから、デザインを独学する方法」を参考にしてほしい。 準備期間は１年くらいの長期戦になる（後述
Web制作者は知っておきたいwebサイトのレイアウト7選 │ Design Spice
レスポンシブwebデザインからグリッドデザインまでよく使われているwebデザインのレイアウト用語をまとめました。 レスポンシブwebデザイン エラスティックレイアウト リキッドレイアウト フレキシブルレイアウト 固定幅レイアウト グリッドレイアウト 可変グリッドレイアウト レスポンシブwebデザイン(Responsive Web Design) PCやスマートフォン、タブレット事に複数のデザインを制作するのではなく、 ディスプレイの幅に合わせてデザインを最適化する方法。 CSS3のMedia Queriesを利用してディスプレイサイズに応じてデザインを変更します。 メリット 一つのソースで複数デバイスに対応できるのでメンテナンスが容易です。 また今後デバイスの種類が増えてもそれに対応できます。 それぞれのデバイスに合わせた形で調整できるのでユーザーエクスペリエンスも高くなります。 デメリッ
ist-jo.in - ist jo リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
How To Enable HTML5 In Chrome | Robots.net
Introduction In the ever-evolving landscape of web browsing, staying abreast of the latest technologies is crucial. HTML5, the fifth and current version of the Hypertext Markup Language, has revolutionized the way we experience the web. With its advanced features and enhanced capabilities, HTML5 has become the cornerstone of modern web development, offering a more seamless and interactive user exp
僕のWEB屋人生で見つけたテクスチャ、パターン系の素材サイト全部 | バンクーバーのうぇぶ屋
もはやタイトルのまんまなんですが。 僕がWEB屋を初めてから、背景やボタンのアクセントに使うようなテクスチャとかパターン素材とか、とにかく沢山見て来た物をメールから、ブックマークから、チャットから、Evernoteから引っ張り出して数ある限りご紹介させて頂きます。 僕の場合は、こういうサイトを見てテクスチャのアイデアを探すことの方が多いですね。 ちなみに数も多いので、devianaartやらeverystockphotoなどの超有名どころは外しています。では、早速見ていきましょう。 Subtle Patterns | Free textures for your next web project 種類はそこまで多くないですが、使いやすい感じのパターン素材ですね。個人的に一押し！ Texture | Premium Pixels 以前の記事でご紹介した、ハイクオリティなPSDがダウンロード出
スマフォサイトでよく見るパーツのコードサンプル集 | 07design.blog
最近スマートフォンサイトの案件が増えてきました。そこで、個人的によく使いそうなコードをEvernoteにまとめたりしていたのですが、 まだまだスマフォサイト構築のノウハウ記事も少ないですし、共有しておこうと思います。…最近スマートフォンサイトの案件が増えてきました。 そこで、個人的によく使いそうなコードをEvernoteにまとめたりしていたのですが、 まだまだスマフォサイト構築のノウハウ記事も少ないですし、共有しておこうと思います。 すべてのデモ（chromeなどのwebkit系ブラウザまたはスマートフォン実機でご覧ください） download ヘッダーの右にメニュー <h3>ヘッダーの右にメニュー</h3> <!--ヘッダーの右にメニュー--> <header class="header1"> <h1><a href="#"><img src="title.png" alt="SIT
デザインの基礎、黄金比から大和比、第2黄金比まで - kojika17
よく黄金比という言葉を聞いたりしますが、実際にどういうものかわかっていなかったり、 デザインの当てはめ方が分からなかったりすることが多いので、簡単にまとめてみました。 貴金属比 nの場所に自然数が入り、第1貴金属比を黄金比、第2貴金属比を白銀比、第3貴金属比を青銅比といいます。 よく聞く黄金比は、貴金属比の１つです。 近似値 1.6180(約5:8) CSSで黄金比を見る 伝承では古代ギリシアから使われ始めたと言われています。 パルテノン神殿、モナリザなど数多くの建築物や美術、アートなどに使用されています。 白銀比 白銀比には、以下の2つがあります。 1:1+√2 の第2貴金属比に含まれる白銀比 1:√2 の日本で古くから使用されている白銀比(大和比) どちらも白銀比と呼ばれることが多いので、紛らわしいです。 白銀比(第2貴金属比) 近似値 1:2.414(約5:12) CSSで白銀比を見
ウェブサイト作成に役立つ35のwebサービス｜Webpark
ウェブサイトを作成する際に個人的に使っているWebサービスを紹介します。幅広く35個紹介しますので、新しい発見があれば幸いです。 フォント関係 wordmark.it パソコンに入っているフォントを一覧で見ることができます。フォントサイズも調整できます。 日本語フォント252種類を表示確認できます！フォントを探すならfonthack.jp。 日本語フォントの表示が確認できます。現在252種類あります。 PXtoEM.com: PX to EM conversion made simple. ベースのサイズ（px）を決めると、em, pt, %の値が表示されます。 カラー関連 ウェブ配色ツール Ver2.0 配色ツールは色々ありますが、日本語ですし、あまり考えなくても感覚的に使えるので楽しいです。 Color Scheme Designer 3 カラーパレットジェネレーターです。海外サイトで
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
デザイナーなら必ず知っておきたい国内素材サイト22選 | designaholic
