SlideShare a Scribd company logo
1 of 9
スラスラわかる
未経験からのHTMLとCSS
狩野祐東

SOLIDPANDA-DESIGN
かのう すけはる

こんにちは、狩野祐東です。
UI/UXデザイナー ¦ エンジニア ¦ 執筆家

http://www.solidpanda.com/
@deinonychus947

SOLIDPANDA-DESIGN
•  サンプルファイルをダウンロード
•  テキストエディタをインストール
TeraPad (Windows)
http://www5f.biglobe.ne.jp/ t-susumu/library/tpad.html

Mi (Mac)
http://www.mimikaki.net

•  拡張子が表示されるように

SOLIDPANDA-DESIGN
SOLIDPANDA-DESIGN
SOLIDPANDA-DESIGN
SOLIDPANDA-DESIGN
SOLIDPANDA-DESIGN
SOLIDPANDA-DESIGN
サイトを公開するには

Cyberduck	
サーバー登録・契約

Filezilla	

FTPクライアント

SOLIDPANDA-DESIGN

More Related Content

Viewers also liked

これからはアジアで転職!~新興国でキャリアを築くという選択~
これからはアジアで転職!~新興国でキャリアを築くという選択~これからはアジアで転職!~新興国でキャリアを築くという選択~
これからはアジアで転職!~新興国でキャリアを築くという選択~schoowebcampus
 
【Schoo web campus】seo対策を考える前に考えるべきこと
【Schoo web campus】seo対策を考える前に考えるべきこと【Schoo web campus】seo対策を考える前に考えるべきこと
【Schoo web campus】seo対策を考える前に考えるべきことschoowebcampus
 
起業家や投資家に知ってほしい、M&Aのポイント 先生:五嶋 一人・高宮 慎一
起業家や投資家に知ってほしい、M&Aのポイント 先生:五嶋 一人・高宮 慎一起業家や投資家に知ってほしい、M&Aのポイント 先生:五嶋 一人・高宮 慎一
起業家や投資家に知ってほしい、M&Aのポイント 先生:五嶋 一人・高宮 慎一schoowebcampus
 
目標達成のための、行動を振り返る技術①「経験から学ぶ方法」 先生:永谷 研一
目標達成のための、行動を振り返る技術①「経験から学ぶ方法」 先生:永谷 研一目標達成のための、行動を振り返る技術①「経験から学ぶ方法」 先生:永谷 研一
目標達成のための、行動を振り返る技術①「経験から学ぶ方法」 先生:永谷 研一schoowebcampus
 
目標達成のための、人から吸収する技術②「共感と問いかけ」 先生:永谷 研一
目標達成のための、人から吸収する技術②「共感と問いかけ」 先生:永谷 研一目標達成のための、人から吸収する技術②「共感と問いかけ」 先生:永谷 研一
目標達成のための、人から吸収する技術②「共感と問いかけ」 先生:永谷 研一schoowebcampus
 
【東京大学i.school 人間中心イノベーション概論】3限目:理解② 技術・事例調査の目的と方法
【東京大学i.school 人間中心イノベーション概論】3限目:理解② 技術・事例調査の目的と方法【東京大学i.school 人間中心イノベーション概論】3限目:理解② 技術・事例調査の目的と方法
【東京大学i.school 人間中心イノベーション概論】3限目:理解② 技術・事例調査の目的と方法schoowebcampus
 
【Schoo web campus】アイデアをビジネスにするために知っておくべきこと
【Schoo web campus】アイデアをビジネスにするために知っておくべきこと【Schoo web campus】アイデアをビジネスにするために知っておくべきこと
【Schoo web campus】アイデアをビジネスにするために知っておくべきことschoowebcampus
 
ネットショップの集客をもっと効率化させる!BASEも使っている無料で使える3つのサービス(第10回)
ネットショップの集客をもっと効率化させる!BASEも使っている無料で使える3つのサービス(第10回)ネットショップの集客をもっと効率化させる!BASEも使っている無料で使える3つのサービス(第10回)
ネットショップの集客をもっと効率化させる!BASEも使っている無料で使える3つのサービス(第10回)schoowebcampus
 
若手議員に聞く、地盤看板なしに政治を変える方法【Synapse Channel】
若手議員に聞く、地盤看板なしに政治を変える方法【Synapse Channel】若手議員に聞く、地盤看板なしに政治を変える方法【Synapse Channel】
若手議員に聞く、地盤看板なしに政治を変える方法【Synapse Channel】schoowebcampus
 
Hz. ismail'in misyonu ve kurban psikologisi
Hz. ismail'in misyonu ve kurban psikologisiHz. ismail'in misyonu ve kurban psikologisi
Hz. ismail'in misyonu ve kurban psikologisiKürsü hitabeleri
 
販促担当のあなたがやらなければいけないオムニチャネル化とは
販促担当のあなたがやらなければいけないオムニチャネル化とは販促担当のあなたがやらなければいけないオムニチャネル化とは
販促担当のあなたがやらなければいけないオムニチャネル化とはschoowebcampus
 
初心者でも安心!ありがちトラブルに学ぶ、イラスト・デザイン発注受注のコツ
初心者でも安心!ありがちトラブルに学ぶ、イラスト・デザイン発注受注のコツ初心者でも安心!ありがちトラブルに学ぶ、イラスト・デザイン発注受注のコツ
初心者でも安心!ありがちトラブルに学ぶ、イラスト・デザイン発注受注のコツschoowebcampus
 
セルフパブリッシング完全ガイド〜電子書籍の作り方 先生:大西 隆幸
セルフパブリッシング完全ガイド〜電子書籍の作り方 先生:大西 隆幸セルフパブリッシング完全ガイド〜電子書籍の作り方 先生:大西 隆幸
セルフパブリッシング完全ガイド〜電子書籍の作り方 先生:大西 隆幸schoowebcampus
 
Schoo web campus 新サービスはいかにして立ち上がるのか?
Schoo web campus 新サービスはいかにして立ち上がるのか?Schoo web campus 新サービスはいかにして立ち上がるのか?
Schoo web campus 新サービスはいかにして立ち上がるのか?schoowebcampus
 
女性Mrが知っておくべき、次のキャリアに進む3つのヒント
女性Mrが知っておくべき、次のキャリアに進む3つのヒント女性Mrが知っておくべき、次のキャリアに進む3つのヒント
女性Mrが知っておくべき、次のキャリアに進む3つのヒントschoowebcampus
 
Coaching presentation
Coaching presentationCoaching presentation
Coaching presentationmlcervone
 
jQueryプラグインを設置するための環境構築 先生:田中 晶子
jQueryプラグインを設置するための環境構築 先生:田中 晶子jQueryプラグインを設置するための環境構築 先生:田中 晶子
jQueryプラグインを設置するための環境構築 先生:田中 晶子schoowebcampus
 
「落語」超入門--松竹芸能の噺家に、落語の楽しみ方を教えてもらおう(2限目) 先生:桂 小春團治・小川 恵理子
「落語」超入門--松竹芸能の噺家に、落語の楽しみ方を教えてもらおう(2限目) 先生:桂 小春團治・小川 恵理子「落語」超入門--松竹芸能の噺家に、落語の楽しみ方を教えてもらおう(2限目) 先生:桂 小春團治・小川 恵理子
「落語」超入門--松竹芸能の噺家に、落語の楽しみ方を教えてもらおう(2限目) 先生:桂 小春團治・小川 恵理子schoowebcampus
 

Viewers also liked (20)

これからはアジアで転職!~新興国でキャリアを築くという選択~
これからはアジアで転職!~新興国でキャリアを築くという選択~これからはアジアで転職!~新興国でキャリアを築くという選択~
これからはアジアで転職!~新興国でキャリアを築くという選択~
 
【Schoo web campus】seo対策を考える前に考えるべきこと
【Schoo web campus】seo対策を考える前に考えるべきこと【Schoo web campus】seo対策を考える前に考えるべきこと
【Schoo web campus】seo対策を考える前に考えるべきこと
 
起業家や投資家に知ってほしい、M&Aのポイント 先生:五嶋 一人・高宮 慎一
起業家や投資家に知ってほしい、M&Aのポイント 先生:五嶋 一人・高宮 慎一起業家や投資家に知ってほしい、M&Aのポイント 先生:五嶋 一人・高宮 慎一
起業家や投資家に知ってほしい、M&Aのポイント 先生:五嶋 一人・高宮 慎一
 
目標達成のための、行動を振り返る技術①「経験から学ぶ方法」 先生:永谷 研一
目標達成のための、行動を振り返る技術①「経験から学ぶ方法」 先生:永谷 研一目標達成のための、行動を振り返る技術①「経験から学ぶ方法」 先生:永谷 研一
目標達成のための、行動を振り返る技術①「経験から学ぶ方法」 先生:永谷 研一
 
目標達成のための、人から吸収する技術②「共感と問いかけ」 先生:永谷 研一
目標達成のための、人から吸収する技術②「共感と問いかけ」 先生:永谷 研一目標達成のための、人から吸収する技術②「共感と問いかけ」 先生:永谷 研一
目標達成のための、人から吸収する技術②「共感と問いかけ」 先生:永谷 研一
 
haggar cv
haggar cvhaggar cv
haggar cv
 
【東京大学i.school 人間中心イノベーション概論】3限目:理解② 技術・事例調査の目的と方法
【東京大学i.school 人間中心イノベーション概論】3限目:理解② 技術・事例調査の目的と方法【東京大学i.school 人間中心イノベーション概論】3限目:理解② 技術・事例調査の目的と方法
【東京大学i.school 人間中心イノベーション概論】3限目:理解② 技術・事例調査の目的と方法
 
【Schoo web campus】アイデアをビジネスにするために知っておくべきこと
【Schoo web campus】アイデアをビジネスにするために知っておくべきこと【Schoo web campus】アイデアをビジネスにするために知っておくべきこと
【Schoo web campus】アイデアをビジネスにするために知っておくべきこと
 
ネットショップの集客をもっと効率化させる!BASEも使っている無料で使える3つのサービス(第10回)
ネットショップの集客をもっと効率化させる!BASEも使っている無料で使える3つのサービス(第10回)ネットショップの集客をもっと効率化させる!BASEも使っている無料で使える3つのサービス(第10回)
ネットショップの集客をもっと効率化させる!BASEも使っている無料で使える3つのサービス(第10回)
 
若手議員に聞く、地盤看板なしに政治を変える方法【Synapse Channel】
若手議員に聞く、地盤看板なしに政治を変える方法【Synapse Channel】若手議員に聞く、地盤看板なしに政治を変える方法【Synapse Channel】
若手議員に聞く、地盤看板なしに政治を変える方法【Synapse Channel】
 
Hz. ismail'in misyonu ve kurban psikologisi
Hz. ismail'in misyonu ve kurban psikologisiHz. ismail'in misyonu ve kurban psikologisi
Hz. ismail'in misyonu ve kurban psikologisi
 
販促担当のあなたがやらなければいけないオムニチャネル化とは
販促担当のあなたがやらなければいけないオムニチャネル化とは販促担当のあなたがやらなければいけないオムニチャネル化とは
販促担当のあなたがやらなければいけないオムニチャネル化とは
 
What is NEN E Club!
What is NEN E Club!What is NEN E Club!
What is NEN E Club!
 
初心者でも安心!ありがちトラブルに学ぶ、イラスト・デザイン発注受注のコツ
初心者でも安心!ありがちトラブルに学ぶ、イラスト・デザイン発注受注のコツ初心者でも安心!ありがちトラブルに学ぶ、イラスト・デザイン発注受注のコツ
初心者でも安心!ありがちトラブルに学ぶ、イラスト・デザイン発注受注のコツ
 
セルフパブリッシング完全ガイド〜電子書籍の作り方 先生:大西 隆幸
セルフパブリッシング完全ガイド〜電子書籍の作り方 先生:大西 隆幸セルフパブリッシング完全ガイド〜電子書籍の作り方 先生:大西 隆幸
セルフパブリッシング完全ガイド〜電子書籍の作り方 先生:大西 隆幸
 
Schoo web campus 新サービスはいかにして立ち上がるのか?
Schoo web campus 新サービスはいかにして立ち上がるのか?Schoo web campus 新サービスはいかにして立ち上がるのか?
Schoo web campus 新サービスはいかにして立ち上がるのか?
 
女性Mrが知っておくべき、次のキャリアに進む3つのヒント
女性Mrが知っておくべき、次のキャリアに進む3つのヒント女性Mrが知っておくべき、次のキャリアに進む3つのヒント
女性Mrが知っておくべき、次のキャリアに進む3つのヒント
 
Coaching presentation
Coaching presentationCoaching presentation
Coaching presentation
 
jQueryプラグインを設置するための環境構築 先生:田中 晶子
jQueryプラグインを設置するための環境構築 先生:田中 晶子jQueryプラグインを設置するための環境構築 先生:田中 晶子
jQueryプラグインを設置するための環境構築 先生:田中 晶子
 
「落語」超入門--松竹芸能の噺家に、落語の楽しみ方を教えてもらおう(2限目) 先生:桂 小春團治・小川 恵理子
「落語」超入門--松竹芸能の噺家に、落語の楽しみ方を教えてもらおう(2限目) 先生:桂 小春團治・小川 恵理子「落語」超入門--松竹芸能の噺家に、落語の楽しみ方を教えてもらおう(2限目) 先生:桂 小春團治・小川 恵理子
「落語」超入門--松竹芸能の噺家に、落語の楽しみ方を教えてもらおう(2限目) 先生:桂 小春團治・小川 恵理子
 

More from schoowebcampus

ビジネスプラン概要資料 New
ビジネスプラン概要資料 Newビジネスプラン概要資料 New
ビジネスプラン概要資料 Newschoowebcampus
 
schoo法人利用-ビジネスプランのご案内
schoo法人利用-ビジネスプランのご案内schoo法人利用-ビジネスプランのご案内
schoo法人利用-ビジネスプランのご案内schoowebcampus
 
PHP実践 ~外部APIを使って情報を取得する~
PHP実践 ~外部APIを使って情報を取得する~PHP実践 ~外部APIを使って情報を取得する~
PHP実践 ~外部APIを使って情報を取得する~schoowebcampus
 
i.school, The University of Tokyo "Methods of concept designing and user surv...
i.school, The University of Tokyo "Methods of concept designing and user surv...i.school, The University of Tokyo "Methods of concept designing and user surv...
i.school, The University of Tokyo "Methods of concept designing and user surv...schoowebcampus
 
i.school, The University of Tokyo "Divergence, convergence, and expression of...
i.school, The University of Tokyo "Divergence, convergence, and expression of...i.school, The University of Tokyo "Divergence, convergence, and expression of...
i.school, The University of Tokyo "Divergence, convergence, and expression of...schoowebcampus
 
i.school, The University of Tokyo "The purposes and methods of technological ...
i.school, The University of Tokyo "The purposes and methods of technological ...i.school, The University of Tokyo "The purposes and methods of technological ...
i.school, The University of Tokyo "The purposes and methods of technological ...schoowebcampus
 
i.school, The University of Tokyo "The purposes and methods of interviews and...
i.school, The University of Tokyo "The purposes and methods of interviews and...i.school, The University of Tokyo "The purposes and methods of interviews and...
i.school, The University of Tokyo "The purposes and methods of interviews and...schoowebcampus
 
i.school, The University of Tokyo "Foundation and methodology in creating inn...
i.school, The University of Tokyo "Foundation and methodology in creating inn...i.school, The University of Tokyo "Foundation and methodology in creating inn...
i.school, The University of Tokyo "Foundation and methodology in creating inn...schoowebcampus
 
ポートフォリオ公開後のマーケティング法
ポートフォリオ公開後のマーケティング法ポートフォリオ公開後のマーケティング法
ポートフォリオ公開後のマーケティング法schoowebcampus
 
授業資料(スクー)
授業資料(スクー)授業資料(スクー)
授業資料(スクー)schoowebcampus
 
個人事業主・フリーランスのための確定申告 ~白色申告編~
個人事業主・フリーランスのための確定申告 ~白色申告編~個人事業主・フリーランスのための確定申告 ~白色申告編~
個人事業主・フリーランスのための確定申告 ~白色申告編~schoowebcampus
 
初心者でもUnityアプリに広告実装!広告も簡単に導入できる!儲かるアプリ講座【appC cloud school】Unityシリーズ vol.1
初心者でもUnityアプリに広告実装!広告も簡単に導入できる!儲かるアプリ講座【appC cloud school】Unityシリーズ vol.1初心者でもUnityアプリに広告実装!広告も簡単に導入できる!儲かるアプリ講座【appC cloud school】Unityシリーズ vol.1
初心者でもUnityアプリに広告実装!広告も簡単に導入できる!儲かるアプリ講座【appC cloud school】Unityシリーズ vol.1schoowebcampus
 
少ない資金でシステム開発を委託する方法(補助金と類似事例の有無)
少ない資金でシステム開発を委託する方法(補助金と類似事例の有無)少ない資金でシステム開発を委託する方法(補助金と類似事例の有無)
少ない資金でシステム開発を委託する方法(補助金と類似事例の有無)schoowebcampus
 
補助金で合格しやすい事業計画の作り方(主に創業補助金、ものづくり補助金)
補助金で合格しやすい事業計画の作り方(主に創業補助金、ものづくり補助金)補助金で合格しやすい事業計画の作り方(主に創業補助金、ものづくり補助金)
補助金で合格しやすい事業計画の作り方(主に創業補助金、ものづくり補助金)schoowebcampus
 
アプリ開発したい人必見!Swiftを使ってiPhoneアプリに広告実装!【appC cloud school】
アプリ開発したい人必見!Swiftを使ってiPhoneアプリに広告実装!【appC cloud school】アプリ開発したい人必見!Swiftを使ってiPhoneアプリに広告実装!【appC cloud school】
アプリ開発したい人必見!Swiftを使ってiPhoneアプリに広告実装!【appC cloud school】schoowebcampus
 
快適にWebデザインするためのフリーランスの仕事の流れ【プロジェクトマネジメント編】夏本 健司
快適にWebデザインするためのフリーランスの仕事の流れ【プロジェクトマネジメント編】夏本 健司快適にWebデザインするためのフリーランスの仕事の流れ【プロジェクトマネジメント編】夏本 健司
快適にWebデザインするためのフリーランスの仕事の流れ【プロジェクトマネジメント編】夏本 健司schoowebcampus
 

More from schoowebcampus (20)

Compl exxx after
Compl exxx afterCompl exxx after
Compl exxx after
 
Compl exxx before
Compl exxx beforeCompl exxx before
Compl exxx before
 
ビジネスプラン概要資料 New
ビジネスプラン概要資料 Newビジネスプラン概要資料 New
ビジネスプラン概要資料 New
 
2479
24792479
2479
 
schoo法人利用-ビジネスプランのご案内
schoo法人利用-ビジネスプランのご案内schoo法人利用-ビジネスプランのご案内
schoo法人利用-ビジネスプランのご案内
 
PHP実践 ~外部APIを使って情報を取得する~
PHP実践 ~外部APIを使って情報を取得する~PHP実践 ~外部APIを使って情報を取得する~
PHP実践 ~外部APIを使って情報を取得する~
 
i.school, The University of Tokyo "Methods of concept designing and user surv...
i.school, The University of Tokyo "Methods of concept designing and user surv...i.school, The University of Tokyo "Methods of concept designing and user surv...
i.school, The University of Tokyo "Methods of concept designing and user surv...
 
i.school, The University of Tokyo "Divergence, convergence, and expression of...
i.school, The University of Tokyo "Divergence, convergence, and expression of...i.school, The University of Tokyo "Divergence, convergence, and expression of...
i.school, The University of Tokyo "Divergence, convergence, and expression of...
 
i.school, The University of Tokyo "The purposes and methods of technological ...
i.school, The University of Tokyo "The purposes and methods of technological ...i.school, The University of Tokyo "The purposes and methods of technological ...
i.school, The University of Tokyo "The purposes and methods of technological ...
 
i.school, The University of Tokyo "The purposes and methods of interviews and...
i.school, The University of Tokyo "The purposes and methods of interviews and...i.school, The University of Tokyo "The purposes and methods of interviews and...
i.school, The University of Tokyo "The purposes and methods of interviews and...
 
i.school, The University of Tokyo "Foundation and methodology in creating inn...
i.school, The University of Tokyo "Foundation and methodology in creating inn...i.school, The University of Tokyo "Foundation and methodology in creating inn...
i.school, The University of Tokyo "Foundation and methodology in creating inn...
 
ポートフォリオ公開後のマーケティング法
ポートフォリオ公開後のマーケティング法ポートフォリオ公開後のマーケティング法
ポートフォリオ公開後のマーケティング法
 
1840
18401840
1840
 
授業資料(スクー)
授業資料(スクー)授業資料(スクー)
授業資料(スクー)
 
個人事業主・フリーランスのための確定申告 ~白色申告編~
個人事業主・フリーランスのための確定申告 ~白色申告編~個人事業主・フリーランスのための確定申告 ~白色申告編~
個人事業主・フリーランスのための確定申告 ~白色申告編~
 
初心者でもUnityアプリに広告実装!広告も簡単に導入できる!儲かるアプリ講座【appC cloud school】Unityシリーズ vol.1
初心者でもUnityアプリに広告実装!広告も簡単に導入できる!儲かるアプリ講座【appC cloud school】Unityシリーズ vol.1初心者でもUnityアプリに広告実装!広告も簡単に導入できる!儲かるアプリ講座【appC cloud school】Unityシリーズ vol.1
初心者でもUnityアプリに広告実装!広告も簡単に導入できる!儲かるアプリ講座【appC cloud school】Unityシリーズ vol.1
 
少ない資金でシステム開発を委託する方法(補助金と類似事例の有無)
少ない資金でシステム開発を委託する方法(補助金と類似事例の有無)少ない資金でシステム開発を委託する方法(補助金と類似事例の有無)
少ない資金でシステム開発を委託する方法(補助金と類似事例の有無)
 
補助金で合格しやすい事業計画の作り方(主に創業補助金、ものづくり補助金)
補助金で合格しやすい事業計画の作り方(主に創業補助金、ものづくり補助金)補助金で合格しやすい事業計画の作り方(主に創業補助金、ものづくり補助金)
補助金で合格しやすい事業計画の作り方(主に創業補助金、ものづくり補助金)
 
アプリ開発したい人必見!Swiftを使ってiPhoneアプリに広告実装!【appC cloud school】
アプリ開発したい人必見!Swiftを使ってiPhoneアプリに広告実装!【appC cloud school】アプリ開発したい人必見!Swiftを使ってiPhoneアプリに広告実装!【appC cloud school】
アプリ開発したい人必見!Swiftを使ってiPhoneアプリに広告実装!【appC cloud school】
 
快適にWebデザインするためのフリーランスの仕事の流れ【プロジェクトマネジメント編】夏本 健司
快適にWebデザインするためのフリーランスの仕事の流れ【プロジェクトマネジメント編】夏本 健司快適にWebデザインするためのフリーランスの仕事の流れ【プロジェクトマネジメント編】夏本 健司
快適にWebデザインするためのフリーランスの仕事の流れ【プロジェクトマネジメント編】夏本 健司