タグ

Web制作に関するpicnicgraphicのブックマーク (75)

  • Webサイト制作でよく出てくるコンテンツとそれによく使うディレクトリ・ファイル名の一覧 - btmup Blog

    Web 制作のことを中心に、ちょっとした Tips などを掲載しています。「自分用メモ」が基スタンス。 btmup Blog ディレクトリ名とかファイル名って、ちゃんとしようとすると意外に時間がかかるもの。 ページタイトルを直訳すれば良いってもんでもなく、いくつかある候補から内容に一番合った単語を見付けてこないといけない。 いちいち英語を調べるのもメンドいし、かといって「gaiyo」とかじゃ気持ち悪いし、どうしたもんかねー、とずっと思っていました。 で、今回、勢いでざっくりとまとめてみたのでついでに公開します。 当にざっくりなので抜けもあるだろうし「それくらい書かんでも分かるわボケ」なものもあるでしょうけど、まぁそれは追々。 ディレクトリ名やファイル名として使用することを前提としているので、文法とかは全く考慮してませんので悪しからず。 最近、医療・病院関係のサイトに仕事で関わることが多

    Webサイト制作でよく出てくるコンテンツとそれによく使うディレクトリ・ファイル名の一覧 - btmup Blog
    picnicgraphic
    picnicgraphic 2011/01/13
  • WebDesignParts Gallery

    WebDesignParts Galleryでは、WEBデザインをする上で参考となるようなWebデザインパーツを紹介しています。「C#」のカテゴリー6 Jun 04th 2009 @ 11:07 AM DesignPart : カテゴリー6 Htmltag : <h1> Color : yellow Tags : host  View : 5

    picnicgraphic
    picnicgraphic 2009/06/29
  • ページ内の画像のダウンロードを超簡単に制限できる「dwImageProtector for jQuery」:phpspot開発日誌

    ページ内の画像のダウンロードを超簡単に制限できる「dwImageProtector for jQuery」 2009年06月15日- dwImageProtector Plugin for jQuery ページ内の画像のダウンロードを超簡単に制限できる「dwImageProtector for jQuery」。 Flickr などで導入されていますが、右クリックしてダウンロードしようとすると、元画像ではなくダミーの画像のダウンロードが開始する、という仕組みを簡単に実現するためのjQueryプラグインです。 ダウンロードしようとすると、ダウンロード開始するものの、ダミー画像(blank.gif)がターゲットになります。 単純に、元画像にダミー画像(blank.gif)を被せているというハックなのですが、画像の右クリックダウンロードを抑制したい方には便利に使えます。 以下のようなケースで保存す

    picnicgraphic
    picnicgraphic 2009/06/15
    Flickrみたいに「右クリックしてダウンロードしようとすると、元画像ではなくダミーの画像のダウンロードが開始する」
  • パンくず詳解 | コリス

    パンくずの由来や概要、特長をはじめ、設置の判断基準、実装のよくある間違い、デザインのポイント、クラシックなものや進化したパンくずのショーケースなどをSmashing Magazineから紹介します。 Breadcrumbs In Web Design 以下、その意訳です。 パンくず ナビゲーションは、大量のページを保持するウェブサイトで、ナビゲーション機能を拡張することができます。 パンくずの大きな有用性は、ウェブサイトの訪問者が上の階層に移動する際、少ないアクションで実現させることです。 このことはウェブサイトのセクションやページのファインダビリティ(見つけやすさ)を改善するものとなります。 また、ランディングページ(検索などから訪れた最初のページ)にも非常に効果的で、ユーザーの現在の場所を明示するだけでなく、文脈のヒントとなるインフォメーションも提供します。 What is a bre

    picnicgraphic
    picnicgraphic 2009/04/01
    パンくず説明用に良さそう。
  • 新規でサイトを作るのに使えそうなの一式。Ver 3

    随分前に、Ver2の見直しをして3になってたんですけど、公開してなかったので今更ながら公開です。 中身は2を使ってみて、社内のマークアップエンジニアからフィードバックもらったり、自分でも違和感が有った部分を調整してます。 それなりの期間使ってみて、問題をあんまり感じていないので、完成度としては大分良くなったかなぁって思います。 新規でサイトを作るのに使えそうな一式。Ver 3をDL(zip:40kb) Ver 3を見る Ver.3の中身ご説明 主な変更点を。 style.cssのwidthなどのプロパティをまとめていたのをVer1と同じに。 default.cssに書かれていた、p要素のmargin-bottomの指定をstyle.cssに移動。 default.cssのfont-familyの指定を若干変更。 index.htmlGoogleカスタムサーチ用に使えるソースを記入。 Ja

    新規でサイトを作るのに使えそうなの一式。Ver 3
    picnicgraphic
    picnicgraphic 2008/11/14
    テンプレそろそろ見直したいー。いただきます!ありがとうございます☆
  • MJL ― MITSUE-LINKS JavaScript Library | 制作/開発 | ミツエーリンクス

    概要 MJL (MITSUE-LINKS JavaScript Library)は、ミツエーリンクスで標準利用されるJavaScriptライブラリです。 MJLは弊社内における業務効率を改善するために、統一された設計思想、利便性の向上を念頭においた上で設計・開発されました。 MJLは他のJavaScriptライブラリ群とは異なる設計思想により、独特の特徴を持ちながらも他のライブラリと補完しあえるものを目指しました。 MJLはコピーレフトライセンスであるGNU GPLに基づく自由ソフトウェア(フリーソフトウェア)です。弊社は GNU GPLに則り、ページにてMJLの全ソースコードを公開します。 ライセンス MJLはGNU GPL Version 3(参考邦訳)のもとに提供されます。 詳細はMJL体ファイル内のライセンス告知をご覧ください。 ダウンロード MJL体(圧縮版) mjl.js

    picnicgraphic
    picnicgraphic 2008/11/14
    よくつかう6機能を持ったライブラリ。他のライブラリ不要。具体的な機能「画像ロールオーバー/Flashオブジェクト埋め込みの機能拡張/新規ウインドウ作成/スタイルスイッチャ/タブインターフェイス/ブロック要素高さ揃え
  • http://kengo.preston-net.com/archives/003825.shtml

    picnicgraphic
    picnicgraphic 2008/08/26
    「iPhone / iPod touch 用のページを用意しておけば一番丁寧ですが、シンプルで内容を確認できればいいというならば、 Feed(RSS) をそのまま使ってしまうというのも実は一番手ごろ」
  • フォームのフリガナを自動入力させるAutoRuby.js | ホームページ制作・運営のヒント

    &amp;lt;script Language=”javascript” src=”http://ad.jp.ap.valuecommerce.com/servlet/jsbanner?sid=2456113&amp;amp;pid=877160106″&amp;gt;&amp;lt;/script&amp;gt;&amp;lt;noscript&amp;gt;&amp;lt;a href=”http://ck.jp.ap.valuecommerce.com/servlet/referral?sid=2456113&amp;amp;pid=877160106″ target=”_blank” &amp;gt;&amp;lt;img src=”http://ad.jp.ap.valuecommerce.com/servlet/gifbanner?sid=2456113&amp;amp;pid

    picnicgraphic
    picnicgraphic 2008/07/01
    「フォームのフリガナを自動入力」#いただきました!ありがとうございます!
  • Firefox3でメイリオを指定するとinputのsizeが倍増する

    Firefox3でメイリオを指定するとinputのsizeが倍増する Firefox3のデフォルトのフォントをメイリオに変更すると検索窓がグニョーンと伸びるよと教えていただきました。 検索窓は <input id="search" name="search" size="20" /> といたってシンプルなコード。 フォントの指定も font-family:sans-serif; と非常にシンプル。 font-family:"MS Pゴシック"; などに変更すると元の長さに戻ります。 font-family:"メイリオ"; などとすると同じように伸びます。(デフォルトのフォントをMS P ゴシックに変えても伸びてます) 解決策としては input にかかっているfont-familyを"MS Pゴシック"に変更するか、widthで明確に横幅を指定するかのようです。 というわけで、widthで

    Firefox3でメイリオを指定するとinputのsizeが倍増する
  • webサイトを作る時に顧客とあらかじめシンクロしておくと良い7つの基礎*ホームページを作る人のネタ帳

    webサイトを作る時に顧客とあらかじめシンクロしておくと良い7つの基礎*ホームページを作る人のネタ帳
    picnicgraphic
    picnicgraphic 2008/06/27
    「最も効果的なリンクはキャプション効果」を参考。
  • ページ内のユーザーの視線をシミュレートする -Feng-GUI - Feng Shui for Graphic User Interfaces

    AI-Powered Neuromarketing Web, Ads, Video, Signage, Packaging AI-Powered Neuromarketing Instant feedback on visuals, at a fraction of the cost and time of traditional tools. Test websites, adverts, videos, print, shelf layout, signage and packaging design. Turn visual data into actionable insights. Stay ahead of the market by leveraging AI to boost productivity and reduce costs. complete feature l

    picnicgraphic
    picnicgraphic 2008/05/29
    「キャプチャー画像アップすれば、そのデザインから解析して、ユーザー視線のヒートマップを作成/キャプチャでいいので、FLASHデザインでも大丈夫」
  • IDEA * IDEA

    ドットインストール代表のライフハックブログ

    IDEA * IDEA
    picnicgraphic
    picnicgraphic 2008/04/09
    「XHTMLからスタイルシートの枠組みを作ってくれる、というジェネレータ」の説明。
  • プロフェッショナル ウェブサイトテンプレートセット | CMSプラットフォーム Movable Type ドキュメントサイト

    TOP マニュアル Movable Type 4 プロフェッショナル ウェブサイトテンプレートセット Movable Type 4 ManualMovable Type 4 マニュアル プロフェッショナルウェブサイトテンプレートセットは、Movable Type を利用してウェブサイトを構築するのに適したテンプレートセットです。 プロフェッショナル ウェブサイトテンプレートセットは、Movable Type 4.2 より前のバージョンで 汎用ウェブサイトテンプレートセットとして同梱されていたものと同じです。 ブログだけではなく、ウェブサイトによくある About ページやお問い合わせページをあらかじめ用意 簡単にプロフェッショナルで美しいデザインのウェブサイトの作成が可能に 既定のブログテンプレートセットよりもシンプルで HTMLCSS によるカスタマイズしやすい設計 ちょっとした変

    プロフェッショナル ウェブサイトテンプレートセット | CMSプラットフォーム Movable Type ドキュメントサイト
  • 連載:価値を生むために知っておくべき,フルフラッシュサイト制作のあらすじ|gihyo.jp … 技術評論社

    第7回モーション、インタラクション ― 演出効果と機能性の提供 ― 齋藤順一 2008-03-14

    連載:価値を生むために知っておくべき,フルフラッシュサイト制作のあらすじ|gihyo.jp … 技術評論社
  • IE6でよく遭遇するCSSのバグとその解決方法 | コリス

    Dave Woodsのエントリー「IE6 -CSSのバグとその解決方法」から、IE6でよく遭遇する3つのCSSのバグとその解決方法の意訳です。 IE6 - CSS Bugs and Fixes Explained IE6で、マージンが2倍になってしまうバグ IE6で、hasLayoutプロパティによって起こるバグ IE6で、小さい高さを指定した場合に起こるバグ IE6で、マージンが2倍になってしまうバグ IE6で、フロートした要素のマージンが2倍になってしまうバグと解決方法の紹介です。 下記のコードで、IE6はマージンが20pxになります。 sample:バグ #navigation{ float: left; width: 200px; margin-left: 10px; } #content{ float: right; width: 500px; margin-right: 10p

    IE6でよく遭遇するCSSのバグとその解決方法 | コリス
  • CSSレイアウト時のよくやる失敗と対処法|WEB制作(html,css(スタイルシート) )|プログラムメモ

    ■floatでレイアウトしたときのボックスの間に隙間が出来る →隙間が出来るボックス要素全てに float 要素を追加 ■ <div>内に配置した<img>が<div>よりサイズが小さいと隙間が出来る → 下記を追加 img { display: block; } ■ Win IEだけずれる時があり、ずれる大きさがフォントサイズによって変わる →ずれる<div>等に vertical-align を設定する(top 又は bottom) ■ <td>内のフォントが正しく指定したとおりでない(Win IE Mac IE) →<td>の中に<span>をいれて対応する ■MacIEで<div>を floatさせると表示が崩れる。 → フロートさせるdiv の width height 属性を指定する ■<ul><li>で画像リンクを作成したときに WinIEでフォントサイズを変更すると 隙間

  • Re:ユーザーの動き。

    ちょっと前に書いた、ユーザーの動き。ですが、アレはただの自分専用メモだったので、自分だったらこーするかもって事と言葉足らずだった部分の補足エントリーです。 いわゆる、ユーザビリティテストっていうのに参加してきました。 目の前でターゲット層に比較的近いユーザがサイトを見ている様子を見るのは滅多にない経験だったので、非常に有用な一日でした。 年齢は、20代前後くらいで、普段から当たり前のようにネットやってる人は殆ど居なく、時々調べ事に使う程度くらいの方々が大半っていう状況での結果です。 だから、ターゲット層によっては、この結果はあんまり役に立たないかも知れないし、見事なまでに合致してる場合は、それなりに使える情報かもわかりませんね。 ロゴクリック=トップページに戻るという認識は殆ど無い。 だから、リンクは張りませんって結論にはならないので、対策としてはやっぱりグローバルナビゲーションやロゴの近

    Re:ユーザーの動き。
    picnicgraphic
    picnicgraphic 2008/02/18
    「トップページ」「このページの上部へ」/サイドバナーはデザイン/リストのマークをクリック/プルダウン・フッターリンクOK/全角半角わからず/入力エリアはマウス移動/サイトマップ・パンくず使われず/矢印はリンク認識
  • オープン Web デザインを始めます : could

    openwebdesignwordpress オープン Web デザインを始めます 去年の暮れから今年の始めにかけて Web デザインへの思いを書いてきました。その思いは「Web という媒体を理解した上でのデザイン」「Web デザインへの理解を深める」の2つの記事に集約されているかもしれません。これからも Web デザインへの興味は薄れることもないでしょうし、これからも続きになるような内容を書いていこうと思いますが、ここでひとつ問題があります。 掲載しているサイトのデザインがコンテンツに耐えられなくなって来ているという問題です。 コンテンツを反映しているサイトへ 長い間、このサイトを読んで下さっている方はご存じだと思いますが、以前のデザインは 3年半前に作ったものです。当時はそれで良かったかもしれませんし、そのときにはあまり見かけなかった情報の配置や見せ方をしていたと思います。しかし、今と

    オープン Web デザインを始めます : could
    picnicgraphic
    picnicgraphic 2008/02/05
    「僕がどうやって考えてどういうふうに組み立て、どうやって最終段階へもっていくのかをサイトにて紹介/あなたからフィードバックがあれば、それをデザインに反映しようと考えています」#ワクワクさせてくれる人!
  • RedLine Magazine : Fireworksで使っている色見本を共有する

    Fireworksで使っている色見を共有する 自分でデザインしてるとここ部分はあそこの色と同じとか頭の中で理解してて、スポイトで色抜いちゃう人なので、個人的には色見の使用頻度はあまり高くなかったりもします。 でも複数人で作業してて、例えば自分は大枠のデザインするけど、他の人がコーディングしてる途中で「あーそこの画像何か作って入れてくらさい」ってお願いしたい場合なんかに基的なカラーパレットを予め渡しておけば「使ってる色これですから」って説明しやすいし、いちいち相手もスポイトで色抜かなくても分りやすいかな、と。色に拘りたい時に他の人が作った画像見て「その色ちゃうねん!」みたいなのを未然に防げたりとか。 Fireworksでのカラーテーブル(.act)ファイルの作り方 問題の色見パネルのカラーテーブルは「.act」っていう拡張子のファイルらしいということが判明。とりあえずそれを作りたい。

    picnicgraphic
    picnicgraphic 2008/02/04
    「色見本の置き換え」→「色見本の保存」で.actファイルを渡すと親切なのでは?なお話/.actファイルの読み込み:Fw→PsはFwのカラーテーブルをFlashに読み込み・保存しPsスウォッチパネルから読み込む(Ps→Fwはいける)
  • SitePoint CSS Reference

    A Complete Guide to CSS Logical Properties, with Cheat Sheet

    SitePoint CSS Reference
    picnicgraphic
    picnicgraphic 2008/02/04
    「そのままコピー&ペーストして使えるようなCSSのコードと説明がまとめられたサイト/IE、Firefox、Safari、Operaのそれぞれのバージョンにおける動作状況がまとまっている」