タグ

DesignとHTMLに関するmag4nのブックマーク (9)

  • Making dev.to insanely fast

    It makes me smile when someone raves about how fast this website loads, because that's no accident. We put a lot of effort into making it so. It is the sort of thing that usually goes unnoticed, but when your readers are developers, there's a better chance they notice and appreciate it. I have written about this in the past, but it's worth re-examining because these ideas are always evolving. From

    Making dev.to insanely fast
    mag4n
    mag4n 2017/11/15
    dev.toの速さの秘密
  • フロントエンドスタイルガイド: 定義と要件、コンポーネントチェックリスト

    フロントエンドスタイルガイドは、デザインやテストを効率化し、UIの一貫性を高める。今回は、スタイルガイドの要件8個と、一般的なコンポーネント25個を紹介しよう。 Front-End Style-Guides: Definition, Requirements, Component Checklist by Page Laubheimer on March 27, 2016 日語版2016年6月23日公開 フロントエンドスタイルガイドとは何か フロントエンドスタイルガイドがUXの現場でますます一般化してきている。Jeff GothelfとJosh Seidenが彼らの著書『Lean UX』で説明しているように、フロントエンドスタイルガイドはアジャイルやリーンな環境で生まれたものである。 定義: フロントエンドスタイルガイドとは、製品のユーザーインタフェースにある全要素のモジュールコレクショ

    フロントエンドスタイルガイド: 定義と要件、コンポーネントチェックリスト
  • 珍しいワークフロー:Atomic Designの原則とSketchでデザインからプログラミングまで | POSTD

    概要: Sketchを使ったAtomic Designの方法がプロダクトデザインの未来形です。 初めに この記事は、上のビデオの素晴らしい人物、Brad Frostの開発したシステムについて書いています。Atomic Designは今のレスポンシブなデジタルの世界に対応するために開発されたものです。 ここ何年も、私たちのデザインを少しでも理解してもらえるよう、スタイルガイド、基的ガイドラインやムードボードなどのツールを作成してきました。同じように、開発者もBootstrapやFoundation、Bourbonなどのツールでプログラミング作業を楽にしようとしてきました。互いに妥協点を見いだし協力することで互いの作業を楽にできます。Atomic Designはまさにそれを実現しようとしています。 Atomic designはあるインスタンスやページをデザインすることではありません。大局的に

    珍しいワークフロー:Atomic Designの原則とSketchでデザインからプログラミングまで | POSTD
  • イラレのアピアランスで作れたアイコンが凄かったので、HTMLとCSSで模写した。 - kojika17

    数カ月前に@suzukisan__が投稿された「Illustrator Unlimited Appearance - suzuki | JAYPEG」は、Illustratorのアピアランスを駆使して、1つのオブジェクトからカメラのアイコンを作るという、面白い試みをされていました。 アピアランスの可能性を示す、インパクトのある内容であったため、記憶に残っている方もいることでしょう。 このアイコンが投稿されてから時間がたっていますが、HTMLCSSに分解されるイメージが自然に湧いてきたので、少しばかりのHTMLCSSでアイコンを模写してみました。 HTMLCSS で作ったカメラアイコン 模写したカメラアイコンは、Internet Explorer 10以上 や、最新のChrome, Firefoxなどであれば表示されるはずです。 こちらがHTMLCSSで書いたものになります。 ソ

    イラレのアピアランスで作れたアイコンが凄かったので、HTMLとCSSで模写した。 - kojika17
  • これはウェブページです。

    たいしたページではありません。 あるのは言葉だけ。 それをあなたは読んでいます。 オシャレなデザインや、レスポンシブなレイアウト、魔法のようなスクリプトに私たちは魅了されてしまいました。 でも、ウェブで一番強力な道具は、今も昔も言葉です。 私が書いた言葉を、あなたが読んでいる。これこそ魔法です。 私はブリティッシュコロンビア州の小さな都市にいますが、あなたは別のどこかにいることでしょう。私は2013年6月20日の早朝にこれを書きましたが、あなたは違う日時にこれを読んでいることでしょう。私はノートパソコンでこれを書きましたが、あなたは携帯電話でこれを読んでいるかもしれないし、タブレット端末やデスクトップ端末で読んでいるかもしれません。 私とあなたがこうして繋がることができたのは、私が書いた言葉をあなたが読んでいるからです。ウェブとはそういうものです。場所や端末、タイムゾーンが違っても、このシ

  • レスポンシブWebデザインとEPUB3の最新動向/EPUB 3とHTML5

    レスポンシブWebデザインとEPUB3の最新動向 EPUB 3とHTML5 2013年04月19日(金) 14:00-16:00 日印刷技術協会 3Fセミナールーム http://www.jagat.jp/content/view/4835/395/Read less

    レスポンシブWebデザインとEPUB3の最新動向/EPUB 3とHTML5
  • HGWのBLANK » GICOI2

    前回、Mocoro作Alex Pragerのウェブサイトを紹介したウェブサイトブラウジングシリーズの2回目です。Area 17というインタラクティブエージェンシーはご存知の方も多いのではないでしょうか。今回は彼らのウェブサイトで絶妙なアクセントとなっている赤いナナメ線について、すこし詳しく見てみようと思います。 URL : www.area17.com 制作 : Area 17 制作年 : 2009年10月頃 Area17は2003年3月に設立されたニューヨークとパリにオフィスを構えるウェブエージェンシーで、ウェブデザイン界では早い段階から実験的でありながら洗練されたデザインを実践しつづけている個性的なチームです。創設者でありデザイナーのArnaud Mercier氏は残念なことに先日亡くなられてしまったのですが、Elixir StudioからArea17、グラフィックからウェブデザインの

    mag4n
    mag4n 2011/12/27
    そこまでするこだわりがあったのだろう。
  • 「Yahoo!ニュース」の表示速度が3~5倍に、そのからくりは……:記事の芽

    夏休みスペシャル 2024 iPhoneで3Dモデルを手軽に作成、無料の純正アプリ「Reality Composer」を試す 2024.08.09

    「Yahoo!ニュース」の表示速度が3~5倍に、そのからくりは……:記事の芽
  • 栄光ゼミナール;塾選びガイド

    栄光ゼミナールとほかの塾との授業料、サービスなどさまざまなポイントについて比較しています。栄光ゼミナールの授業料、サービスなど充実させたコンテンツで作成していますが、やはり一番栄光ゼミナールを知るには、資料請求が一番です。 栄光ゼミナール資料内容 日程と授業料についてのご案内 栄光ゼミナールの夏期講習のご案内 個別指導のご案内。 「今子供たちは・」資料集栄光ブックレット とっておきなDVD(届くまでお楽しみ) 栄光ゼミナールでは、はじめての方には無料の夏期講習会になります。テキストの教材費は自己負担になりますが、それでも1教科につきたったの2100円。 栄光ゼミナールは特に中学生を対象に向けて圧倒的人気のサービスです。もちろん、それに付随するしっかりとしたサービスがあります。大手の学習塾には、有名講師が授業を100人程度で聞くタイプと少人数制(6人から20人程度)できめ細やかな授業

  • 1