タグ

webとHTMLに関するkomeshogunのブックマーク (11)

  • 「娘に情報が古いと指摘されます」 老舗サイト「とほほのWWW入門」の管理人ってどんな人? | HRナビ by リクルート

    90年代後半から2000年代にウェブ制作を経験した者なら『とほほのWWW入門』と聞いて、ピンと来ない人はいないだろう。同サイトは、HTMLJavaScriptRubyPythonなどの基礎知識が学べる、ウェブ制作初心者にとってはバイブルのような、とてもありがたい存在だ。サイトが開設されたのは1996年。国内でインターネットが普及し始めた初期からある老舗サイトで、お世話になった人も多いはずだ。 2016年10月を最後に更新がされていないようだが、それでも20年間コンテンツを出し続けるのは、かなり大変なことだったのではないか。同サイトの管理人・杜甫々(とほほ)さんは、いったいどのような人物なのか。サイトを開設したきっかけやインターネット初期の空気感などについて、話を聞いた。 「とほほのWWW入門」管理人・杜甫々さんとは? ――今回は取材に応じていただき、ありがとうございます。杜甫々さんは

    「娘に情報が古いと指摘されます」 老舗サイト「とほほのWWW入門」の管理人ってどんな人? | HRナビ by リクルート
  • 意外と知られていないHTMLの基本の話

    私はWeb制作が初めての方向け講座だけでなく現役の制作者の方向けに様々なWeb講座をしていますが、現役のWeb制作者の方でもHTMLに関して意外と知られていないんだなと思うことがいくつかあります。 特に、HTML5以前の古いHTMLの使い方のまま覚えている方が多いように思われますので、この記事ではそれを中心に取り上げてみました。 なお、この記事はHTML 5.1およびWHATWG HTML Standardの仕様書を参考に書いています。 width=”100%” のように数値以外の文字列を “” に入れるのはNG たとえばimg要素などで、ブラウザの幅いっぱいに画像を表示したいという場合、昔はimg要素に width=”100%” のような属性をつけることがありましたが、HTML5からはwidthなどの属性値に数値以外を含めることができなくなっています。(つまり%などの単位を含めることがで

    意外と知られていないHTMLの基本の話
  • Chrome デベロッパーツールの使い方: プロのように華麗に使いこなすための20のテクニック

    Chromeのデベロッパーツールをプロのように使いこなすための20のテクニックを紹介します。 いやー、当にデベロッパーツールは機能が豊富ですね。 How to use Chrome DevTools like a Pro 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 HTMLの要素をクイック編集 指定した行番号に移動 すべての子ノードを展開 デベロッパーツールの位置を変える CSSのセレクタによるDOM検索 Material Designとカスタムカラーパレット 複数のカーソル 画像をData URIとしてコピー 疑似クラスのトリガー 複数のコラムをドラッグで選択 「$0」で現在の要素を手に入れる 要素の表示 「Event Listeners」の表示 イージングのプレビュー Media Queriesの検証 ネットワークをフィルム

    Chrome デベロッパーツールの使い方: プロのように華麗に使いこなすための20のテクニック
  • 初心者のためのWeb標準技術

    2015年8月27日に行われたHTML5ビギナーズ勉強会の「初心者のためのWeb標準技術」のセッションの資料です。

    初心者のためのWeb標準技術
  • HTML5オールスターズ勉強会 資料まとめ - dackdive's blog

    6/13 (土) は htmlday ということで、こちらのイベントに参加してきました。 HTML5オールスターズ勉強会|IT勉強会ならTECH PLAY[テックプレイ] 第58回 HTML5とか勉強会 - HTML5最新情報@Google I/O, de:code 2015|IT勉強会ならTECH PLAY[テックプレイ] とりあえず今の時点で公開されてるスライド資料やらキーワードやらをまとめ。 (随時更新します) Twitter でのハッシュタグは #dotshtml5 , #htmlday , #html5j などなど。 (2015/06/15追記) 若狭さんの『ハードウェアこわい』、川田さんの『The next generation mobile web!』 のスライドを追加しました。 (2015/06/19追記) 『Edge だけじゃない! Build 2015 で発表されたそれ

    HTML5オールスターズ勉強会 資料まとめ - dackdive's blog
  • パララックスエフェクトの基本

    jQueryをメインにHTML5やCSS3を使ったリッチな表現のためのテクニックを紹介。まずはパララックスエフェクトの基から。 Webサイトの55%で利用されているjQuery はじめまして。クラスメソッドのフロントエンドエンジニア、山田です。「jQuery×HTMLCSS3を真面目に勉強」という連載をスタートします。 2005年2月にGoogle mapsが登場して以来、Web開発者の間でJavaScriptの株は上昇の一途をたどっています。その勢いはとどまることを知らず、リッチなWebコンテンツを作るには、Flashをはじめとしたプラグインに頼るという、それまでの常識をすっかり覆してしまいました。 さらに、HTML5やCSS3も登場し、各ベンダのブラウザがWeb標準の仕様に合わせて実装の足並みを揃え始めるなど、プラグインに頼らずともリッチなUIのWebコンテンツを少ない手間で作れ

    パララックスエフェクトの基本
  • CSSだけで簡単に吹き出しを作成する方法4つ!

    こんにちは、橋です。 今日はCSSだけでお手軽に吹き出しを作る方法をご紹介したいと思います。 今回ご紹介するサンプルは4つ 一般的な三角の吹き出し 一般的な三角の吹き出し(ボーダー付き) ぽわわーんとした吹き出し 丸い(曲線の)吹き出し 4つのサンプルの実行結果は、ここで確認できます。 IE9以上とIE以外のブラウザであればちゃんと表示されるかと思います。 IE8以下はborder-radiusが使用出来ないため、サンプル3とサンプル4がちゃんと表示されません。 それでは1つ1つ見て行きましょう。 1.一般的な三角の吹き出し まずはソースから。 <!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="UTF-8"> <style type="text/css"> * { box-sizing: border-box; } .wrapp

    CSSだけで簡単に吹き出しを作成する方法4つ!
  • HTML5+CSS3は「メニューの作り方」を覚えるだけ!

    HTML5+CSS3は「メニューの作り方」を覚えるだけ!:にわかデザイン(1)(1/3 ページ) Photoshopなどの画像処理ソフトを使わず、CSSでできる表現の幅が広がっています。にわかデザイナーになれる、簡単Tipsをお伝えします。 Web製作の現場では、予算の都合上Webサイトのデザインをデザイナーに発注できず、エンジニア自身が担当しなければならないことがままあります。昨今は「Twitter Bootstrap」などのCSSフレームワークを使って、そんな状況に対応している方も多いと思います。確かに、Twitter Bootstrapはリッチなデザインや機能を持つパーツがそろっていて、素早くレイアウトを組み上げるには便利です。しかし、そのためには独自の指定方法やお作法をそこそこ知っておかなければならないのも事実です。 であるならば……、CSS自体を覚えてしまうというのも1つの手では

    HTML5+CSS3は「メニューの作り方」を覚えるだけ!
  • 2014年にはWebアプリの「オフラインファースト」が流行するのではないか?

    先週2月18日に都内で開催された「第36回HTML5とか勉強会」。テーマは「2013年、Web開発の進化を探る」でした。 そこで「2014年頃にはネットに接続しなくても使えるオフラインWebアプリケーションが流行するのではないか」と話したのが、html5j.orgの世話人でもある白石俊平氏。白石氏が解説する「オフラインファースト」は、これからのWebアプリケーションのひとつの方向性が示されていると思われます。 その講演の内容をダイジェストで紹介します。 オフラインファーストの思想と実践 html5j.org世話人の白石俊平氏。 オフラインファーストとは、オフラインを最初に考えてWebサイトを、Webアプリケーションを作ろうという思想のことです。 で、オフラインファーストって、モバイルファーストという言葉に似ています。モバイルファーストというのは2010年に登場した言葉で、これは去年、とにか

    2014年にはWebアプリの「オフラインファースト」が流行するのではないか?
  • ログアウト機能の目的と実現方法

    このエントリでは、Webアプリケーションにおけるログアウト機能に関連して、その目的と実現方法について説明します。 議論の前提 このエントリでは、認証方式として、いわゆるフォーム認証を前提としています。フォーム認証は俗な言い方かもしれませんが、HTMLフォームでIDとパスワードの入力フォームを作成し、その入力値をアプリケーション側で検証する認証方式のことです。IDとパスワードの入力は最初の1回ですませたいため、通常はCookieを用いて認証状態を保持します。ログアウト機能とは、保持された認証状態を破棄して、認証していない状態に戻すことです。 Cookieを用いた認証状態保持 前述のように、認証状態の保持にはCookieを用いることが一般的ですが、Cookieに auth=1 とか、userid=tokumaru などのように、ログイン状態を「そのまま」Cookieに保持すると脆弱性になります

    ログアウト機能の目的と実現方法
  • 誠 Biz.ID:3分LifeHacking:マルチディスプレイを快適にする無料ソフト7選

    液晶ディスプレイの低価格化や、USBディスプレイアダプターの普及もあり、数年前に比べるとぐっと導入しやすくなったマルチディスプレイ。デスクトップの表示面積が広がり、複数のウィンドウを並べて表示できることから作業の効率化に大いに貢献する。マルチディスプレイなしでは日々の作業がおぼつかないという人も少なくないだろう。 今回は、そんなマルチディスプレイ環境下での作業効率をアップしてくれるWindows用のフリーソフト7をまとめて紹介する。マルチディスプレイに関連したソフトには「Multi Monitor Extension」のような統合タイプのユーティリティも多いが、今回は単機能のタイプに絞り、他とは違う特徴を持った機能を中心にお送りする。

    誠 Biz.ID:3分LifeHacking:マルチディスプレイを快適にする無料ソフト7選
  • 1