意外と知らない？アイコンはWebフォントでつくるとこんなに便利！
Webフォントでアイコンをつくろう！ ゆとりジェネレーションのほんだです。 最近、Webフォントを使用する仕事に多く携わった関係で、 Webフォントを有効活用したものすっごく素敵なマークアップ方法に気づきました。 ずばり、アイコンやちょっとしたイラストをWebフォントで作成する、というものです。 （以下のデモはGoogle Chromeなど、モダンなブラウザ推奨です。） jsdo.it のシンボルフォントを使用する - jsdo.it - share JavaScript, HTML5 and CSS アイコンを作成するだけだと、あまり新鮮さはありませんが、 CSS3時代のいま、これはとっても有効なマークアップ方法となっています。 詳しくは、つづきからどうぞ！ 色をつける フォントなのでCSS「color:」で指定するだけで色をつけられます。 もちろんマウスオーバー時に色を変更するのも、C
フリーイラストサイト12点。商用利用OK・著作権表示不要・無料。 ｜https://wp.yat-net.com/name
2012年 04月 20日 フリーイラストサイト12点。商用利用OK・著作権表示不要・無料。 カテゴリ： フリー素材 タグ：イラストフリー素材まとめ作成支援ツール 会社内の資料を作成する際やブログを書く際にイラストが欲しい！と思うことは多々あるんですが、ひとつひとつイラストを書いてると膨大な時間が掛かってしまいあまり現実的では無いかなと思います。 なので、ちょっとフリー素材として使えるイラストを公開してくれているサイトをご紹介すると共に、シェアさせて頂こうと思います。 こういったものをフリーで公開していただけるのは非常に有難く頭が上がりませんね。尚、商用利用可能で、著作権表記が出来るだけ不要のものをご紹介させて頂きますがWeb上で公開したりする際は念の為、各サイトのポリシーや利用規約をご確認下さい。
S5-Style
ノーコードWeb制作プラットフォーム「STUDIO」 コードを書かずに、高度なデザインを。サイトは1クリックで公開可能。CMS、フォーム、分析ツールもオールインワン。 事業コンセプトの検証から、デザインチーム組成まで。おしゃべりAIアプリ「Cotomo」の立ち上げ支援について 2024年2月にStarley株式会社からリリースされた、音声会話型おしゃべりAIアプリ「Cotomo (コトモ)」。事業立ち上げに関わる、事業コンセプトの設計・初期プロダクトの設計・デザインチーム立ち上げをrootとして伴走しました。音声会話型AIという特殊なドメインにおいて、いかに事業の方向性を固め、プロダクト内の体験を検証したのか。また、素早いデザインチーム立ち上げをどのように支援したのか、事例をまとめます。 STUDIO導入時に知りたい！「STUDIOをおすすめできる/できないパターン」を無料配布します ca
Web制作者は知っておきたいwebサイトのレイアウト7選 │ Design Spice
レスポンシブwebデザインからグリッドデザインまでよく使われているwebデザインのレイアウト用語をまとめました。 レスポンシブwebデザイン エラスティックレイアウト リキッドレイアウト フレキシブルレイアウト 固定幅レイアウト グリッドレイアウト 可変グリッドレイアウト レスポンシブwebデザイン(Responsive Web Design) PCやスマートフォン、タブレット事に複数のデザインを制作するのではなく、 ディスプレイの幅に合わせてデザインを最適化する方法。 CSS3のMedia Queriesを利用してディスプレイサイズに応じてデザインを変更します。 メリット 一つのソースで複数デバイスに対応できるのでメンテナンスが容易です。 また今後デバイスの種類が増えてもそれに対応できます。 それぞれのデバイスに合わせた形で調整できるのでユーザーエクスペリエンスも高くなります。 デメリッ
iPhoneやiPadやネットブックなど、さまざまなスクリーンサイズでウェブサイトを確認できる -Screenfly
iPhoneやiPadやネットブック・ノートブック・デスクトップやテレビなど、さまざまな解像度のスクリーンでウェブサイトの表示を確認できるオンラインサービスを紹介します。 Screenfly [ad#ad-2] Screenflyの対応スクリーン 現在、対応しているスクリーンは下記の通りです。 Desktop ネットブック10インチ(1024x600) ネットブック12インチ(1024x768) ノートブック13インチ(1280x800) ノートブック15インチ(1366x768) デスクトップ19インチ(1440x900) デスクトップ20インチ(1600x900) デスクトップ22インチ(1680x1050) デスクトップ23インチ(1920x1080) デスクトップ24インチ(1920x1200) Tablet ViewSonic(800x480) Velocity Cruz(800
こんなに高品質なのに無料で利用できるCSSベースのテンプレートのまとめ
企業用サイト用をはじめ、コマース用、ポートフォリオ用、ブログ用などの高品質ながら無料で利用できるCSSベースのテンプレートを紹介します。 テンプレートは1ページだけのものから、配下ページなど複数のページが揃っているものもあります。 ※テンプレートは全て無料で利用が可能ですが、ライセンスを必ず確認してください。
これは必見かもなYoutube等の埋め込み動画を動的にリサイズするCSS例:phpspot開発日誌
CSS: Elastic Videos これは必見かもなYoutube等の埋め込み動画を動的にリサイズするCSS例。 ブロックのサイズが変更された際において動画を固定サイズにしてしまうとレイアウトが崩れてしまいますが、公開されているサンプルを使うと、HTML5動画、embed/iframeの動画をレイアウトに合わせてCSSで自由に伸縮可能。 解像度の違う、iPhone等でも動作を確認しているそうで、どんな環境でも動画をページにフィットさせたい用途に有用です。 通常サイズ。ブロックいっぱいに広がる動画 幅をiPhoneなみに小さくしてみた例。動画も縮んでます。 IEでも動くみたいです。 これは覚えておいたほうがよさそうです。 関連エントリ フリーで新しめのXHTML/CSSで書かれたサイトテンプレート４５ ぜんぶピュアCSSでやっちゃおうというJavaScriptの代替デモ５６ Ajaxスタ
jQueryのみでタブメニューを作る | 任天堂大辞典
JavaScriptのライブラリであるjQueryを用いたタブメニューを作ろうと思うが、 どこを回ってもtab.UIプラグインを使ったものしかない…… 画像を使うとか、そんな重そうな物ばかり…… 作成＆ソース 無いのなら、作ってしまえホトトギスと言うことで、簡易タブメニューを作成した。 稼働サンプル 使用しているのはjQueryでの表示切り替えと、外部CSSである。 HTML 対象部分のHTMLタグは下記のようになっている。 <ul id="tab_list"> <li id="p_tab">personal</li> <li id="d_tab">diary</li> <li id="b_tab">bookmark</li> </ul> <div id="personal" class="tab_body">中身1</div> <div id="rss" class="tab_body"
商用利用も無料、ウェブ用のエレメント・ページレイアウト・アイコンのPSD素材の配布サイト -design deck
ナビゲーション、ボタンなどのエレメントをはじめ、ページレイアウト、アイコンなど、商用でも無料で利用できるウェブデザイン用のPSD素材を配布しているサイトを紹介します。
Webデザイナーな私の勉強方法まとめ – VIVID COLORS + BLOG -福岡から東京に出てきたデザイナーのブログ-
私の勉強方法まとめてみました。 といっても 「いい情報をとりこんで、実践して、その結果をアウトプット」 をひたすらしているだけなのですが、実際にどのようなサイトや本を見てインプットしているか、どんな風に実践して、何をアウトプットしているかなどまとめてみました。 インプット 情報が美しくまとまっているサイトのフィードをチェック 国内外のWeb系の情報を丁寧にまとめてくれているブログがたくさんあります。 そういうブログのフィードをチェックしています。 デザインTipsやトレンド紹介、便利なプラグイン、プログラムなど、毎日どんどん新しい情報が出てきます。 全部読んで理解してその場で実践する、というとは不可能に近いので、へー、こういうことも出来るんだー、とさらっと頭に入れて、特に気になったものだけはてなブックマークなどでタグをつけて保存したりしています。 そうしておくことで、いざ●●しないといけな
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
シンプルなタグなのに凝った綺麗なボタンを作るCSSチュートリアル:phpspot開発日誌
Iconfinder | Download free icons
サンプル – 少しのコードで実装可能な20のjQuery小技集 | Webクリエイターボックス
Welcome to nginx!
色見本（カラーチャート） ナスカ特製