タグ

デザインに関するsnswのブックマーク (31)

  • 痛Suicaの作り方:ハムスター速報

    Suicaの作り方 カテゴリ☆☆☆☆ 1 :名前:以下、名無しにかわりましてVIPがお送りします:2011/02/24(木) 15:17:03.97 ID:47Y9pyJB0 今回は痛Suicaの作り方を書いていこうと思います エクセル例 完成品 36 :名前:以下、名無しにかわりましてVIPがお送りします:2011/02/24(木) 15:30:24.56 ID:cqN1fOLq0 すげええええええええええええ こりゃ期待 5 :名前:以下、名無しにかわりましてVIPがお送りします:2011/02/24(木) 15:18:54.07 ID:OmgJXTdN0 キタ━━━━━━(゚∀゚)━━━━━━ !! 7 :名前:以下、名無しにかわりましてVIPがお送りします:2011/02/24(木) 15:19:18.82 ID:OY0UzVMqP 全裸待機するわ 以下、名

  • フッターに設置する大量のメニューリンクはスパム扱いの危険あり

    サイトのフッターに数多くの内部リンクを設置しているサイトをときどき見かけます。 SEO的な効果を狙っているようにしか思えないケースもありますが、場合によってはGoogleにスパム扱いを受ける危険性を高めているかもしれません。 Google社員のJohm Mueller(ジョン・ミューラー)氏がGoogle Webmaster Central公式ヘルプフォーラムで次のようにコメントしています。 In general, having a full “sitemap” in the footer rarely helps, and might be mistaken for an attempt at keyword stuffing. Using a normal HTML-sitemap page is probably a better idea — or just linking nor

    フッターに設置する大量のメニューリンクはスパム扱いの危険あり
  • [JS]jQueryのプラグイン33+1選 -2010年11・12月

    紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 Backstretch リサイズにも対応、背景画像をブラウザの枠いっぱいに表示します。 fullscreenr オーバーレイさせて背

  • https://jp.techcrunch.com/2010/12/03/20101202the-amazing-readability-of-google-maps/

    https://jp.techcrunch.com/2010/12/03/20101202the-amazing-readability-of-google-maps/
  • 高さの異なるボックス要素を揃えるテクニック : HTMLコーディングのノウハウ : HTML/XHTML、CSSコーディング最安保障~クロノドライブ~

    サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキス

  • CSSレイアウトの肝! 表示・配置のプロパティ、14選

    詳しくはコチラ→ position ボックスのレイアウト方法を指定するpositionプロパティ topプロパティ topプロパティは、ボックスを配置する場合に上からの距離を指定します。基準位置の上端から配置するボックスの上端までの距離を示します。positionプロパティが「static」以外のときに有効となるプロパティです。 詳しくはコチラ→ top ボックスを配置する場合に上からの距離を指定するtopプロパティ bottomプロパティ bottomプロパティは、ボックスを配置する場合に下からの距離を指定します。基準位置の下端から配置するボックスの下端までの距離を示します。positionプロパティが「static」以外のときに有効となるプロパティです。 詳しくはコチラ→ bottom ボックスを配置する場合に下からの距離を指定するbottomプロパティ leftプロパティ leftプ

    CSSレイアウトの肝! 表示・配置のプロパティ、14選
  • コーディングのスピードを上げる為の6つの方法

    2017年7月25日 Webサイト制作, 便利ツール 今より少しでもコーディングを早くできれば、細かいデザインや機能にも時間をかけて取り組めそう…という事で今回はコーディングのスピードを上げるためにできる事を紹介します。便利なツールを使ったり、ちょっとやり方を変えるだけでより早くコーディングができるようになると思います! ↑私が10年以上利用している会計ソフト! 1. コーディング手順を簡略化する これは自分のコーディング能力を高めて手順を省く、便利なツールを使って手間を省くという事です。例えば私は昔このような手順でコーディングを進めていました。 CSSのレイアウトをノートに書き出す レイアウト部分(ヘッダー・メイン・サイド・フッター)のHTMLマークアップ CSSでレイアウト部分のスタイリング 表示確認 うまく表示できない箇所の修正 ヘッダー内のHTMLマークアップ CSSでヘッダー内の

    コーディングのスピードを上げる為の6つの方法
  • ウェブデザイナーとしてスキルアップするための20のメソッド

    素晴らしいデザイナーは日々、自身のスキルを向上しています。 「もうここで十分です」と言って成功したデザイナーを誰も聞いたことがないでしょう。 ウェブデザイナーのスキルアップに役立つ20のメソッドを紹介します。 20 Methods for Upping Your Current Web Design Skills [ad#ad-2] 下記は各ポイントを簡潔に意訳したものです。 原文はそれぞれもう少し長いです。 ユーザーインターフェイスのデザインパターンのスタディ ウェブデザインのために最も良いUIをチェックし、研究してください。 ディテールに注意を払う 日常や他のウェブサイトのディテールを見て、自身のデザインにも多くを加える練習をしてください。 SEOのテクニック クライアントの多くはSEOサービスを提供するウェブデザイナーが好きです。 ウェブデザインのトレンドを知る ウェブトレンドは単に

  • 【レビュー】GIMPでフォトから特定のオブジェクトだけを自然に消し去る方法 | エンタープライズ | マイコミジャーナル

    The GNU Image Manipulation Program Photoshop CS5が提供している便利な機能のひとつに「Content-Aware Fill」と呼ばれるものがある。これは選択した対象を画像から消し去るためのものなのだが、その消し方がすごい。まるで、最初からそこにそれはなかったかのようにまわりの風景を加味した消し方をする。デジカメで撮った写真を使いたいとしても、邪魔なオブジェクトが写っているため使えないとか、わざわざピクセル単位で編集をかけて特定のオブジェクトを消し去った経験があるWebデザイナは少なくないだろう。Photoshopの「Content-Aware Fill」を使うと、それが簡単に完了する。 同様の機能はGIMPにも用意されている。デフォルトの機能ではなく、プラグインで追加する機能だ。「Resynthesizer」と呼ばれる機能で、Ubuntuであれ

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

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

    Webサイト制作でよく出てくるコンテンツとそれによく使うディレクトリ・ファイル名の一覧 - btmup Blog
  • 非デザイナーのためのデザイン基本テクニック その1 | 07design.blog

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

  • 実は隠された裏の意味を持つ企業ロゴいろいろ : らばQ

    実は隠された裏の意味を持つ企業ロゴいろいろ 企業や製品のブランドには様々なロゴが用意され、名前や関係したデザインが盛り込まれています。 それぞれ良く考えられた末の意匠ですが、中には二通りの裏の意味を持つ、ひねりのあるロゴもあるんです。 実は隠された意味を持っていた、良く知られた有名企業のロゴをいくつかご紹介したいと思います。 Vaio 言わずと知れたソニーのVaioのロゴですが、実は隠れた意味があるそうです。 前半の2文字が正弦波でアナログを示し、最後の2文字が1と0の2進法でデジタルを表現しています。「アナログとデジタルの融合」をスローガンとしているとのことです。 Amazon ネットショッピングでおなじみのアマゾンですが、実はちょっとした哲学を反映しているそうです。 黄色の矢印は、客に満足させたい意味を込めたスマイルの口のようになっています。その矢印がaとzを指しているのは、アマゾンに

    実は隠された裏の意味を持つ企業ロゴいろいろ : らばQ
  • コーディング前に確認しておきたいこと。 - CSS HappyLife

    CSS HappyLife ZERO が移転したのでお手数ですが、消えちゃう前にブックマーク等変更してもらえるととても嬉しいです。 制作会社でコーディングする場合、社内のガイドライン的なのが有ったりデザイナーもある程度固定されてると思うので、毎回似たような事を確認したりとか、このデザインはどういう意図なんだろう?ってのも、何度か同じ人とやってれば見えてくる訳ですが、フリーランスの場合だとデザイナーは毎回違っていたり、当然ディレクションをする人も違うので最初に確認しておきたい事が有ったりします。 って事で、その辺りをまとめてみたり、デザインを渡されたときにこのデザインの意図は?って思う事とかもばーっと書いてみます。はい。 なので、デザイナーさんもコーダーにデザインを渡すときに気をつけて欲しい点とかもわかってしまうすばらしい内容(だと良いな)! じゃあまずは最初に確認しておきたい基的なことか

    コーディング前に確認しておきたいこと。 - CSS HappyLife
  • Webデザイナの作業効率を改善する10の方法 | エンタープライズ | マイコミジャーナル

    Noupe passionately delivers stylish and dynamic news for designers and web-developers on all subjects of design, ranging from; CSS, Ajax, Javascript, web design, graphics, typography, advertising & much more. 作業効率を改善するためのテクニックはこれまで多く登場している。表現する方法や手段に差はあれど、結局のところ最終的に実現しようとする内容は、1)気を紛らわすようなものを削除する、2)作業を引き伸ばすといったことをしない、3)最初に決めたスケジュールは守る、などの内容に落ち着く。 こうした内容を踏まえつつ、Get More Done: 10 Tips for a More Produ

  • PNG vs. JPG ~間違いを防ぐ6つの助言~ | AUTHORITY SITE

    snsw
    snsw 2010/07/06
    PNGで保存してしまうのはよくあります。JPGの方がサイズが小さくなることもよくあります。でも画像が劣化するのが怖いです。マスター保存するのめんどくさいし。
  • あなたのWebを入力しやすくするjQueryプラグイン10選

    あなたのWebを入力しやすくするjQueryプラグイン10選:CSSの書き方も分かるjQueryプラグイン実践活用法(終)(1/5 ページ) jQueryと、そのプラグインの使い方を、UI効果(エフェクト)のテーマごとに紹介する連載。jQuery/JavaScript/HTMLコードだけではなく、CSSの書き方も解説することで、より実践的にjQueryプラグインを使うための参考ドキュメントになることを目指しています。 前回の「画像や動画を綺麗に回転/拡大するjQueryプラグイン」では、イメージを回転させたりズームインする「jCarousel」「Zoombox」プラグインの使い方を解説しました。今回は、フォームを使いやすくするための各種プラグインを、以下のようにチェックボックス/ラジオボタン、ドロップダウンリスト、テキストボックス/テキストエリア、フォームのカテゴリ別に分類して紹介します。

    あなたのWebを入力しやすくするjQueryプラグイン10選
  • 見出しデザインの参考にしたい CSSで作るhタグのサンプル集 | 日刊ウェブログ式

    ブログの記事タイトルやサイドバーのタイトルなどで使えるオーソドックスな見出し(hタグ)のデザインサンプル集です。見出しにはCSS3や画像を使っていないのでシンプルですが、一応よく使うので、メモとしてエントリーしておきました。 ※追記6/24 HTMLのマークアップをpからh3に置き換えました。 見出し(Headline)のサンプル集 色やボーダーサイズ等の装飾部分は お好みで編集してください。 見出しサンプル01 .selector01{ border-left:7px solid #e3297d; padding:.6em .8em } 見出しサンプル02 .selector02{ border-left:7px solid #ccc; border-bottom:1px solid #ccc; padding:.6em .8em } 見出しサンプル03 .selector03{ bor

  • http://www.designwalker.com/2010/06/jquery-forms.html

    http://www.designwalker.com/2010/06/jquery-forms.html
  • [CSS]画像を使用しないで、紙テープを折り返したようにするスタイルシート

    <textarea name="code" class="html" cols="60" rows="5"> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>CSS Shapes</title> <!--[if IE]> <style> .arrow { top: 100%; } </style> <![endif]--> </head> <body> <div id="container"> <h1> My Heading <span class="arrow"></span> </h1> </div> </body> </html> </textarea>

  • IDEA * IDEA

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

    IDEA * IDEA