Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
My HTML Dark Past(2017/12/08 社内LT大会)
Search
Yoko TAMADA
December 14, 2017
0
140
My HTML Dark Past(2017/12/08 社内LT大会)
Yoko TAMADA
December 14, 2017
Tweet
Share
More Decks by Yoko TAMADA
See All by Yoko TAMADA
Misskeyのはなし(2023/03/17 FFLT#56)
tmd45
0
140
手帳と文房具(2022/11/25 FFLT#52)
tmd45
0
31
2022/4/8 FFLT#45
tmd45
0
470
認知のはなし(2020/08/28 FFTT#407)
tmd45
1
380
認証認可の情報の追い方みたいな(2020/01/10 FFTT#381)
tmd45
1
1.9k
『OAuth 2.0 の代表的な利用パターンを仕様から理解しよう』を読んだ話(2019/04/12 FFTT#352)
tmd45
0
1.3k
2018/10/26 FFLT#11
tmd45
4
370
Markdown と学ぶ HTML 基礎 第二版(2018/10/12 FFTT#331)
tmd45
1
1.6k
Markdown と学ぶ HTML 基礎(2018/8/31 e-Navigator 勉強会#4)
tmd45
0
720
Featured
See All Featured
Optimizing for Happiness
mojombo
376
70k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
27
4.3k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5k
Art, The Web, and Tiny UX
lynnandtonic
297
20k
How to train your dragon (web standard)
notwaldorf
88
5.7k
The Invisible Side of Design
smashingmag
298
50k
Bash Introduction
62gerente
608
210k
Unsuck your backbone
ammeep
668
57k
A designer walks into a library…
pauljervisheath
204
24k
How to Ace a Technical Interview
jacobian
276
23k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Scaling GitHub
holman
458
140k
Transcript
× ❏ _ My HTML Dark Past Yoko TAMADA @tmd45
2017/12/08 feedforce Inc. Lightning Talks #2
× ❏ _ ようこそ!貴方は 1000 人目の来訪者です♪ • ホームページを作るのが好きでした(いまも好きです) • HTML
や Markdown の話をしようかと思ったけど 5 分で終わる気がしない • 老害なので古い話しかできない • もしかして: 20 年前(そこまでではない)(震え声) • スライドを作るためにいろいろ漁ってたらつらくなってきた • 生暖かい目で見守ってください(爆死) 2
× ❏ _ キリ番踏み逃げ禁止!!!!! • 見てて具合が悪くなったら無理せずブラウザバック(休憩)してください 3
× ❏ _ はじめてのホームページ 4 • 小学校6年生(1999 年頃) • お昼の校内放送で流れたアニソンがきっかけでできた友達と2人で作った
• 我が家のパソコンは Windows 98、インターネットなし • 友達の家にはインターネット(ダイヤルアップ)があった • 友達の家にあったスキャナーで取り込んでもらった手書きイラストを掲載 • 友達がおもに作ったホームページ(メモ帳で HTML 手打ち) • データのやりとりはフロッピーディスク
× ❏ _ はじめてのホームページ 5 • Yahoo! GeoCities • 無料スペース
4MB(広告表示あり) • 背景画像、動くアイコン、などなど謎のこだ わり ◦ 容量も回線も厳しいのになんてことを • やたら派手 • HTML 4.0、フレーム利用(ハイカラ)
× ❏ _ 6
× ❏ _ 自分だけのホームページ 7 • 中学校1年生。パソコン部に入部 • 放課後、学校のパソコンでインターネットし放題 •
自分で HTML を書いてホームページを作るようになる • 自宅にはまだインターネットは無い ◦ HTML はやっぱりフロッピーディスクに保存して学校に持っていった
× ❏ _ 自分だけのホームページ 8 • ダーク()な雰囲気が素敵なサイトに通っていた ◦ 黒背景に #990000
の文字 • そのサイトで使われている素材やさんの素材(背景画像やアイコン)を使ってホー ムページを作り始める • HTML は他のページのソースコードをコピペして使う ◦ 見出しタグを文字の大きさ変えるために使ったりしていた ◦ フレームの使い方とか、テーブルの使い方とか、何もかも「他のページを見て真似する」がすべて だった
× ❏ _ 9
× ❏ _ 事件1 はじめての凸られ 10 • 好きだったサイトにあまりにも似すぎてしまった • そのサイトのファンのひとからメールで「パクってんじゃねーぞ」「お前がやってるの
は犯罪だ」と至極丁寧なお叱りを受ける ◦ ソースコードもパーツごととはいえ、実際にコピペしていたわけだし間違いでもない ◦ けどお前そのサイトの管理人でもなんでもねーじゃん!(;´Д`) と今なら思う • ビビってサイト閉鎖 ◦ 当時はこわくてこわくて泣いたりしました
× ❏ _ 事件2 はじめてのダイヤルQ2 11 • 中学2年?3年?自宅にもインターネットが開通!(ダイヤルアップ) • 部活でチャットが流行っていた延長で、ちょっとアレなチャットも含まれているポータ
ルサイトに迷い込む ◦ Yahoo! 検索より excite 検索を愛用してたのも敗因な気がする • なんかダイアログでたけどよくわからんポチーーーーっ( • うわなんかエロいの出たキモイ(お年頃) • 後日、高額のインターネット料金請求が来て親に怒られる ◦ でも親もよくわかってないので「あかんで」って感じで終わった ◦ 実際いくらだったか覚えてないけど、3分300円とかだったらしいネ
× ❏ _ デザイン?にこだわりだす 12 • 中学~高専時代。オタク女子(やんわり)真っ盛り • やたらフォントサイズが小さい(9px, 10px)
• 背景画像の右下固定表示(高度な技術) • テーブルを使った凝った枠表示(高度な(ry • エントランスページから ENTER リンクを踏むと JavaScript で別窓が開く • iframe を使ったコンテンツ表示 • 番外編:いかに広告を(規約違反にならない程度に)見せないようにするか
× ❏ _ 13
× ❏ _ 14
× ❏ _ CGI(チャット、掲示板、などなど) 15 • レンタル CGI ではなく、自分で設定・カスタマイズしたくなった ◦
カスタマイズといっても見た目だけ ◦ 凝った例でいうと発言者のアイコン表示のカスタマイズとかやってた ◦ これも設置例などを見てコピペとか勘とかでやっていた • CGI 設置可能 ホームページレンタルスペースの存在 • お絵かき掲示板まで設置したこともあった ◦ しぃチャットとかご存知ですk…まだ現存しているだと…?! ◦ http://hp.vector.co.jp/authors/VA016309/ • プログラミングだと思って触ってこなかったのが残念…
× ❏ _ 16 ※画像は http://www.kent-web.com/ より
× ❏ _ 17 ※画像は http://www.kent-web.com/ より
× ❏ _ ~現在 18 • HTML 4.01 の仕様理解(概ね) •
CSS の理解(ry • JavaScript の理解( • PHP によるサイト制作(趣味)(もうやってません) • WordPress • CSS Framework • Rails
× ❏ _ 19
× ❏ _ 20
× ❏ _ 趣味で書く HTMLは たのしい 21 終 ────── ⓣⓜⓓ