演習課題「スタイルシートを設定する」
右側のコードエリアのhtmlは、Bootstrapで「hello paiza」という見出しを表示します。
このhtmlのスタイルシートを、下記に変更してください。
> https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/flatly/bootstrap.min.css
コードの実行をして、エラーが出なければ、演習課題クリアです!
#01:Webページを作ろう
ここでは、エンジニアがスキルをアピールするときに役立つポートフォリオページの作り方を説明します。HTMLとBootstrapを使って、具体的な作例を作りましょう。まずは、全体の構成とベースになるHTMLについて取り上げます。
ポートフォリオページとは、エンジニアが自分のスキルや開発経験を伝えるために作るWebページです。
もともとポートフォリオとは、書類やスケッチを持ち運ぶ「紙ばさみ」「折かばん」のことです。それが転じて、画家やデザイナが、自分の能力を伝えるために整理した作品集を「ポートフォリオ」と呼ぶようになりました。
- ポートフォリオ - Wikipedia
https://ja.wikipedia.org/wiki/%E3%83%9D%E3%83%BC%E3%83%88%E3%83%95%E3%82%A9%E3%83%AA%E3%82%AA
このチャプターの最終コード
https://paiza-webapp.s3.amazonaws.com/files/learning/portfolio/chap01/final.html
このレッスンの最終コード
https://paiza-webapp.s3.amazonaws.com/files/learning/portfolio/complete.html
ダウンロード方法:
- Windows: 右クリック - 名前を付けてリンク先を保存
- Mac: CTRL + クリック - リンクに名前を付けて保存
- Bootswatch - flatlyのCDNhttps://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/flatly/bootstrap.min.css
このレッスンで使用する画像ファイルのurlです。
https://paiza-webapp.s3.amazonaws.com/files/learning/portfolio/bg.png
https://paiza-webapp.s3.amazonaws.com/files/learning/portfolio/neko.png
https://paiza-webapp.s3.amazonaws.com/files/learning/portfolio/work1.png
https://paiza-webapp.s3.amazonaws.com/files/learning/portfolio/work2.png
https://paiza-webapp.s3.amazonaws.com/files/learning/portfolio/work3.png
- Bootstrapのグリッドシステムとサムネイルを使ってポートフォリオのデザインを整える - Abnormal 〜転職への道〜
http://hirotsuru.hatenablog.com/entry/2016/06/09/205827
- テックノート プログラマですがポートフォリオサイトを作りました
http://javatechnology.net/diary/portfolio-site/
- ポートフォリオサイトを作ってみた。こんな技術ポイントを気にして作りました。 - YoheiM .NET
http://www.yoheim.net/blog.php?q=20130607
- 【SI→Web等】転職するエンジニアが自己PR作りに役立つサービス10選 - paiza開発日誌
http://paiza.hatenablog.com/entry/2015/07/29/%E3%80%90SI%E2%86%92Web%E7%AD%89%E3%80%91%E8%BB%A2%E8%81%B7%E3%81%99%E3%82%8B%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E3%81%8C%E8%87%AA%E5%B7%B1PR%E4%BD%9C%E3%82%8A%E3%81%AB%E5%BD%B9%E7%AB%8B
- 将来不安だけど面倒臭がりな人向け!簡単にキャリアの棚卸をする方法 - paiza開発日誌
http://paiza.hatenablog.com/entry/2014/12/25/%E5%B0%86%E6%9D%A5%E4%B8%8D%E5%AE%89%E3%81%A0%E3%81%91%E3%81%A9%E9%9D%A2%E5%80%92%E8%87%AD%E3%81%8C%E3%82%8A%E3%81%AA%E4%BA%BA%E5%90%91%E3%81%91%EF%BC%81%E7%B0%A1%E5%8D%98%E3%81%AB%E3%82%AD%E3%83%A3
- 採用担当者に聞いてわかった!40代の転職で失敗する前に、30代から意識したい4のポイント - paiza開発日誌
http://paiza.hatenablog.com/entry/2016/09/21/%E6%8E%A1%E7%94%A8%E6%8B%85%E5%BD%93%E8%80%85%E3%81%AB%E8%81%9E%E3%81%84%E3%81%A6%E3%82%8F%E3%81%8B%E3%81%A3%E3%81%9F%EF%BC%8140%E4%BB%A3%E3%81%AE%E8%BB%A2%E8%81%B7%E3%81%A7%E5%A4%B1%E6%95%97%E3%81%99
- 生存戦略としてITエンジニアが35歳までに考えておくべき3つの事 - paiza開発日誌
http://paiza.hatenablog.com/entry/2014/06/17/%E7%94%9F%E5%AD%98%E6%88%A6%E7%95%A5%E3%81%A8%E3%81%97%E3%81%A6IT%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E3%81%8C35%E6%AD%B3%E3%81%BE%E3%81%A7%E3%81%AB%E8%80%83%E3%81%88%E3%81%A6%E3%81%8A%E3%81%8F
- bootswatch - BootstrapCDN
https://www.bootstrapcdn.com/bootswatch/
- Bootswatch: Free themes for Bootstrap
https://bootswatch.com/
- 総まとめ: Bootstrapの無料で高品質なテーマファイルがダウンロードできるサイト | コリス
http://coliss.com/articles/build-websites/operation/work/bootstrap-free-themes-2016.html
- 商用利用無料!Bootstrap 3, Bootstrap 4をベースに最近のUIデザインのトレンドを取り入れた新作テーマのまとめ | コリス
http://coliss.com/articles/build-websites/operation/work/best-templates-for-bootstrap-2015-autumn.html
- Bootstrapのシンプルな無料テンプレート20選 | TechStars Blog
https://blog.techstars.jp/bostp-simple632217/
- paiza動画ラーニング - HTML/CSS入門編 (全3レッスン)
https://paiza.jp/works/html/primer
- Web制作を劇的に効率UPさせる、最近人気の軽量「CSSフレームワーク」を厳選してみた!:paiza開発日誌
http://paiza.hatenablog.com/entry/2016/12/19/Web%E5%88%B6%E4%BD%9C%E3%82%92%E5%8A%87%E7%9A%84%E3%81%AB%E5%8A%B9%E7%8E%87UP%E3%81%95%E3%81%9B%E3%82%8B%E3%80%81%E6%9C%80%E8%BF%91%E4%BA%BA%E6%B0%97%E3%81%AE%E8%BB%BD%E9%87%8F%E3%80%8CCSS%E3%83%95