- 投稿日：2021-04-15T21:01:36+09:00
超感覚C3講座 hackコミュニティー 初めてのWEB
超感覚C3講座 hackコミュニティー 初めてのWEB 超感覚C3講座ということで今回はhtml、CSS、JavaScriptを用いてWEBページを書いていきます。講座の時間が限られているのでこちらが用意したファイルにコードを加えるもしくは変更する形で進めていきます。また、この講座で扱う内容はHTML、CSS、JavaScriptを用いてWEB制作のほんの一部です。ですので、この講座をきっかけに興味を持ってくれた人はこの記事に貼られているリンクやgoogle等で各自調べてみてください。 WEBとは Webとは、インターネット上で標準的に用いられている文書の公開・閲覧システム。文字や図表、画像、動画などを組み合わせた文書を配布することができます。文書内の要素に別の文書を指し示す参照情報（ハイパーリンク）を埋め込むことができる「ハイパーテキスト」（hypertext）と呼ばれるシステムの一種です。 引用元：Web（ウェブ）とは - IT用語辞典 e-Words WEBサイトを、WEBサーバーが提供し、WEBクライアントが提供されたものを表示し、利用可能にしてくれているおかげで、私たちはWEBサイトを利用することができています。ちなみに、あなたが今この記事を見ているPCがWEBクライアントです。 また、WEBサイトはバックエンドとフロントエンドで構成されています。バックエンドはWEBサーバー側でデータの処理等を行う部分であり、フロントエンドはWEBクライアント側で表示やサーバーとのやり取りを行う部分です。バックエンドの開発言語はJava、JavaScript、PHP、Python、Rubyといったプログラム言語であり、フロントエンドの開発言語は主にHTML、CSS、JavaScriptです。 今回はWEBサイトのフロントエンドを触っていきます。 開発環境 Windows10: 最新版 git: 最新版 VSCode: 最新版 事前準備 vscodeをインストール。 gitをインストール。 作業用のフォルダーの作成。 ＊作成場所や名前は自由 本編 必要なものを用意する github.comにアクセスし、ログインします。 今回、用いるリポジトリがシモのGitHubにあるので、リンクにアクセスします。 画面の右上にForkボタンがあるので、それを押します。すると、あなたのGitHubアカウントが出るのでそれを選択します。これであなたのGitHubに今回使うリポジトリが複製されました。リポジトリはフォルダーをイメージしてもらえればいいと思います。 次に、コマンド プロンプトを開きます。開き方の例：タスクバーの検索ボックスに「コマンド プロンプト」と入力し、Enterを押します。 cdコマンドを使い、事前準備で作成した作業用フォルダーに移動します。 先ほどForkしたリポジトリをローカルにcloneします。簡単に言うと今回使う資料をあなたのPCのローカル環境に複製します。今、自分が作業用フォルダーにいることを確認し、以下のコマンドを実行します。$ git clone https://github.com/あなたのGitHubのユーザーネーム/tyoukankakuC3-2021-hack.git 初めてgit cloneコマンドを使った際におそらくログイン要求が出ると思うので自分のGitHubアカウントでログインしてください。 次に以下のコマンドで先ほどクローンしたリポジトリをvscodeで開きます。$ code tyoukankakuC3-2021-hack コードを書いていくぅぅぅううううううう！！！の前に今回WEBページを書くのに必要なことを説明します。 HTML編 コードを書く前に基礎知識（一部）の説明を行います。 ・HTML（HyperText Markup Language）とは WEBページ内の各要素の意味や構造の定義を行うマークアップ言語です。 ・基礎知識の説明 HTMLではタグと呼ばれる< >で囲まれた言葉を使って、書いていきます。 では、index.htmlの中身を見ながら説明します。 最初の行に<html lang="ja">とあるが、これは<html>タグであり、このタグで囲まれた範囲がhtmlであることを宣言しています。書き方は以下です。 <html lang="ja"> <!--htmlのコード--> <head> ... </head> <body> ... </body> </html> <html lang="ja">のlang="ja"はこのWEBページの言語が主に日本語であることを示しています。 ちなみに、<!--htmlのコード-->はコメントであり、コードとしては認識されず、表示されないものである。使い方としては書いているコードの説明などに使います。書き方は<!--と-->でテキストを囲みます。 次に、2行目にある<head>タグについて説明します。 <head>タグはWEBページには表示されないがWEBページに必要な情報を入れておくのに使います。WEBページのタイトルや説明、言語、著作者、ファビコン、読み込むスタイルファイルなどの情報を記述します。 <head>タグも<html>タグと同じようにタグで挟み使います。 繰り返しになりますが基本的にタグは文字やコードを挟んで使います。 次に、12行目にある<body>タグはWEBページの本文であることを宣言することに使われます。WEBページの本文とは実際にWEBブラウザーに表示される部分のことです。 ここまでで説明したタグを用いた以下がhtmlファイルの基本構造になります。 <html lang="ja"> <!--htmlのコード--> <head> ... </head> <body> ... </body> </html> では、この基本構造の本文にあたる<body>タグの間に書く際に使うタグについて今回使う5つを紹介します。 1. <div>タグについて <div>タグはそれ自体に意味はなく、囲んだ範囲をひとかたまりのブロック要素として扱います。 イメージとしては外骨格や枠を想像してもらえればいいと思います。 以下の図の色枠で囲まれた範囲がブロック要素で画面の構成を作っていきます。 2. <h1>～<h6>タグについて <h1>～<h6>タグは見出しを付けるのに使います。ちなみにhはheadingのことです。 数字は1が最上位で６が最下位を表し、ブラウザーでのサイズが変化し、太文字になり、前後に改行が入ります。 3. <li>タグについて <li>タグはリストの項目を記述するのに使います。 4. <script>タグについて <script>タグはJavaScriptコードをhtmlコードの中に埋め込むのに使われます。 5. <img>タグについて <img>タグは画像を表示するのに使うタグです。画像のURLはsrc属性の値として指定します。以下のように記述します。このタグは基本的なタグの使い方と異なり、タグで囲む必要はありません。 <img src="画像URL" alt="イラスト1"> alt属性は画像が表示されない際に代わりに表示するテキストを指定します。 これで説明は終わりです！ ・実践 では、さっそく書いていきましょう！！！ ここではindex.htmlを編集します。 #編集したWEBページを確認する方法について HTMLファイルをブラウザーにドラッグアンドドロップすると確認できます。 HTML等のファイルを変更し、確認する際はリロードすると変更が反映されます。F5を押すとリロードされます。 1.<h1>タグを使う ・ ・ ・ <!--自己紹介シート--> <div class="self-sheet"> <!--タイトル--> <div class="title"> <!--ここ--> <!--タイトル--> </div> <!--自分の基本情報--> <div class="self-inf"> ・ ・ ・ コードの中のタイトルと書かれたところに自己紹介シートのタイトルを記入します。先ほど説明したタグの<h1>タグを使います。ほかの人と相談しながらやってみよう！ コメントは消してもいいです。 出来ましたか？ 答え合わせ、解説はその場で行います。 これでタイトルが表示されるようになりました。 2.<img>タグを使う ・ ・ ・ <!--自分の基本情報--> <div class="self-inf"> <!--画像の埋め込み--> <div class="image-tile"> <!--ここ--> <!--画像の埋め込み--> </div> <!--テキスト情報--> <div class="intro1"> <!--ここ--> <!--自己紹介--> </div> </div> ・ ・ ・ コードの画像の埋め込みと書かれたところに自分のdiscordアイコンの画像を埋め込みます。先ほど説明したタグの<img>タグを使って埋め込んでみましょう！！ ファイルの置く場所やURLの書き方をほかの人と相談しつつ、考えてください。 出来ましたか？ 答え合わせ、解説はその場で行います。 これで画像を埋め込むことが出来ました。 3.<li>タグを使う ・ ・ ・ <!--自分の基本情報--> <div class="self-inf"> <!--画像の埋め込み--> <div class="image-tile"> <!--ここ--> <!--画像の埋め込み--> </div> <!--テキスト情報--> <div class="intro1"> <!--ここ--> <!--自己紹介--> </div> </div> ・ ・ ・ コードの自己紹介と書かれたところにあなたの情報を箇条書きします。先ほど説明したタグの<li>タグを使って自己紹介を書いてみよう！！ 自己紹介の項目例を以下に示します。 名前：（必須） アカウント名：（必須） 出身： 所属： 好きな食べ物： 趣味： 好きな歌手： ・ ・ ・ 必須項目以外は自由に！ 文字の大きさ等はこのあとCSSで変更できるので、分量等は気にせず書いていいよ！！ 出来ましたか？ 答え合わせ、解説はその場で行います。 これで箇条書きで自己紹介を書くことが出来ました。 ・慣れていこう！！ <!--1コ目の趣味・好きなことについて--> <div class="hobby1"> <!--テキスト情報--> <div class="intro2"> <!--ここ--> <!--趣味、好きなことの詳細--> </div> <!--画像の埋め込み--> <div class="image-tile"> <!--ここ--> <!--画像の指定--> </div> </div> 趣味、好きなことの詳細には自己紹介同様に箇条書きで趣味や好きなことの詳細を書こう。 画像の指定には趣味や好きなことに関連する画像を自己紹介同様に埋め込もう。 <!--2コ目の趣味・好きなことについて--> <div class="hobby2"> <!--好きな動画の埋め込み--> <div class="image-tile"> <!--ここ--> <!--動画の埋め込み--> </div> <!--テキスト情報--> <div class="intro3"> <!--ここ--> <!--好きな動画の詳細--> </div> </div> 動画の埋め込みには好きなyoutyubuの動画を埋め込んでみよう！埋め込み方は以下の手順でURLをコピーし、貼り付けます。コピーした内容は変更せず、そのまま貼り付けます。 これでYouTubuの動画を埋め込むことが出来ました。 ここで、この動画埋め込みに対してのCSSを付与するためにclass="video"を追加します。 詳細のところには箇条書き（<li>タグを使って）で動画の詳細等自由に書いてください。 これで、HTMLで書くところは終わりました。 次はCSSについてです！ CSS編 では、CSSの基礎知識の説明をしていきます。 ・CSS（Cascading Style Sheets）とは WEBページのスタイリングを行うためのプログラミング言語です。文章をスタイリングする技術をスタイルシートを呼び、CSSはスタイルシートの一つとしてHTMLと一緒に用いられ、WEBページのスタイリングで一般的に使われています。例えば、色やサイズ、レイアウトなどのレイアウトに関することや出力などのスタイルも指定することが出来ます。 ・基礎知識（一部）について では、基礎知識の一部をindex.cssを見ながら説明します。 CSSはHTMLを装飾する役割があります。装飾する際にどの部分を装飾するのかをしてしなければなりません。そこで、CSSには装飾を適用する対象を指定するセレクタがいくつかあります。今回はその中でよく使う2つのセレクタを説明します。 要素型セレクタ 要素型セレクタはHTMLのタグ名（要素名）を指定する方法です。使い方を以下に示します。 body { margin: 0; padding: 0; /*↓ここ*/ background-color: rgb(226, 226, 226); } index.cssの最初に書かれているのが要素型セレクタを使った指定方法を使った書き方です。要素名としてbodyを指定し、HTMLタグの<body>タグを指定しています。{ }で挟まれているものに関してはあとで説明します。 classセレクタ .self-sheet { margin: 5px auto; width: 1000px; height: 1390px; /*↓ここ*/ background-color: #fff; overflow: hidden; } classセレクタはHTMLの属性としてclassを定義し、そのクラス名を用いてcssの付与を行います。 index.htmlの中にclass = "self-sheet"と定義しているHTMLタグがあるので、index.cssでセレクタ名として.self-sheetが指定されています。 ちなみに、HTMLタグにクラスを追加するには<body class = "class-dayo">というように記述します。 では、実際に手を動かしましょう。 body { margin: 0; padding: 0; /*↓ここ*/ } /*↓ここ*/の部分にバックグラウンド色を指定するプロパティーと値を書きます。 プロパティーとしてbackground-colorを使い、値として#fffを指定します。書き方は以下のように書きます。 プロパティー名: 値; では、書いてみてください 出来ましたか？ 多分できたと思うので、つづいていってみよう！ .self-sheet { margin: 5px auto; width: 1000px; height: 1390px; overflow: hidden; /*↓ここ*/ } さっきと同じようにbackground-colorを使って背景色を指定します。 .intro1, .intro2, .intro3 { list-style-type: none; width: 50%; height: 100%; /*↓ここ*/ } font-size: 20px;を書いてみよう！これでフォントサイズが指定できます。 .spinner { width: 500px; height: 500px; margin: calc(50vh - 250px) auto; background-repeat: no-repeat; border-radius: 100%; animation: sk-scaleout 1.0s infinite ease-in-out; /*↓ここ*/ } background-image: url(C3logo.png);でローディングの際の画像を指定できます。C3logo.pngの部分を自分のアイコンに変えることもできます。後でやってみてください。 次にbackground-size: 500px;で、先ほどの画像の大きさを指定できます。 これで、cssの説明を終わります。 JavaScript編 JavaScriptはプログラミング言語のひとつです。 今回はコードの詳細を省きます。簡単に説明するとページがローディングされると一定の間、指定したCSSがローディング用のHTMLタグに付与されます。 window.onload = function() { const spinner = document.getElementById('loading'); // タイムアウト時間の指定 setTimeout(addCss, 0, spinner); } function addCss(spinner) { // Add .loaded to .loading spinner.classList.add('loaded'); } ここではindex.jsファイルの中のタイムアウト時間の指定の部分が0になっているので、そこを好きな時間に変更してください。この値はローディング時間を指定します。 これで今回作る自己紹介WEBページができました。 ここまでの変更を、GitHubに上げることでデプロイ（公開）することが出来ます。では、最後にデプロイする作業をしましょう。 以下のコマンドをコマンドプロンプトで実行してください。 git add index.html index.css index.js git commit -m '[add] 完成版' git push origin HEAD デプロイしたページは今回使った自分のGitHubのリポジトリページの右側にEnvironmentsがあるので、その下のgithub-pagesをクリックし、一番上のView deploymentをクリックすると見れます。 最後に、ページのリンクをhackコミュニティーのテキストチャンネルに張ってください。 以上で「超感覚C3講座 hackコミュニティー 初めてのWEB」を終了します。 今日やったことはほんのごく一部ですので、気になったことややりたいことがあるのならぜひ調べてみてください。もちろん、先輩に聞いてくれてかまいません。 参考ページ ページを参考としていくつか候補を挙げておきます。もっと知りたい方は以下のリンクを参考にしてみてもいいかもしれません。 Web（ウェブ）の意味とは。語源や歴史などを簡単に説明します Web（ウェブ）とは - IT用語辞典 e-Words Webの仕組みとWebサーバの構造：ApacheによるWebサーバ構築（2）（1/2 ページ） - ＠IT HTMLクイックリファレンス 【CSS】displayの使い方を総まとめ！inlineやblockの違いは？ 今さら聞けない！CSSとは【初心者向け】現役Webデザイナーが解説 ウェブ開発を学ぶ | MDN サル先生のGit入門〜バージョン管理を使いこなそう〜【プロジェクト管理ツールBacklog】 【GitHub超初心者入門】この前初めてGitHubを使い始めたエンジニア見習いが書くGitHubの使い方と実践～とりあえず一緒に動かしてみようぜ！～ - Qiita 講座後にチャレンジしてみるといいかもと思ったこと 講座時間中に、もうすでにWEB触ったことがあるから余裕！！な人やさっさと終わってしまった人は講座内容を終わらせたうえで、以下のこともやってみて やる際には講座内容以外のものがたくさん出てくるので各自調べながらやってみてください！ やりたいことがあったら、方法を調べる。分からないことやエラーがあったら、調べる。これを習慣づけて行うことで、確実に実力が付くので、面倒やけど調べることやってみてください！！！！！！もちろん、人に聞くことも大事なので、同回生でも上回生でもいいので聞いてください！！！！！ では、チャレンジ頑張ってね！！！！！！！！！ 背景色を好きな色にい変更する。 文字の色を指定する。 <head>タグの中身を変更する。 アイコン画像をクリックすると自分のGitHubのページに飛ぶようにする。 ページのフォントをフォントファイルを使って変更する。 ローディングアニメーションを自分の好きなものに変更する。 ホバーアニメーションなど、何かアニメーションを追加する。 ファビコンを変更する。 ページ全体のレイアウトを変更する。
- 投稿日：2021-04-15T17:46:13+09:00
復習日誌_0415
HTML class divに付ける名前、グループ名のこと 最低限のルールを守れば、命名規則に関して正解はない 意味の分かる名前をつけること div 単体では特に意味を持たないタグだが、divで囲った部分をブロックレベル要素としてグループ化することができるタグ span 囲んだ要素を強調するなどのデザイン微調整によく利用されるタグ 個別にテキストのフォント調整、文字色・背景色の変更を施す container wrapper 開発チームや人によって使い方は様々 containerは画面内のコンテンツの収まる範囲を設定するブロックで、 コンテンツを一定の範囲内で整列させる役割を持つ https://note.com/msak717/n/nd39608804fe0#H7fby CSS background-size: cover; 1枚の画像で表示範囲を埋め尽くすように画像の大きさが拡大縮小する hover カーソルが乗ったときの状態を指す セレクタ:hoverとすることで、カーソルが乗ったときのCSSを指定することができる border-radius 角を丸めるにはborder-radiusプロパティを用いる transition transitionを使うとアニメーションをつけることができ、「変化の対象」や、「変化にかかる時間」などを指定できる transitionは多くの場合hoverと組み合わせて使う position: absolute; position: absolute;を使うと、要素同士を重ねて表示することが出来る サイト全体の左上部分を基準とし、そこからの位置をtopとleftを用いて指定する position: relative; 基準としたい親要素にposition: relative;と指定すると、その要素の左上部分が基準位置となる cursor cursorプロパティを用いることでマウスのカーソルが要素に乗ったときのカーソルの形を変えることができる :active セレクタにactiveを用いることで、要素がクリックされている間だけCSSを適用することができる
- 投稿日：2021-04-15T12:25:57+09:00
Flexboxを理解するためにコロンビア国旗を作ってみた №２
Flexboxを使って国旗を作る 目標：Flexboxの基礎を理解するため テキストエディターはVSCode. ↓下記のFlexboxチートシートを参考 Css Flexboxのチートシート ～codeを書き始める前の準備～ ・構成を考える！ 何をどんな風に、どうやって作るのか？ 最初にある程度決めておくと後が楽になります。 例 コロンビアの国旗を調べる <div>は何個必要なのか？ class属性名はどうしようか？ ・紙とペンで実際に枠を書いてみる（添付画像参照） ここまで出来たらcodeを書いていきます♪ ※head部分は省略 HTML <div class="colombia"> <div class="col"> <div class="col2">しかく１</div> <div class="col3">しかく２</div> <div class="col4">しかく３</div> </div> </div> .colombia { width: 700px; height: 500px; border: 1px solid black; margin: 0 auto; } .col { width: 450px; ★ height: 300px; ★ border: 1px solid black; } ※旗の枠部分 .col2 { background-color: yellow; } .col3 { background-color: blue; } .col4 { background-color: red; } 上記の状態をブラウザで一旦確認 上記のCSSにFlexboxをつける。 .colombia { width: 700px; height: 500px; border: 1px solid black; margin: 0 auto; display: flex; ※ .col｛｝を中央に寄せるためにFlexboxを指定 justify-content: center; ※ align-items: center; ※ } .col { width: 450px; height: 300px; border: 1px solid black; display: flex; ※ flex-direction: column; ※ } 上記の状態をブラウザで確認 ↓ .colombia{}に付けたFlexboxの影響で.col{}が中央揃えになりました。 .col{}に付けたFlexboxは前回と変化ありません。理由としては、flex-direxction: がcolumnとなっているためです。 『子要素に』flex-growを付けます。 .col2 { background-color: yellow; flex-grow: 3; ※ } .col3 { background-color: blue; flex-grow: 1.5; ※ } .col4 { background-color: red; flex-grow: 1.5; ※ } 最後に、<div>しかく１,しかく２,しかく３</div>の文字を消して 完成です！！！ まとめ Flexboxの理解を深めるため、今回はpadding , marginを使用せず作成しました。 また、Flexboxはmarginと一緒に使用しないよう意識することが大切です。 flex-growの比率と色を変更すると、ロシア、オーストリア、オランダ、ドイツなどの国旗も出来ます。 是非、皆様も作ってみてください 今回は以上です。 ありがとうございます！
- 投稿日：2021-04-15T07:15:34+09:00
DjangoでテンプレートビューをCSSで修飾する方法
HTMLでテキストボックスを修飾する時とかってありますよね default.css .collor{ backgroundcolor:red } welcome.html <input type="text" class="color"> こんな感じでクラスで就職したりするんですが、 DjangoでCSSの修飾ってどう書くの？というメモ Formを使ってCSSを修飾 これをDjangoのFormクラスに使うとするとこんな感じになるみたいです。 Form.py class Form(forms.Form): username = forms.CharField(max_length=200) password = forms.CharField(widget=forms.PasswordInput(), max_length=200) # コンストラクタ def __init__(self): super().__init__() #ユーザー名をCSSで就職 self.fields['username'].widget.attrs["class"] = "inputtext withicon icon_user" self.fields['username'].widget.attrs["placeholder"] = "Username" #パスワードをCSSで就職 self.fields['password'].widget.attrs["class"] = "inputtext withicon" self.fields['password'].widget.attrs["placeholder"] = "Password" welcome.html <form action="{% url 'login' %}" method="post" enctype="multipart/form-data"> {% csrf_token %} <div> <span id="Label_Username">なんとかテキストボックス</span> {{ form.username }} </span> </div> <div> <span id="Label_Password">なんとかパスワード</span> {{ form.password}} </span> </div> <\form> コンストラクタにself.fields[].widget.attrs[]とすると、 そのタグに属性を付けることが出来るみたいなので、こんな感じでクラスを指定するといい感じになると思います。
- 投稿日：2021-04-15T00:38:13+09:00
自己紹介HP作ったらあまりにも簡素だったのでhoverでこなれ感を出してみた
はじめに CSSのhoverを上手く用いることでHPに部分的にこなれ感をプラスできる方法を書きます。 コーディングを学習している際、「どうにかしてこのチープ感を脱したい！」という思いでhoverを使って動きを出すというところにたどり着きました。もし同様の悩みをお持ちの方の一助になれば幸いです。 想定読者 プログラミング初学者でHtmlとCSSで簡単なHP作成に挑戦したけど、「なんだかな〜」というできになってしまった方。 参考サイト こちらの記事を参考にhoverを導入させていただきました！ https://owl-view.com/css/998/ hover導入前の見た目とコード まず、見た目はこんな感じです。 次にヘッダー以降、ファーストビューにあたるセクションのコード。 index.html 〜〜 ヘッダー部分を省略 〜〜 <section class="main"> <div class="firstview"> <div class="firstview_contents"> <div class="firstview_docment">Who are U?</div> <div class="profile_pic"> <img src="img/penguin.jpg" alt="ペンギンの画像" class="mypicture"> </div> </div> </div> </section> Who are U?と画像部分のCSS 文字はtext-shadowでひと工夫しています。 style.css .firstview_docment{ color: #ffffff; text-shadow: 5px 5px 5px blue, -5px -5px 5px orange; } .profile_pic{ padding-left: 5rem; } hover導入後 先程のコードにhoverの効果を加えます。 index.htmlは変えず、style.cssに:hoverとtransformを追加。 style.css .firstview_docment{ color: #ffffff; text-shadow: 5px 5px 5px blue, -5px -5px 5px orange; transition: .4s; -webkit-transform: scale(1,1); -moz-transform: scale(1,1); -ms-transform: scale(1,1); -o-transform: scale(1,1); transform: scale(1,1); } .firstview_docment:hover { -webkit-transform: scale(1.1,1.1); -moz-transform: scale(1.1,1.1); -ms-transform: scale(1.1,1.1); -o-transform: scale(1.1,1.1); transform: scale(1.1,1.1); } .profile_pic{ padding-left: 5rem; transition: .4s; -webkit-transform: scale(1,1); -moz-transform: scale(1,1); -ms-transform: scale(1,1); -o-transform: scale(1,1); transform: scale(1,1); } このように簡単に動きを出すことができました！ 最後に いかがだったでしょうか？ かなり初歩的な内容ですが、自分のHPに動きがでると嬉しいですよね^ ^ コードもまだまだ未熟かと思いますが、もし決定的な間違いなどございましたらご指摘いただければ幸いですm(_ _)m ありがとうございました！