U-ichiのブックマーク (200)

  • 黄金比をサイトのデザインに取り入れる簡単な3つの方法 | コリス

    その調和された比率は、トランプカードなどの日常的なものから、ギリシアのパルテノン神殿、ミロのヴィーナス、モナリザなどの芸術分野まで、多数存在します。 黄金比を使ったデザイン テクニックついては、下記も参考にどうぞ。 黄金比とは、黄金比を使ったすごいデザインテクニックのまとめ -Webデザイン・紙デザインに 黄金比を矩形に使用する 黄金比をマージンに使用する 黄金比をパーツに使用する 黄金比を矩形に使用する サイトで使用する画像などの矩形に黄金比を適応します。 サンプルでは、144pxと233pxの組み合わせを使用していますが、「1:1.6」を利用して100pxと160pxなど簡易なものでも効果はあると思います。 黄金比を横長の矩形に使用 黄金比をマージンに使用する レイアウトにグリッドシステムを取り入れマージンを使用した場合、数種類のサイズが必要になる場合が多くあります。 その際、1つの値

  • 黄金比

    縦と横の比率が最も均斉のとれた長方形を想像してみて下さい。それは人によって様々かもしれませんが,黄金比と 呼ばれる比が最も美しいと言われています。ところで,どうしてその比率がバランスよく見えるのでしょうか。もしかしたら,その中に何か神秘的な規則が内在しているのではないでしょうか。 ここでは,それに関連するいくつかの話題を展示します。お楽しみ下さい。 1 黄金比とはなにか 歴史上,黄金比を数学の話題として初めて意識したのは,ユークリッドとされています。彼は 次のような幾何学の問題として捉えていました。 では次に,この比率を持つ長方形を作図してみましょう。 まず,1辺の長さがaの正方形ABCDを作図します。次に,辺BCの中点Mを作図し, そこからDまでの距離をとり,Mを中心に半径DMの円を描きます。 辺BCの延長線との交点をEとし,長方形ABEFを描くと,それが黄金比を持つ長方形になります。

  • 文章の作り方 - 伝わるデザイン 研究発表のユニバーサルデザイン

    研究者や研究に関わる大学生や大学院生は、一年を通じて研究室ゼミや学会などで研究成果の発表を行なわなければなりません。また、近年、科学者でない人たちに対する一般向けのプレゼンや講演(アウトリーチ活動)の機会も増えてきています。他にも、研究論文や報告書を書いたり、研究費調達のために予算申請書やプロジェクトの提案書を作成したりすることも、研究者にとって欠かせない仕事です。これらはいずれも情報を他者(研究仲間や審査員、一般市民)へ伝えようとする行為であり、正確かつ効果的な情報の発信が望まれます。しかし、自己流で資料を作成して、闇雲に情報を発信していても、スムーズに情報は伝わりません。ときには誤った情報が伝わってしまい、研究の価値を正当に評価してもらえないことさえ起こりえるのです。 情報を正確にかつスムーズに他者に伝えるためには、情報をデザインすること、つまり文章を読みやすく整えたり、図表を見やすく

  • IE6で透過pngを表示させるオススメscript、「DD_belatedPNG.js」

    >> 詳細な使用法と注意点を追加エントリーしました。 いまだ絶大なシェアを誇るIE6(Internet Exproler 6)ですが、WEB制作者ならご存知の通り、さまざまなバグ・不具合を内包しております。 ・CSSでfloatしたブロックのmarginが倍になる。 ・後方互換モードの場合、text-alignが子要素にまで影響する。 ・透過png画像が透過されない。 上記以外にも、それはいくつもの制作者泣かせの問題があり、業界内では「IE6氏ねばいいのに」とまで言われているブラウザですが、前述の通りシェアは絶大なので、対応しないワケにもいかず。 すでにいくつもの対応策が出回っておりますが、その中でも自分的に一番オススメするのが、「DD_belatedPNG.js」を使用する方法です。 有名どころの対応策を併記・比較しながら、どこがオススメなのかを含めてエントリーしたいと思います。 有名な

    IE6で透過pngを表示させるオススメscript、「DD_belatedPNG.js」
  • IE5.5, IE6, IE7, IE8の確認が同時にできる -IETester | コリス

    IETesterは、IE5.5, IE6, IE7, IE8beta1の確認が同時にできるアプリケーションです。 IETester [ad#ad-2] IETesterを利用するには、上記IETesterのページの「Download IETester」から「install-ietester-v0.2.exe」ダウンロードし、IETesterをインストールします。 IEのバージョンの切り替えは、「New Tab」から切り替えることができます。 簡単に使用しただけですが、IE5.5, IE6, IE7, IE8beta1のレンダリングの違いを確認できました。 バージョン0.2の動作条件は、Windows XP or Vista + IE7以上となっています。XP + IE6の場合、IE7, IE8のモードが動作しません。 Windows XP + IE7, IE8beta1の環境で使用したとこ

  • My DebugBar | IETester / HomePage

    DebugBar Home > Wiki > IETester :: Browser Compatibility Check for Internet Explorer Versions from 5.5 to 11 :: ANNOUNCE: If you are an Adwords user, The IETester team is proud to announce its new tool: SunnyReports, a simple and efficient Adwords reporting tools IETester is a free (both for personal and professional usage) WebBrowser that allows you to have the rendering and javascript engines of

  • Firefox3.6Web製作者向けのおすすめアドオン―Web製作者なら是非使ってみて欲しいFirefoxおすすめアドオン集

    Firefox3.6が配布されるようになってだいぶ経ちました。 Firefoxの良いところはとにかく自分好みの改造が出来ることだと思います。 ということで、日はFirefox3.6のホームページ制作者向けのおすすめアドオンをご紹介したいと思います。全て、自信を持っておすすめ出来るものばかりです。 ■■Web製作者向けのFirefoxアドオンおすすめリスト *アドオン名=公式サイトへのリンクにしてあります Web Developer CSSJavaScriptを無効化した状態でWebページがどのように表示されるかを確認したり構文などのチェックも出来るアドオンです。これなしにFirefoxのWeb制作アドオンは語れないでしょう。 Firebug HTMLCSSのソースを表示させ、その中のソースがサイトのどの部分かを表示させたり、その場で編集を行うことができます。上記のWeb Develo

    Firefox3.6Web製作者向けのおすすめアドオン―Web製作者なら是非使ってみて欲しいFirefoxおすすめアドオン集
  • Adobeの有料ソフトを買う前に、代替になる無料ソフトでコツを掴もう・使い方まとめ - かちびと.net

    デザイン等に一般的に利用されているPhotoshopやDWなどのAdobe製品は高機能で仕事では必須のツールです。しかしながら高額で、手軽に購入出来るという訳には行きません。無料で手に入る代替ソフトがありますので、まずはコツを掴むのにフリーソフトから使ってみてはいかがでしょうか。 全く同じとは行きませんが、例えばPhotoshopの代替ソフトとして有名なGIMPはPhotoshop専用の拡張子であるPSDファイルも開く事が出来ますし、GIMPで作ったファイルをPSDに変換する事も可能です。勉強からスタートするおつもりなら無料のソフトから、という形もありではないかと思います。 そこで、各Adobe製品の代替ソフトとなるような無料のソフトと、その使用法が書かれたサイトをまとめておきます。 代替ソフトに関しては無料で使えるAdobeCS3の代替ソフトという記事を参考にさせて頂きました。 Phot

  • ロリポップ

    ※ 月額利用料金を各プラン容量で割った1GBあたりの価格の低さ(2024年7月9日時点、自社調べ)。 HostAdvice.comで上位3社の最安プラン、最長契約期間の1GBあたりの月額費用と比較。

    ロリポップ
  • 見えてきたECサイトの人気レイアウト

    ECサイトのレイアウトは、ユーザーに情報を的確に届ける上で重要な役割を果たす。サポタントの調査結果から、ECサイトでトレンドになっている検索窓の設置場所やサイト幅のピクセル数が分かった。 Web・モバイル業界の人材事業を手掛けるサポタントは7月30日、EC(電子商取引)サイトのレイアウトのトレンドに関する調査結果を発表した。楽天市場(100サイト)、Yahoo!ショッピング(50サイト)に出展しているECサイトおよび企業が独自に運営するECサイト(100サイト)を7月に調査した。 70%がページ上部に「検索窓」を設置 Webページの上部に検索窓を設置しているECサイトは全体の70%だった。増加する商品点数に対し、検索性を向上させる目的で検索窓を設置するECサイトが増えているという。

    見えてきたECサイトの人気レイアウト
  • 就活に打ち勝つポートフォリオWebサイトの作り方 | Webクリエイターボックス

    2016年2月18日 Webサイト制作 Webデザイナーとして働く際、自分をアピールするのに最も大切なのがポートフォリオWebサイト。今まで作った作品や自分がどんな人間なのか、何ができるのかを紹介するサイトを作っておけば、就職活動にも大変役立ちます。ここではポートフォリオWebサイトを作る際のポイントや素敵なポートフォリオサイトを紹介します! ↑私が10年以上利用している会計ソフト! 最新版書きました!こちらも参考にしてみてください。 ポートフォリオWebサイトを作ろう!2015年版 ポートフォリオWebサイトを作る時のポイント 1. 自己紹介 自分は何者なのか?何ができるのかをわかりやすく完結に紹介します。あまりダラダラ書いても読まれない確立が高いため、大きめのフォント・短い文章で紹介すると効果的です。 「自分はWebデザイナー」という事をはっきり書く 自分ができることをわかりやすく表記

    就活に打ち勝つポートフォリオWebサイトの作り方 | Webクリエイターボックス
  • 覚えて良かったCSSテクニック « zaru blog

    ここ最近、覚えてよかったなーと思ったCSSテクニックをまとめてみる CSSテクニックは時代とともに変わっていくけれど、ここ1年ほどスタメンレベルで使うCSSテクニックが絞られてきたので、ここらでちょっと個人的にもまとめておこうかと。 liボックス 幅:190px マージン:15px liボックス ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。 liボックス ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。 <li>にはクラスを指定せずに、左右にぴったりくっ付くように配置が可能。 <style type="text/css"> #box1{ width: 600px; } ul{ width: 615px; margin: 0 -15px 0 0; overflow: hidden; _zoom: 1; font-size:7

  • 非デザイナーのためのデザイン基本テクニック その1 | 07design.blog

    デザイナーではない方も趣味でサイトを作っていたり、デザイナーに頼むほどでもない画像を作ったりする機会があると思います。デザイナーはセンスでサクサクと制作するイメージがあるかもしれませんが、実はデザインというものは数々のルールによって成立しています・・・デザイナーではない方も趣味でサイトを作っていたり、デザイナーに頼むほどでもない画像を作ったりする機会があると思います。 デザイナーはセンスでサクサクと制作するイメージがあるかもしれませんが、 実はデザインというものは数々のルールによって成立しています。 そのルールの知識があればデザイナーレベルとはいかないものの、見た目がきれいなグラフィックは作れるはずです。 デザインという言葉の定義やソフトの使い方から始めてしまうとややこしくなるので、 今回はあくまでも「とりあえず見た目をキレイにする」ということに重点を置いて説明します。 記事内で

  • Google アナリティクス

    Google アナリティクス
  • FeedWind | RSS Feed, Facebook Page, Twitter, Google Calendar, Instagram Widget

    Select content typeChoose from one of four content types. RSS, Facebook, Instagram, Google Calendar, YouTube or X with unique features for each of them. Enter your feed sourcesAdd your feed sources URLs or Calendar ID. Multiple feeds can be added together in a single widget in paid plans. Customize designUse our easy interface to choose design and feature options. Customize your widget to match yo

    FeedWind | RSS Feed, Facebook Page, Twitter, Google Calendar, Instagram Widget
  • RSSとは 【Rich Site Summary】 - 意味・解説 : IT用語辞典

    RSS 【RDF Site Summary】 Really Simple Syndication / Rich Site Summary 概要 RSS(RDF Site Summary)とは、Webサイトの更新情報を配布するためのデータ形式の一つ。XMLベースのマークアップ言語で、更新された記事のタイトルやURL、更新日時、要約などを記述することができる。 Webサイトの運営者はサイト内で最近追加・更新されたページについての情報をRSS形式のファイルとしてサイト上の特定の位置(URL)で公開することにより、閲覧者側のソフトウェアに常に最新の情報を配信することができる。このような更新情報の配信データを「RSSフィード」(RSS feed)あるいは単にフィードという。 閲覧者側では「RSSリーダー」(RSS reader)などと呼ばれる巡回ソフトが登録したサイトのフィードを定期的に取得し、ニュ

    RSSとは 【Rich Site Summary】 - 意味・解説 : IT用語辞典
    U-ichi
    U-ichi 2010/07/29
  • Twitterブログパーツ|Twitterのタイムラインを表示するTweetsWind

    現在の利用者数:162678人 TweetsWindはTwitterのタイムラインを表示するブログパーツです。 ◎お知らせ ◎サービス終了のスケジュール ◎FeedWind Twitterウィジェットのご利用方法 お知らせ 2018年5月22日にTweetsWindはサービスを終了し、今後はFeedWindのTwitterウィジェットに継承することになりました。ご利用の皆さまには、2010年のサービス開始以降、長い間ご愛顧いただき誠にありがとうございました。 今後は開発のリソースをすべてFeedWindに集約し、新規の機能開発と安定運用に努めてまいります。 大変お手数をおかけしますが、皆さまにはFeedWindのTwitterウィジェットに移行していただきますようお願いいたします。(FeedWind Twitterウィジェットのご利用方法) FeedWindでは、フォローをしているアカウン

  • Lightbox 2

    Overview Lightbox is a simple, unobtrusive script used to overlay images on the current page. It's a snap to setup and works on all modern browsers. What's New in Version 2 Image Sets: group related images and navigate through them with ease Visual Effects: fancy pants transitions Backwards Compatibility: yes! How to Use Part 1 - Setup Lightbox 2 uses the Prototype Framework and Scriptaculous Effe

  • 企業サイトでやってはいけない31のこと | パシのSEOブログ

    企業サイトを運営する上でやらない方が良い事や、やってはいけない事についてまとめてみます。全ての項目が全てのサイトに当てはまるわけではありませんが、なんとなく実施している事が訪問ユーザからは、良く思われていないという事も多いものです。 ユーザに嫌われる動作 Flashで待たせる ページの表示速度が遅い 横スクロールバーが出る 内部リンクが別窓になっている 無駄なポップアップが出る ブラウザの戻るで戻らせない ブラウザサイズを勝手に変える 右クリックを禁止している 流れる文字や点滅する文字がある 無意味なBGMや音が出る 1.フルFlashは初めてそのサイトに訪れるユーザにとってはプラスに働く事も多いですが、リピータや情報を探しているユーザにとっては、ウザイと感じる場合も少なくありません。 2.ページの表示速度や、動作の悪いサイトは嫌われます。ネットに慣れたユーザほど待ってくれません。 3秒待