複雑な表面をドットで構成したアブストラクトなエフェクトを作成するIllustoratorのチュートリアルをVectortuts+から紹介します。
ドットで構成したアブストラクトなエフェクトを作成するチュートリアル
複雑な表面をドットで構成したアブストラクトなエフェクトを作成するIllustoratorのチュートリアルをVectortuts+から紹介します。
『The Essential Web Design Handbook』読んだ - ✘╹◡╹✘
Rafal Tomalの書いた『The Essential Web Design Handbook』という本を読んだ。初心者のためにWebデザインの基本となる知識を広く紹介している。構成としては、筆者がWebデザインを行うときのプロセスをまず最初に紹介し、その各段階を追っていきながら、「この作業は無視されがちだけどこういう点で効率的だからやった方がいい」「これを考えるときにはこういう知識を使う。今回の例ではこうやって考えた」という具合に進んでいく。 プロセス 筆者が推奨するWebサイトのデザインプロセスは次の通り: 調査して計画をつくる 発想を膨らませる スタイルガイドをつくる ワイヤーフレームを組む モックアップをつくる コードを書く 調査と計画 調査するというのは、明確なクライアントがいる場合は要求を聞くことであったり、競合サイトの様子を調べてくることであったり、使えそうな資料を広範に
一見筋の悪いこと、わざと難しいことをするビジネスモデル - FutureInsight.info
Twitterのタイムラインを眺めていたらフリークアウトCOOの佐藤さんの一連のツイートが非常におもしろかったので紹介。 https://twitter.com/usksato/status/514995375308955649 https://twitter.com/usksato/status/514995636010106883 https://twitter.com/usksato/status/514996067499134976 https://twitter.com/usksato/status/514996473117679616 https://twitter.com/usksato/status/514998201351282688 https://twitter.com/usksato/status/514999510527791105 https://twitter
Tatsuhiko Miyagawa's blog
July 18, 2024 Scraping Apple News+ I’ve been an Apple News+ subscriber for the past year or so, just to be able to read paywalled articles from WSJ, Business Insider, WIRED, and The Atlantic etc. It’s not my primary news source (I use Feedly via Reeder), but when I encounter links to these sites on socials or via RSS feeds, I open the link with the News.app. A keyboard shortcut for Choosy helps a
Introduction | Human JavaScript
Human JavaScript By: @HenrikJoreteg Build powerfully simple browser apps. You can read the entire book free online or buy the ebook for $39. Video tutorials are available at: learn.humanjavascript.com. If you find it valuable, please consider buying it or giving it to a friend to support our ongoing efforts. If you have questions or feedback ping me on twitter or hop into the Ampersand.js project
これが読みやすいブログデザイン！有名サイトの記事幅と余白設定を大公開 - Naifix
ブログのメインは記事本文。どんなにタイトルで惹きつけて訪問者を増やしても、肝心の記事が読みづらければ最後まで読まれないうちに離脱してしまいます。当然、シェアもしてくれないしリンクもしてくれません。 では読みやすいブログとはどのようなものでしょうか。そのひとつは、「流し読みしやすい文章」です。 読みやすいブログ記事を書くための基本とライティングテクニック 文章の改善はいますぐできることではありませんが、読み疲れさせないデザインにするのはすぐに実行できるかもしれません。 本記事では、記事本文が表示されるメインコンテンツの幅と、周囲の余白設定に焦点を絞って解説していきます。 有名どころ 18 サイトを調べて、各サイトがどれくらいの幅で記事を表示し、どのくらい余白をとっているのか調べてみました。ぜひご参考に。 2014 年に調査・公開した数値のため、参考サイトの内容が変わっている場合があります。
すごく役立った！サイト制作でさりげなく使われているCSSテクニックまとめ
作成：2014/04/21 更新：2014/10/24 Web制作 > 前回コーポレートサイト制作が捗るjQuery プラグインをまとめましたが、今回はCSS版ということで、使用頻度が高いものと、これから必要になりそうなものを、忘れないようにメモしておきます。コーポレートサイトやWeb サービスサイトでさりげなく使われているものや、今後増えそうなものなど。 エンジニア速報は Twitter の@commteで配信しています。 もくじ 横並び １．今までの回り込み解除 ２．横並びや並び順 ３．均等に並べる／段組み ナビゲーションメニュー ４．多階層 ドロップダウン ５．amazon風 メガドロップダウン ６．ドロワーメニュー コンテンツメニュー ７．モーダルウィンドウ ８．アコーディオン ９．タブパネル テーブル １０．ストライプテーブル １１．レスポンシブ＋テーブル リスト １２．カウント
小さい画面で多くの情報を表示する、パネルをダイナミックに3Dでスライドさせるエフェクト -Meny
iOSの方がきれい Menyは3Dトランスフォームをサポートするブラウザで動作し、iPhoneのMobile Safariにも対応しています。 動作に必要なCSS, JavaScriptファイルは、下記からダウンロードできます。 Meny -GitHub
[CSS]円形エレメントの実装とホバー時に面白いアニメーションのエフェクトを与えるスタイルシート
最近よく見かけるようになった円形のエレメントに、ホバー時に普通のより面白いエフェクトをCSS3アニメーションで実装するチュートリアルを紹介します。 Circle Hover Effects with CSS Transitions 右：ホバー時のアイテム、左：通常時のサムネイルの状態です。 円形エレメントの実装 ホバーエフェクトのデモ 円形エレメントの実装 まずはベースとなる円形エレメントの実装です。 アイテム時を例に紹介します。 HTML 各円形のエレメントはリスト要素で、見出しやパラグラフをdiv要素で二重に内包します。 <ul class="ch-grid"> <li> <div class="ch-item ch-img-1"> <div class="ch-info"> <h3>見出し</h3> <p>パラグラフ <a href="http://">リンク</a></p> </d
[CSS]柔軟性のあるグリッドをシンプルで簡単に実装するスタイルシートのチュートリアル
すべてのモダンブラウザとIE8+に対応したグリッドを複雑なフレームワークを使うのではなく、シンプルで簡単に実装するスタイルシートのチュートリアルを紹介します。 Don't Overthink It Grids 下記は各ポイントを意訳したものです。 ラッパー カラム フロートのクリア ガター（溝） 外側のガター（溝） カラムの追加 対応ブラウザ ラッパー まずは、グリッドを包むラッパーです。 グリッド用のラッパーはセマンティック的には特に意味がなく、ただのラッパー（包み紙）です。使用する要素はdivがよいです。 HTML <div class="grid"> <!-- 100% wide --> </div> 表示例 ラッパーとなるdiv要素はブロックレベルのエレメントで、この中にグリッドを包み込みます。 カラム カラムはよく見かけるメイン コンテンツとサイドバーの2つです。 メイン コンテ
レスポンシブ且つグリッドなレイアウト生成ジェネレーター・「gridpak」 - かちびと.net
gridpakは、レスポンシブWebデザインに対応したグリッドレイアウトジェネレーターです。従来のグリッドジェネレーターにブレークポイントを設定出来る項目が付いているので操作も楽に行えます。 gridpak
レスポンシブ・ウェブデザインでの CSS コードの書き方 | Yomotsu net
いわゆるレスポンシブ・ウェブデザイン、つまりメディアクエリーを採用した Web サイトを構築する際の一番管理しやすいと感じるコードの書き方をまとめました。ただし、あくまでも個人的な、経験から感じた意見ですので絶対ではありません。 CSS のコードの配置広く知られている方法はいくつかあります。 CSS ファイル自体を分ける方法 @media 規則で 1ファイル内にメディア特性単位に書く方法 @media 規則で 1ファイル内にパーツ単位で書く方法 それぞれをコードで表すなら以下の書き方が該当します。 方法1 : CSS ファイル自体を分ける方法この方法は管理が大変でおすすめできません。これでファイルごとコード分割されてしまったらコード検索しづらいわけです。 <link rel="stylesheet" href="desktop.css" media="(min-width:769px)">
これは必見のWEBデザインの近未来。HTML5で構築されたサイト45:phpspot開発日誌
45 Examples Of Websites Designed With HTML5 | Free and Useful Online Resources for Designers and Developers これは必見のWEBデザインの近未来。HTML5で構築されたサイト45 CSS3なんかも取り入れてデザインは去ることながら、動きもいい感じに実装されています。 WEB業界に身を置く方ならばデザイナーならずとも、出来ることを知っておくという意味で必見のサイトが多数。 多くのプロフェッショナルなサイトにおいてこうした物が近い未来当たり前になっていきそうな予感。 今後、より多くの知識と動かし方に関する引き出しを身に付けた上でクリエイティブな仕事が求められそうで大変な反面、面白いことにもチャレンジできそうな可能性を感じます。 ソニーのタブレットのサイト。超カッコいいです 他にも多数の動き
HTML5とは何かを簡単にまとめてみた
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog はじめに こんにちは。R＆D統括本部 制作本部 ウェブデベロップメント部に所属しております。岡部和昌（@kzms2）と申します。 最近スマートフォンやタブレット向けのページを作成する機会が増えてきました。 なので、今回はちまたで大人気のHTML5について書きます。 若干今更な内容にも思えますが、あまりHTML5になじみがない方にもわかってもらえるような内容にしています。 HTML5の基本概念や思想・実際の組み方というよりも、 HTML5で組むと今までと比べて何が違うのか などについて書いていきます。 なぜこれからHTML5なのか HTML4との違いがわからない HTML5を使う利点がわからない など疑問に思っている方はぜひ見ていた
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【動画】 今日から使えるHTML5/CSS3/JSのシンプルテクニック15選 - Schoo（スクー）
Flipsblog.jp
Amazingly Simple Graphic Design Software – Canva
Ｚ会│日々の学習から受験・資格まで、本物の学力を養成する教育サービスを提供。
レスポンシブやらアイコンフォントやらフラットやら！2013年の気になる技術やデザインを試してみたリニューアル手順！ | バンクーバーのうぇぶ屋
カレンダーやDateピッカー関連のjQueryプラグイン20:phpspot開発日誌