目的

• HTMLのブロック要素における余白の概念と設定方法をまとめる。
• marginとpaddingについてまとめる。

押さえるポイント

• HTMLのブロック要素は余白のサイズを設定することができる。
• ブロック要素の内側と外側の余白を設定することができるのでとても理解しにくい部分である。
• 余白はピクセル数を用いて設定する。 ※marginとpaddingはHTMLを実施していて最初にぶち当たる壁である。完全に理解しようとせず、余白の概念を頭に入れながらProgateなどで勉強コーディングを進めることをお勧めする。

marginとpaddingの表している部分

下記のような記載のされたHTMLファイルが存在したとする
- 下記にHTMLファイルの内容を記載する。

<h1>おはようございます。</h1>

• marginプロパティで設定できる部分は下記画像の橙色の矢印部分である。
  • h1要素の外側の余白のサイズを設定する
• paddingプロパティで設定できる部分は下記画像の青色の矢印部分である。
  • h1要素の内側の文字からの余白のサイズを設定する。

marginの設定方法の例

• 下記にHTMLファイルの内容を記載する。

<h1>おはようございます。</h1>

• marginプロパティでh1要素の外側の余白を設定する。
• 下記にCSSファイルの内容を記載する。

h1 {
    margin: 上側橙矢印部分の余白のピクセル数 右側橙矢印部分の余白のピクセル数 下側橙矢印部分の余白のピクセル数 左側橙矢印部分の余白のピクセル数;
}

• 四方の外側余白をそれぞれ指定する方法が最もスタンダードな記載方法であるが、下記のように省略することも可能である。
• 下記にCSSファイルの内容を記載する。

/* 四方に同じサイズの余白を設定したいとき */
h1 {
    margin: 四方の外側余白のピクセル数;
}

/* 縦の余白サイズと横の余白サイズの省略指定 */
h1 {
    margin: 上下の外側余白のピクセル数 左右の外側余白のピクセル数;
}

/* 上のみの外側余白指定 */
h1 {
    margin-top: 上側橙矢印部分の余白のピクセル数;
}

/* 右のみの外側余白指定 */
h1 {
    margin-right: 右側橙矢印部分の余白のピクセル数;
}

/* 下のみの外側余白指定 */
h1 {
    margin-bottom: 下側橙矢印部分の余白のピクセル数;
}

/* 左のみの外側余白指定 */
h1 {
    margin-left: 左側橙矢印部分の余白のピクセル数;
}

paddingの設定方法の例

• 下記にHTMLファイルの内容を記載する。

<h1>おはようございます。</h1>

• paddingプロパティでh1要素の内側の余白を設定する。
• 下記にCSSファイルの内容を記載する。

h1 {
    padding: 上側青矢印部分の余白のピクセル数 右側青矢印部分の余白のピクセル数 下側青矢印部分の余白のピクセル数 左側青矢印部分の余白のピクセル数;
}

• 四方の内側余白をそれぞれ指定する方法が最もスタンダードな記載方法であるが、下記のように省略することも可能である。
• 下記にCSSファイルの内容を記載する。

/* 四方に同じサイズの余白を設定したいとき */
h1 {
    padding: 四方の内側余白のピクセル数;
}

/* 縦の余白サイズと横の余白サイズの省略指定 */
h1 {
    padding: 上下の内側余白のピクセル数 左右の内側余白のピクセル数;
}

/* 上のみの内側余白指定 */
h1 {
    padding-top: 上側青矢印部分の余白のピクセル数;
}

/* 右のみの内側余白指定 */
h1 {
    padding-right: 右側青矢印部分の余白のピクセル数;
}

/* 下のみの内側余白指定 */
h1 {
    padding-bottom: 下側青矢印部分の余白のピクセル数;
}

/* 左のみの内側余白指定 */
h1 {
    padding-left: 左側青矢印部分の余白のピクセル数;
}

まとめ

• HTMLファイルにおける余白について大雑把にまとめた。
• 筆者に余裕ができたら本記事の内容を濃くしていく予定。
• marginとpaddingは実際にコーディングしてみるとわかる部分も多いので、余白を完全理解していなくても実際に書いてみることをお勧めする。
• HTMLファイルのひな型をこちらに記載しているので、余白を学ぶついでに適当なピクセル数で遊んでみることもありかもしれない。

付録

筆者が書いたHTMLやCSS系の記事のリンクを張る。
1. Visual Studio Code 導入方法 VSCode ダウンロードから日本語化対応まで～画像付き導入解説～
↑便利なエディタの導入方法
2. HTML の ひな型 の 記載方法
↑HTMLをコーディングするひな型の紹介
3. HTML の 要素 に 背景色 を設定する
↑HTMLの要素の背景の色を設定する方法

目的

• HTMLファイルのリストで箇条書きにされた内容を縦ではなく横並びに表示する方法をまとめる。

押さえるポイント

• 横並びに表示したいliタグかliタグに与えたクラス名を指定してCSSで設定する。
• CSSではfloatプロパティを使用する。
• 画面の左に寄せて横並びにしたいときはfloatプロパティでleftを指定する。
• 画面の右に寄せて横並びにしたいときはfloatプロパティでrightを指定する。

書き方の例

• 下記にHTMLファイルの内容を記載する。

<ul>
  <li>おはようございます。</li>
  <li>こんにちは。</li>
  <li>こんばんは。</li>
</ul>

• floatプロパティでleft(左)を指定する。 ※画面右側に表示したいときはrightを指定する。
• 下記にCSSファイルの内容を記載する。

li {
    list-style: none;
}

※今回は書き方の例より具体的な例が思い浮かばなかったため、具体的な例は記載しない。

目的

• HTMLファイルのリストで箇条書きされた内容の最初に自動で付与される黒点を表示しないようにする方法をまとめる。

押さえるポイント

• 黒点を表示したくないliタグかliタグに与えたクラス名を指定してCSSで設定する。
• CSSでは、list-styleプロパティを使用する。

書き方の例

• 下記にHTMLファイルの内容を記載する。

<ul>
  <li>おはようございます。</li>
  <li>こんにちは。</li>
  <li>こんばんは。</li>
</ul>

• list-styleプロパティでnoneを指定する。
• 下記にHTMLファイルの内容を記載する。

li {
    list-style: none;
}

※今回は書き方の例より具体的な例が思い浮かばなかったため、具体的な例は記載しない。

目的

• HTMLファイルのブロック要素の高さと幅を設定する方法をまとめる

押さえるポイント

• 高さや幅を変更したいブロック要素をCSSで指定してサイズを設定する。
• 高さの指定にはheightプロパティを使用する。
• 幅の指定にはwidthプロパティを使用する。
• 高さと幅はピクセル数を用いて設定する。

高さの設定の書き方の例(CSS)

ブロック要素の名前かブロック要素のクラス名{
    height: ピクセル数;
}

幅の設定の書き方の例(CSS)

ブロック要素の名前かブロック要素のクラス名{
    width: ピクセル数;
}

より具体的な例

h1要素の高さを100px、幅を500pxに設定する。

〜サンプルコード〜

• 下記にHTMLファイルの内容を記載する。

<h1>おはようございます。</h1>

• CSSで上記のHTMLファイルのh1要素のフォントをAvenir Nextにする設定を行う。
• 下記にCSSファイルの内容を記載する。

h1 {
    height: 100px;
    width: 500px:
}

目的

• HTMLファイルのリストで箇条書きされた内容の一行のみ文字の色を変更する方法をまとめる

押さえるポイント

• 変更したい行のliタグにクラスを与えてCSSにて文字の色を設定する。

書き方の例

• 下記にHTMLファイルの内容を記載する

<ul>
  <li>おはようございます。</li>
  <li class="selected">こんにちは。</li>
  <li>こんばんは。</li>
</ul>

• 下記にCSSファイルの内容を記載する。

.selected {
    color: カラーコード;
}

より具体的な例

箇条書きされたリストの｢おはようございます。｣の文字を赤色に設定する。

〜サンプルコード〜
- 下記にHTMLファイルの内容を記載する。

<ul>
  <li>おはようございます。</li>
  <li class="style">こんにちは。</li>
  <li>こんばんは。</li>
</ul>

• CSSで上記のHTMLファイルのstyleクラスに対して文字を赤色に設定する。
• 下記にCSSファイルの内容を記載する。

.style{
  color: red;
}

表題のとおりですが現在WEB制作現場に在籍していて主な業務内容はバックエンド実装というデザインスキルが乏しい私が試行錯誤しながらポートフォリオサイトを作成、公開するまでの道のりをここに記させて頂きます。

Links

LINK
GitHub

Program

• HTML
• CSS
• JavaScript

Library&Framework

• itypedjs
• jQuery
• chartjs
• fakeloader
• jquery.matchheight
• SVG-Car-Drift-Loader
• materialize.css

Tools

• Git
• GitHub

事前準備

コーディングフレームワークの選定

1からコーディングするのは作業日数的な問題等があったのでまずフレームワークの選定から入りました。
色々探してみた結果Bootstrapかmaterialize.cssで迷いました。
どちらもシンプルな実装が可能でポートフォリオサイトに最適なので、かなり悩んだのですがBootstrapは過去に実装経験があったので今回はmaterialize.cssを選択しました。

公開方法の選定

ポートフォリオサイトなので外部に公開しなければ自己満足で終わってしまうと思い

• GitHubPages
• Netlify
• Heroku
• レンタルサーバー
• AWS

上記5つで考えた結果コード管理をGitHubで行う予定だったのでそのままGitHubPagesを採用しました。
(GitHubPagesでポートフォリオ公開しているエンジニア様が多かったってのもあります。)
公開方法に関しては下記の記事参考にさせて頂きました。
GitHub Pages を使った静的サイトの公開方法が、とても簡単になっていた

バージョン管理フローの選定

GitHubを普段から使用していたので大まかなフローは
ローカルで作業->リモートにpush
だったのですが
未経験がWeb系転職成功したいならgithubでissue管理して開発しよう
を読みましてどうせならbranch切ってissue管理しようと試みました。
正確には作業中盤からissue管理を行いましたが、Gitにおけるプルリクエストに関する理解が深まり大変良い経験が出来ました。
(諸々の事情でmasterに直接コミットしているログがあるのは内緒です。。。)

ワイヤーフレーム＆仕様書の作成

正直に言います………
作成してません
理由としては

• 大体のイメージがあった(シンプルかつ単ページのサイト)
• ページ内の動きは調べて勉強がてら実装しようという甘い試み

ですが振り返るとある程度の実装内容を決めておかないと「あれもしたいこれもしたい状態」になりサイト完成が異常に延期されます。
また主にCSS JavaScriptの構造が乱れる原因になります。
上記の理由でこれからポートフォリオ作ってみようという方はある程度の実装内容を定めた上で作業される事をおすすめします。

作業フロー

materializecssテンプレートを理解

フレームワークを使用する際にまずは独自の文章構造の理解から入ったほうが良いかと思いテンプレート内の記述を閲覧して慣れる事から始めました。

テンプレート置き場

これによりmaterializecssに最初から搭載されているクラスの役割の理解やスムーズなレスポンシブコーディングが行えました。

大まかなレイアウトを決める

今回は大きく分けて

• TOP画面
• 自己紹介エリア
• スキルグラフエリア
• 制作物エリア
• コンタクトエリア で考えました。 あまりページの長さを長くしすぎるのは避けたかったので「お問い合わせフォーム」等は入れませんでした。

コーディング

各々のエリア内に入れる要素を考えながらコーディングを行いました。
特に気合を入れたのがTOP画面のタイプライターアニメーションです。

ローディングアニメーション
↓
タイプライターアニメーション
↓
ナビをフェードイン
は気に入ってる動きです。

不具合対応

実装しては検証して実装しては検証してと作業を行っていたのですがある程度作業が完了したあとにデバッグしてみると
レイアウトのズレやユーザビリティの低さが浮き出てきたのでGitHubでissue作成して１つずつマージしていきました。

公開作業

事前準備で選定していたGitHubPagesで公開して完了です。
公開方法の選定

振り返り

ポートフォリオ作成するに当たって「自分がどれくらいのスキルを有しているのか」や「今までの生き方」などの振り返りを行えました。
単純にポートフォリオという成果物、というだけではなく今後の課題や成長につながる経験が出来たと思います。
長々とご閲覧頂きありがとうございました。

はじめに

未来電子でインターンをしている大嵜です。
昔プログラミングの学習をやりかけていたのですが、挫折してしまい、久しぶりにプログラミングの学習を再開しました。
まずはProgateのHTML&CSSの初級編を学習して感じたことをまとめておきます。

プログラミング初心者であるため、内容に誤りがあるかもしれません。
もし、誤りがあれば修正するのでどんどん指摘してください。

Progateの感想

初心者にはとてもおすすめの学習サイトです。
開発環境を自分で用意する必要がないので、そこで諦めてしまうことがありません。
また、スライドで重要な点が分かりやすく説明されており、サクサク進めることができます。

はじめに引っかかった場所

学習していて最初に引っかかったのは float の考え方です。
float は要素を横並びにしたいときに使います。
例えば、

img{
  float: left;
}

とすると、画像が左に寄せられます。

floatのイメージはふわふわと浮いている状態です。
そのため、floatをつけた要素の次の要素がある場合、floatをつけた要素の下に潜り込んでしまいます。
これを解消するためには、次の要素にclearプロパティをつければよいです。

まとめ

今回は、最初の学習で気になった点についてまとめてみました。
今後どんどん気になる点は出てくると思うので、自分の備忘録としてもまとめていこうと思います。

まずはじめに

未来電子テクノロジーでインターンをしている＠reies1204です。
まだProgeteを触り始めて1週間と経っていない超初心者ですが、その中で学んだことを少しでもまとめてみようと思います。
ただし、プログラミング初心者であるため、内容に誤りがあるかもしれません。
もし、誤りがあれば修正するのでどんどん指摘してください。

現状

Progateの学習も中級編が終わり、道場編に入りましたが、早速つまづいています。
最初は何から書けばいいのかわからないといった状態です。
でも逆に何から書けばいいのかを考えたときに、自分はレイアウトについて理解が甘かったなと思いました。
そこで今回は自分のレイアウトの知識を整理してみようと思います。
あくまで今回は初級編でのレイアウトに関してのみまとめます。

レイアウトの作り方

まずは<html>要素の中に<head>要素と<body>要素を入れます。
　<head>要素の中には文字コード、ページタイトル、CSSの読み込みを書きます。

　<body>要素はヘッダー（header)、メイン（main)、フッター（footer）を<div>要素で
　それぞれ分割します。

ヘッダーの枠組み

ヘッダー部分は「header-logo」と「header-list」の二つの<div>要素で構成します。

メインの枠組み

メイン部分は「copy-container」、「contents」、「contact-form」の三つの<div>要素で構成します。

フッターの枠組み

フッター部分は「footer-logo」と「footer-list」の二つの<div>要素で構成します。

以上実際に書いてみると

<html>

 <head>
  1,文字コード
  2,ページタイトル
  3,CSSの読み込み
 </head>

 <body>
   <div class="header">
      <div class="header-logo">あいうえお</div>
      <div class="header-list"> </div>
   </div> 

   <div class="main">
      <div class="copy-container"> </div>
      <div class="contents"> </div>
      <div class="contact-form"> </div>
   </div>

   <div class="footer">
      <div class="footer-logo">かきくけこ</div>
　　 　<div class="footer-list"> </div>
   </div>
 </body>

</html>

大まかにこんな感じになります。

まとめ

自力でやってみるということに対して、思った以上になにもできない部分に割と萎えますが、一方で楽しさも感じているので頑張って続けていこうと思います。
Quiitaの書き方もまだまだ下手なので要勉強ですね。

目的

• Live ServerでリアルタイムでHTMLコーディングしたいのに「open a folder or workspace live server...」と出てる現象の解決

この記事のターゲット

• Live Serverを用いてHTMLとCSSをコーディングしたいのにサーバを起動できない方
• Live Serverを起動しようとしてもVisual Studio Codeの画面左下に「Go Live」の文字が出ない方
• エディタ画面右クリックでサーバを起動させようとしても「open a folder or workspace live server...」と出力されてサーバが起動しない方

前提条件

• 自分のPCにVisual Studio Codeが導入されていること。(まだ導入されていない方はこちらを参考にインストール)
• Visual Studio CodeのプラグインであるLive Serverがインストールされていること。
• ファイルの拡張子(.txtや.exeなど)が表示される設定になっていること。(まだファイル名に拡張子が表示されていない方はこちらを参考に拡張子を表示)
  ※本記事はWindows10での記載方法をまとめるため、macOS、Linuxは参考にならない場合有り。

必要ファイルの準備

任意のフォルダに下記の手順でLive Serverテスト用のフォルダとファイルを作成する。

• 自分のPCの任意のフォルダに移動する。
• 「practice」フォルダを作成する。
• 「practice」フォルダの中に「css」フォルダと「index.html」ファイルを作成する。
• 「css」フォルダの中に「css-test.css」ファイルを作成する。
• 「index.html」をVisual Studio Codeで開き下記の内容を記載する。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Live Server test</title>
    <link rel="stylesheet" href="./css/css-test.css">
  </head>
  <body>
    <header>
    </header>
    <div class="main">
      <h1>Hello Live Server!</h1>
    </div>
    <footer>
    </footer>
  </body>
</html>

• 「css-test.css」をVisual Studio Codeで開き下記の内容を記載する。

.main h1 {
  font-style: 32px;
}

• 下記のフォルダ構成になっていることを確認する。

practice
  ┗index.html
  ┗css
    ┗css-test.css

• Visual Studio Codeを一旦終了する。

準備したファイルとフォルダをVisual Studio Codeで開く

※筆者のスクリーンショットでは設定済みのために画面右下に「Go Live」の文字が出てしまっています。
1. Visual Studio Code画面の左上の「ファイル(F)」をクリック

1. 「フォルダーを開く...」 → 先ほど作成した「practice」フォルダを選択 → 「フォルダーの選択」をクリック
   

2. 画像の矢印がさしているVisual Studio Code画面の色の境目付近にマウスカーソルをもっていくと両端矢印が表示される → 左クリックを押しっぱなしで右にマウスを動かす。
   

3. 下記画面の赤枠ようにサイトバーが表示され、黄枠のように「practice」フォルダのファイル構成が表示されたことを確認する。
   

4. 画面右下に「Go Live」が表示されるため、「Go Live」をクリックする。
   

5. ブラウザが起動し「Hello Live Server!」が表示される。Visual Studio Codeのエディタ画面には「index.html」が表示される。
   
   

6. Visual Studio Codeの「index.html」に記載されているHello Live Server!をHello World!に変更する。
   

7. 「index.html」の記載を修正に応じでリアルタイムでの表示が変化すればLive Serverが正常に動作している。
   
   ※リアルタイムで変化しないときはLive Serverを再度起動させてみる。(Visual Studio Codeのエディタ画面で右クリック → 「Open with Live Server」)
   

まとめ

• Live Serverを使用する際は、HTMLファイルのみをVisual Studio Codeで開くのではなく、HTMLファイルが入っているフォルダごとVisual Studio Codeで読み込む必要がある

余談

• 本件を解決するのに少し時間がかかり、あまりほかサイトでも説明されていなかったため早急に本記事を書いたため日本語や英語のスペルミス、わかりにくい文章があるかもしれません。