タグ

ブックマーク / gihyo.jp (11)

  • 2021年のウェブ標準とブラウザ | gihyo.jp

    2021年になりましたね。 矢倉眞隆(myakura)です。ウェブ標準やブラウザに興味のあるウェブ開発者です。gihyo.jpでは2009年に「Web標準とその周辺技術の学び方」という連載をしていました。 今回は昨年の泉水さんに代わり、2021年のウェブ標準やブラウザの動向を占おうと思います。2020年は世界もブラウザもそれなりに大きな出来事がありましたので、2020年の動きをまずおさえ、そのうえで2021年はどうなるのかを考えてみました。 W3Cのプロセス改訂でLiving Standardライクな仕様の改訂が増えていく W3Cは2020年9月に、新しいプロセス文書と特許ポリシーを公開しました。 新しい文書プロセスはW3Cの組織の定義や標準化の流れ、意思決定などについて定めた文書です。ここ数年は毎年更新されていますが、2020年はこれまでと比べて最大級とプレスリリースでもうたわれています

    2021年のウェブ標準とブラウザ | gihyo.jp
  • 第1回 画像はどう置く?―位置、大きさ、揃え方 | gihyo.jp

    連載を担当する池田拓司(@tikeda)と申します。ニフティ、はてなクックパッドと15年にわたりインターネットサービスを運営する会社に勤め、2017年4月よりDesign & Life inc.を設立しました。現在はインターネットサービスをはじめとするいろいろなデザイン業、およびサービス開発などの仕事を主にしています。 連載では、WebやアプリのUI(User Interface)構築に関わる人に向けて、普段何気なくデザインしているUIや、定番化されていて疑問を持たずなんとなく作っていたUIにもちゃんと意図があることを理解し、ユーザーにとって効果的なものにするための考え方を紹介していきます。 今回は、連続する複数の候補を並べるリストの中で、ユーザーの目線を引きつける「画像」の扱い方に焦点を当てます。 左側に置く? 右側に置く? 図1や図2のように、リストにはそれぞれの項目に関係する「

    第1回 画像はどう置く?―位置、大きさ、揃え方 | gihyo.jp
  • 2017年のWeb標準 | gihyo.jp

    株式会社ミツエーリンクスの渡邉卓です。昨年の「2016年のWeb標準」と同様に、2017年もWebコンテンツのフロントエンド設計および実装に関連した各種標準や、周辺領域の動きに関する短期的な予測を寄稿させていただきます。 2017年のWeb標準については「HTML 5.1およびHTML 5.2 - HTML Living Standardとの乖離」「⁠IE9のサポート終了」「⁠CSS Flexible Boxの利用増加 - ただし旧仕様とバグに注意」「⁠ECMAScript 2017」「⁠各Webブラウザ、Adobe Flashのブロック開始」をキーワードとして取り上げます。 HTML 5.1およびHTML 5.2 - HTML Living Standardとの乖離 2016年11月1日、HTML 5.1がW3C勧告になりました。しかし、各ブラウザベンダーは(Microsoftを除いて)

    2017年のWeb標準 | gihyo.jp
  • 第4回 jQueryでアニメーション(お題編) | gihyo.jp

    はじめに jQueryの機能を大きく分けると、DOM操作、アニメーション、イベント処理、Ajax、その他のユーティリティ関数といった分類ができます。DOM操作は前回の記事で解説したような、HTMLの要素を追加したり書き換えたりといった操作です。今回はその中の1つ、アニメーションについて解説します。アニメーションも正確にはDOM操作に分類されますが、アニメーションだけでかなり大きな比重を占めるので今回は通常のDOM操作とわけて考えます。イベント処理やAjax、ユーティリティ関数についても連載の後のほうで解説する予定です。 JavaScriptでアニメーションの基 まず始めに、jQueryを使わないでアニメーションをする方法を紹介します。jQueryのアニメーションが実際に内部でどのような処理が行われているかを知ることでその後の理解度が増すと思います。JavaScriptでアニメーションは基

    第4回 jQueryでアニメーション(お題編) | gihyo.jp
  • 第3回 jQueryの基本(回答編) | gihyo.jp

    お題の復習 まずは前回出したお題を復習しましょう。前回のお題は以下のようなHTMLがあったときにマウスオーバーでサブメニューを表示するようなUIをjQueryを使って書くというものでした。 お題(連載第二回目) お題(連載第二回目⁠)⁠ - jsdo.it - share JavaScript, HTML5 and CSS たくさんforkしていただいてありがとうございました。今回は回答編ということでみなさんにこのお題をforkしてもらった作品を紹介しながらjQueryを使ったマウスオーバーでのメニュー表示機能を解説していきます。やってみてわからなかった人は模範解答を参考にしてみてください。 模範解答 ではまず模範解答を見ていきましょう。他にもよくできていた作品はたくさんありましたが、模範解答の例として以下の作品を紹介します。 forked from: お題(連載第二回目⁠)⁠ - jsd

    第3回 jQueryの基本(回答編) | gihyo.jp
  • 2011年1月第2週号 1位は、2011年のWebデザインの流行、気になるネタは、Mac App Storeがオープン | gihyo.jp

    週刊Webテク通信 2011年1月第2週号1位は、2011年のWebデザインの流行、気になるネタは、Mac App Storeがオープン ネットで見かけたWebテク(Webテクニック・Webテクノロジー)記事から、Webデザイナーの目で厳選したネタを週刊で紹介するこのコーナー。今回は、2011年1月3日~2011年1月9日の間に見つけた記事のベスト5です。 1. Web Design Trends in 2011 | Tipshttp://webdesignledger.com/tips/web-design-trends-in-2011 2011年のWebデザインの流行に関する記事です。美しさよりも機能、反応するデザイン、常時接続とバーチャルリアリティ、といったポイントが挙げられています。 以下の項目について解説されていました。 CSS3とHTML5がより多く利用される シンプルな配色

    2011年1月第2週号 1位は、2011年のWebデザインの流行、気になるネタは、Mac App Storeがオープン | gihyo.jp
  • 第8回 User Landing through FUser Landing through F.A.Q. Contents「FAQコンテンツを使ったLPO」

    WEB DESIGN WORKSHOP「正しいウェブデザイン」 第8回User Landing through F.A.Q. Contents「FAQコンテンツを使ったLPO」 ウェブサイトは⁠”コンテンツ⁠”と⁠”検索キーワード⁠”をマッチングさせることで、サイトコンテンツを「情報」として、ターゲットとなるユーザーニーズに「価値あるソリューション」を提供することが出来る。一方的に情報を配信するだけのマスメディア広告とは違い、購買に有効なユーザーが持つ個別のニーズに対し、直接アプローチをすることが出来るのだ。 しかしユーザーは様々なキーワードで検索を行い、通常のウェブサイトのコンテンツ構成ではそれらをカバーすることはできない。製品やサービスをソリューションとして、それらを求めるユーザーに届けるためにはFAQを活用することで、全キーワードをカバーするランディングページを作成することが効果的だ

    第8回 User Landing through FUser Landing through F.A.Q. Contents「FAQコンテンツを使ったLPO」
  • 第12回 個別のブログ記事とウェブページのテンプレート完成させる | gihyo.jp

    今日は、前回途中だった個別のブログ記事を完成させ、引き続きウェブページのテンプレートを仕上げます。 個別ブログ記事テンプレートのローカルナビゲーションなどを完成させる くれま先輩:さてさて、ほげ山くん。個別のブログ記事テンプレートのうち、前回作成してなかったものはなんだった? ほげ山くん:えーっと、<div id="secondry">の中身がまだですよね? くれま先輩:そうだね。じゃ、早速着手していきますか。まずは、ブログ記事テンプレートの編集画面を開いて、バナー用のウィジェットを出力するMTタグを書こうね。どんな風に書くか覚えてるかな? ほげ山くん:覚えてますよー!これですね。 <div id="secondry">の一番最初に入れるMTタグ <mt:WidgetManager name="バナー" /> くれま先輩:うんO.K.!じゃ、次ね!その下のローカルナビゲーション部分なんだけ

    第12回 個別のブログ記事とウェブページのテンプレート完成させる | gihyo.jp
    miracle1998
    miracle1998 2009/02/27
    対話形式で分かりやすい!ヽ(^~^)ノ 本にならないかな~
  • 第1回 Flash+MTでできること | gihyo.jp

    はじめに はじめして、トゴル・カンパニーのNORI(伊藤のりゆき)といいます。 Flashを使って10年。最近のFlashは、ActionScript3の登場で、かなり高度なプログラムが可能になりました。しかし、Flashユーザにとって1つの悩みは、どのように更新しやすいWebを作るかではないでしょうか? もちろん、バックエンドにDB関係のエンジニアがいて、DBとの接続が前提の中規模以上のWebであれば、そんな心配は無用でしょう。しかし、規模がそれほど大きくない場合、どうすれば良いでしょうか。 解決策として、更新情報を書いた外部テキスト(Flashから見て外にあるため外部と呼びます)を、FTPソフトでアップロードし、Flashで読み込み表示するという方法がありました。しかし、肝心の外部テキストの更新すら戸惑う場面がありました。しかし、Movable Type(以下、MT)の登場によって、外

    第1回 Flash+MTでできること | gihyo.jp
  • 第2回 リッチテキストエディタのご利用は計画的に | gihyo.jp

    こんにちは。#fc0やまもといずみです。 さて、2回目の今回は、Movable Type(以下、MT)のリッチテキストエディタを使うときに知っておくと便利なことを2つ紹介します。『⁠これからはじめるMovable Typeの』を手に初めてMTを触る方には少しハイレベルかもしれません。ですが、今後MTを使ってWebサイトを構築したり運営したりするときに、活用してもらえたらと思っています。 OSやブラウザによって出力が違うんですよ MT4から、ブログ記事やウェブページの記事入力画面(⁠「⁠文」と「続き⁠」⁠)などにリッチテキストエディタ(WYSIWYG)が導入されました。WORDを操作しているような感覚で、文字を入力したり、文字装飾などができるので、HTMLタグを知らない方にも、自分のイメージに近い記事作成をすることが可能になりました。特に画像挿入で、どの画像が挿入されたのかを「目で確認で

    第2回 リッチテキストエディタのご利用は計画的に | gihyo.jp
    miracle1998
    miracle1998 2009/02/26
    リッチテキストエディタで出力されるHTMLタグが,ブラウザによって違う・・のかorz
  • 第2回 MTタグの基本的な書き方・各テンプレートの説明 | gihyo.jp

    連載第2回目の今回は、各テンプレートの説明とMTタグの基的な書き方をおさらいしたうえで、Movable Type4.1以降で格的に使えるようになった変数を使う練習をしてみましょう。テンプレートやMTタグ関連の用語が3.xから変わったところがあるので、そのあたりもフォローしていきます。 テンプレートの種類をおさらいしよう ほげ山くん:4.xって、3.xのときと比べて、テンプレートの数とか名前がいろいろ変わってますよね。そのあたりでまず戸惑ったので、説明してもらえないでしょうか? くれま先輩:はいはい。では、さらっと説明するね!2008年6月25日現在入手できる4.2RC2のテンプレート管理画面だと、1ページでほとんどのテンプレートを見渡すことができるので、これを見ていくことにしようか。4.1ではテンプレートの種類ごとに一覧ページが分かれているけれど、内容は同じだよ。 図1 Movable

    第2回 MTタグの基本的な書き方・各テンプレートの説明 | gihyo.jp
  • 1