タグ

Webとデザインに関するfudafootaのブックマーク (4)

  • 視覚的に指定したウェブサイトの差分を表示してくれるサービス「Diffd」 | ライフハッカー・ジャパン

    「Diffd」は視覚的に指定したウェブサイトの差分を表示してくれるサービスです。コードベースでの差分ではなく、視覚的にどの部分がどう変化したかを示してくれます。ひと目で差分が確認できるので便利。 詳細は以下より。まずDiffdへアクセスしましょう。 こちらに書かれているように、このようなコードベースの比較をなくそうという試みです。実際コードを見て差分を確認するのもよいですが、やはり視覚的に分かるものであればそうしたいですよね。 Diffdを使った結果はこちら。緑と赤の枠で囲まれた部分が差分を示しています。コードで比較するよりも分かりやすいですね。パッとみてどこに変化があったのか調べられるので、エンジニアでない方でも差分を見つけることができます。ぜひウェブサイトの差分を比較したいときにご活用ください。 Diffd (カメきち)

    視覚的に指定したウェブサイトの差分を表示してくれるサービス「Diffd」 | ライフハッカー・ジャパン
  • [Webデザイン] 文字組みについて本気出して考えてみた | Stocker.jp / diary

    これはもう何年も前から気になってることなのですが。 何故、昔からずっと見出し画像などの文字組みや文字詰めの甘いWebサイトが多いのでしょうか。 私はデザインについて偉そうに言える立場でないのは分かっていますが、折角全体的なデザインや背景、写真、Flashなどの動きはとても美しく、文章構成のしっかりしたサイトなのに、ただ一点文字詰めだけが甘いというサイトがあまりにも多くて、そういうサイトが減る様子もないのがずっと気になっています。 私は以前、ファッション雑誌やビジネス誌の組版(MacのInDesignやQuarkXPressを使って印刷用のデータを作る仕事。DTPとも言う)の仕事をしていて、見出しは言うまでもなく、文の文字詰めが少し甘いだけでもものすごく怒られたものですが、Webデザインの世界ではそういうのはあまり怒られることがないのでしょうか。 私は、見出しやタイトル画像における文字組み

    [Webデザイン] 文字組みについて本気出して考えてみた | Stocker.jp / diary
    fudafoota
    fudafoota 2015/10/10
    こういう記事見るとタイポグラフィの面白さに感動する
  • 短期間である程度までjQueryができるようになる独学Webデザイン勉強法を書いてみる - Yukihy Life

    HTMLCSS勉強法を以前書きました。 www.yukihy.com この記事を書いたあと、jQueryに挑戦をして、まだまだ完璧ではないものの実際にこのはてなブログを通して、いろんなブログパーツのようなものを作ることができました。 そこで、jQueryを勉強するとき、効率良く身につけられる方法を書いていきたいと思います。 僕自身いろんなやツールに手を出しながら進めてきたので、実際に下の通りに行ったわけではありませんが、もう一度勉強しなおすとしたらこういったようにやるなといった感じです。 それではレッツゴー! jQueryを身につけるための最短ステップ ステップ1 Progateで手を動かしながら学ぶ ステップ2 平行してWebデザインレシピの記事を読む ステップ3 ドットインストールで総復習&補完 ステップ4 書籍を参考に実際に作ってみる 作りながら学ぶjQueryデザインの教科書

    短期間である程度までjQueryができるようになる独学Webデザイン勉強法を書いてみる - Yukihy Life
    fudafoota
    fudafoota 2015/10/09
    プログラミングを短期間で学ぶのに便利なものが多い
  • コピペで実装!CSS3でオシャレなデザインのサンプルコード47選

    2015年7月14日の記事を再編集しています。 CSSの新しいバージョンであるCSS3は、アニメーションなどの新機能が追加となったことで従来のCSSよりもグッと便利になりました。CSS3を使えば今までよりも様々な表現ができ、ホームページを魅力的に演出してくれます。 しかし「使ってみたいけれども難しそう……」という方も多いのではないでしょうか。そんなCSS3初心者の方には、サンプルコードを活用することをオススメします。コピペするだけでCSS3を使ったテクニックを取り入れることができますので、試してみましょう。 今回は、CSS3でオシャレなデザインのサンプルコードをまとめてご紹介します。 CSS3で実装できるオシャレなサンプルコードまとめ 1. HTML5+CSS3でデザインしたtableのCSSHTMLサンプルソース5点|株式会社LIG https://liginc.co.jp/web/h

    コピペで実装!CSS3でオシャレなデザインのサンプルコード47選
  • 1