HTML
CSS
ここでは,Aboutページを作っていきます.
まずはtmp.html
の内容をabout.html
にコピペします.
まずはゴールの確認です.
967px
about.html
のhead
タグ内に以下のlink
タグを追加します.
about.html
のmain
要素を以下にします.
ここで,article
要素とは,div
のようなブロックレベル要素で,その要素内が文書であることをブラウザに伝えます.
文書、ページ、アプリケーション、サイトなどの中で自己完結しており、 (集合したものの中で) 個別に配信や再利用を行うことを意図した構成物を表します。例えば、フォーラムの投稿、雑誌や新聞の記事、ブログの記事、商品カード、ユーザーが投稿したコメント、対話型のウィジェットやガジェット、その他の独立したコンテンツの項目が含まれます。
引用:https://developer.mozilla.org/ja/docs/Web/HTML/Element/article
画像はサンプル画像です.
使いたい画像がある人は置き換えてください.
ない人は,後で好きな画像に置き換えてください!
ご自身のものに置き換えてください!
ご自身のものに置き換えてください!
ご自身のものに置き換えてください!
ご自身で好きな内容に置き換えてください!
いらないひとは消してもOK
ご自身のものに置き換えてください!
今回のデザインは,縦長のカードの中に自己紹介があるようなデザインです.
about.css
に記述していきましょう.
もともとあるmainの定義に.wrapper
の定義として追加の定義をします.
フレックスボックスの定義を追加し,中央に配置します.
上下に余白を設定します.
background-color: black;
は後々消しますが,CSSの適用範囲が分かりやすいようにするために,色を付けます.
コンテンツの幅は,常に表示領域の95%
になります.
ただし,最大幅は967px
に設定しました.
PCなどの大きな画面では967px
になります.
横並びを宣言します.
常に幅を48%
にします.
ただし,240 ≤ width ≤ 400
です.
background-color: black;
を消して完成です.
以下のようになりました!
(1xでは画像が横並びにならないので,0.5xで確認してもらえるとよくわかると思います.)
GitHubにコミット・プッシュして変更を反映させましょう!
完了したら,アクセスしてみましょう!
ページ遷移がうまくいくのかも試してみましょう!
うまくいかない時は修正してコミット・プッシュしなおせばOKです!
ここまでで,ホームページのエントランス(Index.html
)と自己紹介ページ(About.html
)を作ってきました.
本当にお疲れさまでした.
今後これをホームページ(英語的にはポートフォリオ?
)として使っていくのも,使わないのも自由です!
この時点で,みなさんはHTML・CSSの初心者からは脱却したといってもいいかもしれません!
少なくとも,Googleなどで調べながらデザインを自由に組めるポテンシャルは持ち合わせていると思います!
将来的に,今回のGitHub Pagesの内容を消してしまって,オリジナルなものに置き換えても私は一向にかまいません!
むしろその方が新しいものを見れるので楽しいですね.
ここまでお付き合い本当にありがとうございました!
Web技術に少しでも興味を持ってくれたのであれば幸いです!
いくつかのステップが考えられます!
以下は一例ですので,これらに縛られなくてもいいですが,0. やってほしいこと
はやってください!お願いします!
画像や自己紹介,その他仮置きしているものをそれぞれオリジナルなものに書き換えてください!
外部の画像などを使用する場合は,その画像の著作権などには十分注意してください!
この際,二つのHTMLファイルで共通している個所は両方とも編集してください!
????
で置いていた部分のリンク先ページを作る内容は完全自由です!
私の場合だと,大好きな愛犬・愛猫たちのギャラリーを作りました!
gallery.html
とgallery.css
というファイルを作成しました!
もし完成したら(しなくてもOK),私たちのDiscordサーバー九工大Web開発部
の作品展示場に展示してください!
今回の講座を経て「どんなデザインが飛び交うのか?」が楽しみです!
「もうやらないよ!」って人は????
の部分を消去して,再度コミット・プッシュしてください!
これだけでも一作品と楽しめるようなものになっていると思います!
今回の講座ではみんな共通の色,レイアウトで作成しました.
これをベースに改良して,オリジナルのデザインに書き換えるのもいいでしょう!
同じデザインになることに特に抵抗がない方はこのままでいいですし,改良した方はぜひ教えてください!アクセスします!
ざっくりいうと,JavaScriptはWebページに動きを与えるための,プログラミング言語です.
例えば資料中の一部でも使っていました.
こことか ↓
https://hackmd.io/@kit-web-team/CSS2#Flexボックス
JavaScriptを勉強すれば,今回の講座と合わせてフロントエンドの主要技術を手に入れたことになります.
図書館などでなるべく出版年度が最近の入門書を1冊終わらせるといいかもしれません.
GitHub PagesでもJavaScriptはもちろん使えるので,さらに今回のホームページをパワーアップさせても面白いかもしれません!
いろいろな言語に,Web開発用のフレームワークはたくさんあります.
などなど.
これらのフレームワークを使うことで,高速で信頼性の高いWebページを作成することも可能です.
JavaScriptに入門することもかねて,いきなりWebフレームワークの勉強からするのもまた1つの手かもしれません.
その場合は各フレームワークの公式が提供するGetting Start
などを進めていくのがいいです!
無料で勉強でき,内容の信用性が高いドキュメントになっているはずです.
今後「フロントエンドがあまり性に合わないかも…」と勉強していて思った方!
Webバックエンドもあります!
PythonやRubyといった言語と各フレームワークを用いて,Webサイトの裏側の仕組みを作るのがバックエンド開発です.
ユーザー登録されたデータの管理やページへのアクセス制御など,バックエンドのやっていることは直接目に見えるものではありませんが,確かにそこにあってとても重要なWebの要素です.
あまり多くのことは話せませんが,「バックエンド開発」等で検索をかければたくさんの記事が出てくると思います!
Webの裏側の仕組みに興味を持ったなら,ぜひバックエンド技術を学んでみてください!かなり楽しい!
今回の講座をさらに後輩たちに開講してくれる人を募集中!
資料などはすべてお渡するので,お声掛けください!
こういう活動(講座)はもしかしたら,就活のネタにできるかも!?
お待ちしております!