タグ

ブックマーク / www.webcreatorbox.com (17)

  • CSSスプライトで画像を円滑に表示させる

    2014年8月13日 CSS, Webサイト制作 CSSスプライトとは、複数の画像をひとつにまとめて、CSSでポジションを指定することにより表示させるCSSの技のひとつです。画像の数を減らすことにより、サイトの表示を速めることができます。以前よりYoutubeなどに使用されているので、その名前を一度は聞いたことがあるかもしれません。ここではCSSスプライトを使用したメニュー画像の作り方を紹介します。 ↑私が10年以上利用している会計ソフト! CSSスプライトを使うデメリット メリットは上記にあるとおり、サイトの高速化が期待できます。ではデメリットとは? alt属性が使えない 背景画像のリピート表示ができない 更新する時に手間がかかる(サイズを変えるとCSSも変えなければいけないため) 以上をふまえて、私はいつもメニューの背景やボタンなど、マウスオーバー時に変化する画像のみCSSスプライトを

    CSSスプライトで画像を円滑に表示させる
    nilab
    nilab 2016/12/16
    「CSSスプライトとは、複数の画像をひとつにまとめて、CSSでポジションを指定することにより表示させるCSSの技のひとつです。画像の数を減らすことにより、サイトの表示を速めることができます」
  • 少しのコードで実装可能な20のjQuery小技集

    2016年6月22日 jQuery 素敵な動きを手軽に実装できるJavaScriptライブラリ「jQuery」。jQueryには多くのプラグインが揃っていますが、以前書いた「少しのコードで実装可能な20のCSS小技集 」に続き、今回はプラグインなしで実装できるjQueryの小技を紹介します!「jQueryってなんだ?」という人もコピペで実装できますよ!サンプルも用意したのでぜひご覧ください! ↑私が10年以上利用している会計ソフト! 追記:この記事で紹介されているいくつかの方法が、今ではCSSのみで実装可能です!詳しくは「かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技」をご覧ください。 jQueryの基的な使い方 まずはjQuery家からjQueryファイルをダウンロードします。<head> 内に下記を記述し、jQueryファイルを読み込みます

    少しのコードで実装可能な20のjQuery小技集
    nilab
    nilab 2012/08/08
    少しのコードで実装可能な20のjQuery小技集 | Webクリエイターボックス
  • デッサン力とWebデザイン

    2017年6月29日 Webデザイン Webデザインをやるのにデッサンなんて必要あるの?そう思っている人も多いと思います。確かにPhotoshopを使えば写真を手書き風に加工したり、イラスト風にすることも可能です。アイコンだって商用で使えるアイコンはたくさん出まわっていますね。それでも私は「デッサン力は必須ではない」けれど「あった方が絶対にいい」と思っています。そんなデッサンについて書いてみます。 ↑私が10年以上利用している会計ソフト! アンケート結果 [poll id=”2″ type=”result”] こっそり行ったアンケート第二弾!一位は「自信はないけど描ける」という答えでした。2位以下は近差でしたが、「無理!」という人が一番少ないですね。この答えからも見えてくるデッサン力の必要性。あれ、そもそもデッサンってなんなんでしょ? デッサンとは デッサンとは、目で見た物体の形状や質感、

    デッサン力とWebデザイン
    nilab
    nilab 2012/07/18
    デッサン力とWebデザイン | Webクリエイターボックス
  • 就活に打ち勝つポートフォリオWebサイトの作り方 | Webクリエイターボックス

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

    就活に打ち勝つポートフォリオWebサイトの作り方 | Webクリエイターボックス
    nilab
    nilab 2012/07/18
    Webデザイナーになりたい!就活に打ち勝つポートフォリオWebサイトの作り方 | Webクリエイターボックス
  • 印象に残る名刺の作り方

    2013年12月25日 インスピレーション, 名刺 みなさんはどんな名刺をお持ちですか?またはどんな名刺に目を奪われますか?今働いている会社の名刺ではなく、個人の名刺を作ってみたくないですか?どうせ持つならインパクトのあるものがいいですよね!最初の印象をグッとよくする名刺の作り方がWeb Designer Depotで紹介されていたので意訳してみます! ↑私が10年以上利用している会計ソフト! Webデザイナー・デベロッパーとして、私たちは紙媒体を利用したマーケティングを見落としがちです。しかし、会議などクライアントと面と向かって会う場合や今後一諸にビジネスをするかもしれない誰かと出会ったとき、印刷物は非常に役に立ちます。名刺を持つことはあなた自身をオフラインの世界で宣伝するとてもいい方法です。 もちろんWebデザインは創造的な分野であるので、名刺にポートフォリオのような、自分のスキルを見

    印象に残る名刺の作り方
    nilab
    nilab 2012/07/18
    印象に残る名刺の作り方 | Webクリエイターボックス
  • コーディングのスピードを上げる為の6つの方法

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

    コーディングのスピードを上げる為の6つの方法
    nilab
    nilab 2012/07/18
    コーディングのスピードを上げる為の6つの方法 | Webクリエイターボックス
  • Webデザイナーさんにおすすめの無料で読める電子書籍いろいろ

    2014年2月25日 Web関連記事, インスピレーション 私は普段紙のをほとんど読みません。年に1冊読むか読まないか…。しかし、iPadを購入してからはなぜか電子書籍なら読むようになりました。ディスプレイで読む事の方が慣れているからですかね…?という事で私が最近読んだ無料の電子書籍をいくつか紹介します。日語のものは比較的サクサク読めるものばかりなので、空いた時間に読んでみてください! ↑私が10年以上利用している会計ソフト! インタラクティブPDFでつくったインタラクティブPDFのつくりかた〜動画/音声再生・ページ効果編〜 ダウンロード InDesignで動画や音声付きのPDFファイルの作り方を説明してます。サンプルもついています。紙のでは表現できない、電子書籍の魅力はこういった点にあると思うので、これから電子書籍の出版を考えている人には参考になると思います。 地域でメディアづくり

    Webデザイナーさんにおすすめの無料で読める電子書籍いろいろ
    nilab
    nilab 2012/07/18
    Webデザイナーさんにおすすめの無料で読める電子書籍いろいろ | Webクリエイターボックス
  • I’m back! + I was fighting against disease

    2017年7月23日 お知らせ 約二ヶ月ぶりにブログ書きます。前回「しばらく更新を停止します」という記事を最後に治療に専念していたのですが、治療も一段落ついたので少しずつもとの生活に戻っているところで、今は自宅療養中です。ひとまず今月で治療を一旦終了して、経過観察していくようです。一応病名は公開しないつもりなんですが、いい加減バレますねこれw 復帰のお知らせも兼ねて簡単に闘病記でも書いてみます。 ↑私が10年以上利用している会計ソフト! 今回の件で死の覚悟もでき、もはや「死は全く怖くない。一番恐れるのは今のこの気持ちがやがて風化してしまわないかということだ。」状態です(あれ、これどっかで…)。実は一年くらいまえから「Post Ever」というアプリを使ってEvernoteに瞬間日記なるものをつけていたので、「当たり前の生活」を「幸せ」と感じられる今の気持ちを忘れないよう、病気発覚から闘病中

    I’m back! + I was fighting against disease
    nilab
    nilab 2012/06/10
    復帰します!+闘病してました | Webクリエイターボックス
  • 海外のWeb業界で働くには?

    2013年3月23日 Web関連記事, 海外情報 「海外で就職するのは大変ですか?」よくこのような質問を頂きます。答えは決まって「はい、大変です」。そこには超えなければならない壁がいくつもあり、簡単に「海外で働くって楽しいよ!みんなおいでよ!」なんて言えません。今回はオーストラリア・シドニーでの就職を記念して(?)今まで頂いたメールの返答をざっくりとまとめてみました。Webデザイナーに限らず他業種の方にも当てはまると思うので、海外就職を夢見ている人はぜひ読んでみてください。 ↑私が10年以上利用している会計ソフト! まず何から始めればいいの? 「海外で働いてみたい」「でも何から始めれば…」との声をたくさん頂きました。私の場合特に何も考えずふらりと遊びに行ってそのまま居座ってしまったタイプですが、そうではなく、最初から海外就職を目標にしている人へ向けて記事を書いてみます。 まずすべき事、それ

    海外のWeb業界で働くには?
    nilab
    nilab 2012/06/10
    海外のWeb業界で働くには? | Webクリエイターボックス
  • 海外Webサイト・海外Web屋の特徴

    2013年3月23日 Web関連記事, 海外情報 以前「日向けのウェブデザインというのはあるのか?」という記事を読み、「逆に海外のサイトは具体的にどう違うかなあ?」と思ったので、私が感じた海外のWeb業界やサイトの違いを並べてみます。海外向けのWebサイト制作を考えている方、海外で働こうと思っている方の参考になればと思います! ↑私が10年以上利用している会計ソフト! 追記:ここで紹介する「海外」とは、私が滞在・就労経験のあるカナダとオーストラリアを指しています。 海外Webサイトの特徴 URLを直接入力 日ではURLバーに直接入力する人は少ないかと思われますが、海外では目的のブランド名がわかっている場合、とりあえず「.com」をつけてWebサイトを開きます。海外で .com が人気な理由はこのへんにありそうです。そのため、新たに会社やサービスを立ち上げるときは、そのブランド名とドメイ

    海外Webサイト・海外Web屋の特徴
    nilab
    nilab 2012/06/10
    海外Webサイト・海外Web屋の特徴 | Webクリエイターボックス
  • 4年半の英語学習でした事・しなかった事

    2013年6月9日 英語 前々から「Manaさんはどうやって英語の勉強をしたんですか?」と聞かれる事が多いのですが、前回の「海外在住Web屋の私のまわりで最近話題の5つのWebサービス」という記事を書いてさらに増えてしまい、もう記事にしてしまえ!という事で今までしてきた英語の勉強方法をまとめてみました。Web関連の記事以外は書くつもりはなかったのですが、今回はお許しくださいまし。 ↑私が10年以上利用している会計ソフト! まずはここから!身の回りの物を英語環境に まず、iPodやiPhone、携帯電話、できればPCMacなど、英語に設定変更できるものは全て英語にしてしまいます。これで英語が覚えれる!というわけではありませんが、だんだんと身の回りに英語があるという環境に慣れてきます。突然分厚いを読み始めてもすぐあきちゃいます。習うより慣れろ!方針で。私の場合はiPodの中身も洋楽のみ(大

    4年半の英語学習でした事・しなかった事
    nilab
    nilab 2012/06/10
    4年半の英語学習でした事・しなかった事 | Webクリエイターボックス
  • 15 Useful Code Snippets for Smartphone Website

    2014年8月22日 Webサイト制作, スマートフォン スマートフォンが普及してきて、Webサイトを作る時、スマートフォンサイトも一緒に制作している方も多くなってきていると思います。私もスマホサイトを制作する機会が増え、だんだんEvernoteに保存していたスマートフォンサイトを作る時の小技がたまってきたので、iPhoneで使える小技を中心にまとめて記事にしてみます。いくつかサンプルも作っているので、スマートフォンからあわせてご覧下さい! ↑私が10年以上利用している会計ソフト! スマートフォンサイト用小技集 目次 いくつかサンプルも作ったのでスマートフォンから、もしくはブラウザーからユーザーエージェントをiPhoneなどに切り替えてご覧ください! 横幅をデバイスの幅にあわせる 文字サイズの自動調整をオフ リストのクリック(タップ)範囲を広げる 画面の幅にあわせてCSSを変える リンクテ

    15 Useful Code Snippets for Smartphone Website
    nilab
    nilab 2012/02/22
    少しのコードで実装可能な15のスマートフォンサイト用小技集 | Webクリエイターボックス
  • 無断転載パクリブログ事件のまとめ

    2014年8月21日 Web関連記事, ネタ ここ数日Twitterはてなブックマークで話題になっていた「無断転載パクリブログ」の件。日一段落したのでまとめてみます!私は記事をパクられた当事者ですが、なぜか祭りに参加して楽しんでいました!「え?なにそれ?」という人、「見たけど画像保存しておけばよかった!」という人は必見! ↑私が10年以上利用している会計ソフト! 1. 事件発覚 ホームページを作る人のネタ帳さんがTwitterでつぶやいていたのをきっかけに事件を知りました。どうやら人気有名ブログの記事をそのまんま転載し、「ブログ書いた」などと、自分が書いたかのように見せかけているブログがあるようで。この段階では「Yamadaさん大変そうだなあ…」と他人ごとだったのですが、どうやら私の記事も無断転載されている事も伝えられ、対応策を考え始めました。パクられた記事は「Web屋さんのための新年

    無断転載パクリブログ事件のまとめ
    nilab
    nilab 2011/01/15
    うんこぷりぷり。「画像を直リンクしていたらしく、かちびと.netのシロさんの助言(?)により、画像を差し替え」無断転載パクリブログ事件のまとめ | Webクリエイターボックス
  • Web屋さんのための新年の抱負アイデア24

    2017年6月29日 Web関連記事, ライフハック 2011年がスタートしましたが、「なんだか調子でないなー」という方!今年の目標はもう設定しましたか?私は毎年「新年の抱負」を考えているのですが、今年は何にしましょう?ということで、Web屋さんが設定できそうな新年の抱負案を考えてみたので、参考にしつつ新年の抱負を考えてみてはいかがでしょう? ↑私が10年以上利用している会計ソフト! 1. CSS3の勉強をする 角丸・グラデーションをはじめ、画像を使わなければできなかった効果がCSS3を使えば簡単に実装できます。デザインの幅がぐんっと広がります。IEで対応していないなどの問題もありますが、CSS3 PIEを使えばIEでも使えるようになりますよ。 CSS3リファレンス CSS3のリファレンスサイト。コードの例もわかりやすいです。 たった一行を追加するだけでIE6/7/8をCSS3対応にする

    Web屋さんのための新年の抱負アイデア24
    nilab
    nilab 2011/01/12
    Web屋さんのための新年の抱負アイデア24 | Webクリエイターボックス
  • ソースコードで発見した奇妙なコメント集

    2013年3月23日 ネタ コーダー・デベロッパー・プログラマーさん達はそのソースコードにわかりやすい説明書きを「コメント」として残し、後から他の人が修正・編集しやすいようにコードを書いていきます。Stackoverflowの中でなんだそりゃー!というコメントがまとめられていたのでいくつか翻訳してみます!「クライアントからのムチャぶり迷言集 」に続き久しぶりにネタ系記事です。楽しんでください! ↑私が10年以上利用している会計ソフト! プログラマーさん達の名誉のため、先に言っておきますが、全てのプログラマーがこういったコメントを残しているわけではありませんよ!「こんなの書く人いるんだー世の中いろんな人がいるもんだー」くらいに軽く読んでみてください! 自信を失したプログラマー達 自虐コメント多数! // ごめん。 /* お願い…動いてくれ… */ // このコードは最低だ。知ってるだろ?俺も

    ソースコードで発見した奇妙なコメント集
    nilab
    nilab 2011/01/03
    ソースコードで発見した奇妙なコメント集 | Webクリエイターボックス
  • 少女のレモネードスタンドから学ぶ9つのマーケティング術

    2013年3月23日 マーケティング フリーランスのコピーライター・マーケティングコンサルタントであるJim Lodico氏の記事が、昨年Web Designer Depotというブログに紹介されていました。あの記事面白かったなーと突然思い出したので、Walter氏の了承のもと意訳してみます。元記事は“9 Marketing Tips from a Six-Year Old’s Lemonade Stand”です! ↑私が10年以上利用している会計ソフト! ある日、うちの娘ソフィアがレモネードスタンドをしたいと言ってきました。 レモネードを売るために週末をつぶすのは当に嫌だったので、レモネードミックスを買ったりカップを用意したりするのにどれほど費やさなければならないかを娘に説明しました。 努力もむなしく、娘の意思を曲げることはできませんでした。彼女はどうしてもそれをやりたかったようで、彼

    少女のレモネードスタンドから学ぶ9つのマーケティング術
    nilab
    nilab 2010/09/16
    少女のレモネードスタンドから学ぶ9つのマーケティング術 | Webクリエイターボックス
  • クライアントからのムチャぶり迷言集

    2013年3月23日 ネタ みなさんはクライアントのとの打ち合わせ中に「そんなむちゃな!」と思ったことはありませんか?私はあります。何度もあります。そんなクライアントからの迷言を集めたサイト: Clients From Hell(地獄からきたクライアント)と、こちらの記事を載せてみようと思います。 ↑私が10年以上利用している会計ソフト! 時間とお金に関するムチャぶり 残念ながら多くの人がWebサイトは簡単に作れると思っているのが現状です。。 「今日中に100ページくらいのWebサイトを作って貰えますか?」 「会社のコンセプトを変えようと思うんだ。Webサイトを作り直すのに2日あれば充分かな?」 「ブログとショッピングカートのついた8ページくらいのサイトを作ってください!3万円で!」 「支払うお金はないんだけど、このシルクのシャツは6000円くらいするから、ほら、持っていってください。」

    クライアントからのムチャぶり迷言集
    nilab
    nilab 2010/02/08
    クライアントからのムチャぶり迷言集 | Webクリエイターボックス
  • 1