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
130
手帳と文房具(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
710
Featured
See All Featured
We Have a Design System, Now What?
morganepeng
50
7.2k
A better future with KSS
kneath
238
17k
Faster Mobile Websites
deanohume
304
30k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
250
21k
The Language of Interfaces
destraynor
154
24k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5k
Thoughts on Productivity
jonyablonski
67
4.3k
4 Signs Your Business is Dying
shpigford
180
21k
Docker and Python
trallard
40
3.1k
The Art of Programming - Codeland 2020
erikaheidi
51
13k
Building Flexible Design Systems
yeseniaperezcruz
327
38k
Why You Should Never Use an ORM
jnunemaker
PRO
53
9k
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 終 ────── ⓣⓜⓓ