20201212のHTMLに関する記事は7件です。

投稿日：2020-12-12T21:43:19+09:00

Bootstrap(v5)をカスタマイズして必要な機能だけ利用する

はじめに

BootstrapはTwitter社が提供するフロントエンドUIフレームワークで、モバイルファーストのレスポンシブサイトを素早く設計・構築できることを強みとしています。
非常に多機能で一貫したシステムとなっている反面、デザインや実装にもさまざまな制約が生まれるため、Webサイト制作の実案件ではなかなか取り入れにくい存在です。

そこで今回は、そんなBootstrapが備えているさまざまな機能のうち「必要なものだけ」を効率的に利用する手法と、Webサイト制作に利用できるボイラープレートを紹介します。

※本記事ではBootstrap v5.0.0-alpha1を取り扱います。

基本的なBootstrapの利用法とそのデメリット

公式サイトにも掲載されている通り、基本的な利用方法としては下記のようにHTMLソース内にCDNの記述を追加するか、コンパイル済みのファイルをダウンロードして自分のサーバにアップするかのどちらかになります。
CSS
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous">

<link rel="stylesheet" href="/path/to/css/bootstrap.min.css">
この場合、Bootstrapが持つすべての機能を読み込むことになるため、そのWebサイト上では必要のないUIコンポーネントなども含むこととなり、ファイル容量も大きくなってしまいます。

ソースファイルをコンパイルして独自CSSを生成する

Bootstrapのソースファイル（Sass）を自前でコンパイルすることで、必要な機能だけを抽出した独自のCSSを生成し、サイト上で利用することができます。

詳細は公式サイトにも掲載されていますが、今回は簡単にカスタマイズを試せるようNode.js/gulpを利用したボイラープレートを作成したので、そちらをもとに解説をおこないます。

https://github.com/shouchida/boilerplate-with-bootstrap

インストールや開発コマンドの実行方法についてはREADME.mdを参照してください。

ディレクトリ構成（抜粋）は下記のようになっています。
開発時には原則 src/ ディレクトリ内のファイルを編集します。
dist/ はコンパイル後の出力先、static/ は画像やJSライブラリなど静的ファイルの格納先となりますが、本記事では説明を省略します。
ディレクトリ構成（抜粋）
.
├── dist/
├── src/
│   ├── assets/
│   │   ├── css/
│   │   │   ├── _partials/
│   │   │   │   ├── _base.scss
│   │   │   │   └── _variables.scss
│   │   │   ├── bootstrap.custom.scss
│   │   │   ├── main.scss
│   │   │   └── sub.scss
│   │   └── js/
│   │       └── main.js
│   └── index.html
└── static/
HTMLファイル内では下記のように2つのCSSを読み込んでいます。
/assets/css/main.css はそのサイトの共通CSSを想定しています。
src/index.html
<link rel="stylesheet" href="/assets/css/bootstrap.custom.css">
<link rel="stylesheet" href="/assets/css/main.css">
bootstrap.custom.scss

src/ ディレクトリ内の bootstrap.custom.scss にて、Bootstrap側で用意されている機能ごとのSassファイルをimportしています。
不要な機能やコンポーネントをコメントアウトしてコンパイルすることで、そのサイトに最適化されたCSSを生成できます。

例えば、

Reboot（要素ごとの標準スタイル）

グリッドシステム

ヘルパーやユーティリティ（汎用class）

のみを使用したい場合は下記のようになります。
src/assets/css/bootstrap.custom.scss
// Override default variables
@import "_partials/variables";

// Configuration
@import "../../../node_modules/bootstrap/scss/functions";
@import "../../../node_modules/bootstrap/scss/variables";
@import "../../../node_modules/bootstrap/scss/mixins";
@import "../../../node_modules/bootstrap/scss/utilities";

// Layout & components
@import "../../../node_modules/bootstrap/scss/root";
@import "../../../node_modules/bootstrap/scss/reboot";
// @import "../../../node_modules/bootstrap/scss/type";
// @import "../../../node_modules/bootstrap/scss/images";
@import "../../../node_modules/bootstrap/scss/containers";
@import "../../../node_modules/bootstrap/scss/grid";
// @import "../../../node_modules/bootstrap/scss/tables";
// @import "../../../node_modules/bootstrap/scss/forms";
// @import "../../../node_modules/bootstrap/scss/buttons";
// @import "../../../node_modules/bootstrap/scss/transitions";
// @import "../../../node_modules/bootstrap/scss/dropdown";
// @import "../../../node_modules/bootstrap/scss/button-group";
// @import "../../../node_modules/bootstrap/scss/nav";
// @import "../../../node_modules/bootstrap/scss/navbar";
// @import "../../../node_modules/bootstrap/scss/card";
// @import "../../../node_modules/bootstrap/scss/breadcrumb";
// @import "../../../node_modules/bootstrap/scss/pagination";
// @import "../../../node_modules/bootstrap/scss/badge";
// @import "../../../node_modules/bootstrap/scss/alert";
// @import "../../../node_modules/bootstrap/scss/progress";
// @import "../../../node_modules/bootstrap/scss/list-group";
// @import "../../../node_modules/bootstrap/scss/close";
// @import "../../../node_modules/bootstrap/scss/toasts";
// @import "../../../node_modules/bootstrap/scss/modal";
// @import "../../../node_modules/bootstrap/scss/tooltip";
// @import "../../../node_modules/bootstrap/scss/popover";
// @import "../../../node_modules/bootstrap/scss/carousel";
// @import "../../../node_modules/bootstrap/scss/spinners";

// Helpers
@import "../../../node_modules/bootstrap/scss/helpers";

// Utilities
@import "../../../node_modules/bootstrap/scss/utilities/api";
もし、新たに利用したい機能が出てきた場合は、該当するimport文のコメントアウトを外して再度コンパイルします。

_variables.scss

Bootstrap側で定義された各コンポーネントのスタイルを調整したい場合は、src/ ディレクトリ内の _variables.scss にてSass変数を上書きします。
src/assets/css/_partials/_variables.scss
$red: #cc1414;
$orange: #ec5f1f;

$font-family-sans-serif: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
$font-size-root: 62.5%;
なお、Bootstrap側のデフォルト変数は node_modules/bootstrap/scss/_variables.scss で定義されています。

おわりに

Bootstrapは一貫したレイアウトやUIコンポーネントを提供するフレームワークのため、複雑で個性的なデザインや機能が求められるWebサイト制作の現場ではあまり利用されているイメージはありません。
一方で、Bootstrapのよく練られたグリッドシステムや幅広く用意されたユーティリティclassは魅力的であり、それらと同等のものをイチから作るのはかなりの手間がかかります。
Sassの仕組みを上手く利用することで、Bootstrapの必要な機能だけをWebサイト制作に活用することが可能になります。

参考リンク

Bootstrap5

Bootstrap（安定版）

　 Tweet
Qiitaで続きを読む

投稿日：2020-12-12T20:52:35+09:00

【初学者向け】floatの解除方法

floatの解除方法についての記事です。後続の要素にclear:both;をすることは皆さんご存知かと思いますが、そもそも後続要素がない場合などがあると思います。その場合の方法を紹介します。
※一応初学者向けに書いてます。

コード紹介

初学者さんは一緒にコードをいじりながらやると、floatの理解もできていいかと思います。使用画像を以下に置いておきます。
html
<section>
  <h2>ハトくん、おそらをとぶのまき</h2>
  <img src="./img/chara1.jpeg" alt="ハトくんの画像">
  <p>floatをしていないテキストは地面びっしりとくっついているイメージです。 </p>
</section>
css
body{
  background: beige;
}
section{
  background: aquamarine;
  width: 500px;
  margin: 0 auto;
  padding: 50px;
  position: relative;
}
h2{
  margin: 0;
  margin-bottom: 50px;
  text-align: center;
  font-family: "Nico Moji";
}
img{
  width: 200px;
}
section p:first-of-type{
  background: chocolate;
  padding: 10px 0;
  color: white;
  font-weight: bold;
}
コードと素材が用意できたら、画面を確認します。ちなみにリセットCSSなしです。

そしたら画像とテキストを横並べにします今回は題材でもあるfloatを使います。
css(追加箇所のみ表示)
img{
  width: 200px;
  float: left;
  margin-right: 50px;
}
そうするとどうでしょう？段落要素が画像の後ろへ回り込んでいるのがわかりますか？
floatをかけた画像は要素そのもが浮いていると言う状態です。
この浮いてるっていう表現が非常に初学者泣かせな表現なのですが、数学で言うところのZ軸です。理系の方この表現でわかりますよねｗ？

図を頑張って作りました。縦と横、そして奥行きの方向があることがわかりますのでしょうか？
floatをかけるとこの奥行きの方向に要素が動ようなイメージになります。
もう１つイメージを紹介します。

これは画像にアニメーションを追加して、float要素が浮いてることを表現しました。
アニメーションの途中で、段落要素の背景（茶色）が見えるのがわかりまりますか？これは段落要素が画像の後ろへ回り込んだことを示しています。

さてここからが本題です。浮いてしまったが故に、画像が要素の外にはみ出てしまってます。これを解消する方法を次の章で紹介します。

floatの解除

clearfixを使う。

まず昔からの手法で、clearfixというCSSの合わせ技みたいなのを使います。
擬似要素と言うのを使います。今回の場合clear:both;をかければ、はみ出た部分を元に戻すことができそうですが、肝心のclear:both;をかける要素がありません。
なので擬似的に要素を作成します。

やり方としては、sectionにクラスを追加し、追加したクラスにclearfixを書いていきます。
html
<section class="cf">
  <h2>ハトくん、おそらをとぶのまき</h2>
  <img src="./img/chara1.jpeg" alt="ハトくんの画像">
  <p>floatをしていないテキストは地面びっしりとくっついているイメージです。 </p>
</section>
css
.cf:after{
  content: "";
  display: block;
  clear: both; 
}
図解化するとこんな感じになります。

これで枠内に収まりました。

overflow:hidden;を使う。

多少制限はありますが、これが一番楽なやり方です。
※先程のclearfixは消して下さい。
html
<section>
  <h2>ハトくん、おそらをとぶのまき</h2>
  <img src="./img/chara1.jpeg" alt="ハトくんの画像">
  <p>floatをしていないテキストは地面びっしりとくっついているイメージです。 </p>
</section>
css
section{
  background: aquamarine;
  width: 500px;
  margin: 0 auto;
  padding: 50px;
  overflow: hidden;
}
clearfixが後続の要に対して使うのに対し、overflowは親要素に対して使用します。
overflow:hidden;は、はみ出た要素を隠すのに使いますが、実はもう１つ特性があります。

こちらの説明で、Z軸つまり奥行きがあると言うことを説明しましたが、overflow:hidden;には付けた要素の奥行きを作成することができます。

sectionが平面から立体的な箱になったというとわかりやすいでしょうか？これを図解化しました。

このようにoverflow:hidden;をかけた要素が変化していったことがわかるかと思います。

最後に

floatの解除方法の応用編みたいになりましたが、どちらも非常によく使われている手法なので覚えておくといいでしょう。

今回はおまけとして、アニメーションを加えた最終的なコードを載せておきますので、是非参考にして下さい。お疲れ様でした。
html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>float-animation</title>
  <link href="https://fonts.googleapis.com/earlyaccess/nicomoji.css" rel="stylesheet">
  
  <link rel="stylesheet" href="./css/style.css">
</head>
<body>
<section>
  <h2>ハトくん、おそらをとぶのまき</h2>
  <img src="./img/chara1.jpeg" alt="ハトくんの画像">
  <p>floatをしていないテキストは地面びっしりとくっついているイメージです。 </p>
  <p class="comment">ふわ<br>ふわ</p>
  <p class="comment">びし！</p>
</section>
</body>
</html>
css
@charset "UTF-8";
body{
  background: beige;
}
section{
  background: aquamarine;
  width: 500px;
  margin: 0 auto;
  padding: 50px;
  position: relative;
  overflow: hidden;
}
/* .cf:after{
  content: "";
  display: block;
  clear: both; 
} */
h2{
  margin: 0;
  margin-bottom: 50px;
  text-align: center;
  font-family: "Nico Moji";
}
@keyframes fly{
  0%{transform: scale(0.9);}
  100%{transform: scale(1.1);}
}
img{
  width: 200px;
  float: left;
  margin-right: 50px;
  animation: fly 1s infinite alternate;
}
@keyframes sound-effect{
  0%{
    top: 150px;
    left: 250px;
    transform: rotate(30deg);
    opacity: 0;
  }
  50%{
    top: 150px;
    left: 240px;
    transform: rotate(30deg);
    opacity: 1;
  }
  51%{
    top: 150px;
    left: 250px;
    transform: rotate(30deg);
    opacity: 0;
  }
  52%{
    top: 100px;
    left: 0px;
    transform: rotate(-30deg);
    opacity: 0;
  }
  100%{
    top: 100px;
    left: 10px;
    transform: rotate(-30deg);
    opacity: 1;
  }
}
section p.comment:nth-of-type(2){
  position: absolute;
  animation: sound-effect 3s infinite;
  font-family: "Nico Moji";
  font-size: 30px;
  color: gray;
  text-shadow: 1px 1px 5px white, -1px -1px 5px white, 0 0 10px white;
}
@keyframes shaking{
  0% {transform: translate(0px, 0px) rotateZ(0deg)}
  1% {transform: translate(2px, 2px) rotateZ(1deg)}
  2% {transform: translate(0px, 2px) rotateZ(0deg)}
  3% {transform: translate(2px, 0px) rotateZ(-1deg)}
  4% {transform: translate(0px, 0px) rotateZ(0deg)}
  5% {transform: translate(2px, 2px) rotateZ(1deg)}
  6% {transform: translate(0px, 2px) rotateZ(0deg)}
  7% {transform: translate(2px, 0px) rotateZ(-1deg)}
  8% {transform: translate(0px, 0px) rotateZ(0deg)}
  9% {transform: translate(2px, 2px) rotateZ(1deg)}
  10% {transform: translate(0px, 2px) rotateZ(0deg)}
  11% {transform: translate(2px, 0px) rotateZ(-1deg)}
  12% {transform: translate(0px, 0px) rotateZ(0deg)}
  100% {transform: translate(0px, 0px) rotateZ(0deg)}
}
section p:first-of-type{
  background: chocolate;
  padding: 10px 0;
  color: white;
  font-weight: bold;
}
section p.comment:last-of-type{
  position: absolute;
  top: 65px;
  right: 20px;
  font-size: 40px;
  color: red;
  text-shadow: 1px 1px 5px yellow, -1px -1px 5px yellow, 0 0 10px yellow;
  font-family: "Nico Moji";
  animation: shaking 1s infinite;
}

　 Tweet
Qiitaで続きを読む

投稿日：2020-12-12T18:56:30+09:00

AWSを利用してWebページを作ってみよう

目次

1.はじめに
 2.全体スケジュール
 3.AWS全体学習
 4.構成図
 5.インフラチーム学習内容-Part1
6.インフラチーム学習内容-Part2
7.フロントチーム学習内容-Part1
8.フロントチーム学習内容-Part2
9.完成したサイト
 10.まとめ

1.はじめに

株式会社エニプラでは、社内のチームごとにテーマを決め、
毎月行われるチーム会でテーマに沿った活動を行っています。
チーム会で行った内容は、年末に「エニプラアワード」という場で
全社員や来期の新卒に向けて発表を行っています。

今年度松田チームでは「AWS学習&Webページ作成」をテーマに活動してきました。
テーマを検討、決定した背景として以下の4点あります。

1．AWSに関する資格取得を目指す人が増えてきたこと
2．AWSというサービス自体は聞いたことがあるが、具体的なイメージが湧かない
3．Web・HTMLについて学習してみたい
4．取り組んだ成果を発表する上で実際に見られるものを作りたい

上記の4点をまとめた結果、「AWSを利用してWebページを作ってみよう」ということになりました。

2.全体スケジュール

約半年のチーム会活動全体を通して
図のようなスケジュールでエニプラアワードに向けて取り組みました。

まず、5-7月の期間でチーム全体でAWSそのものについての座学や、
Webページ作成に必要なインフラ・フロントの基礎知識を学習しました。
8月以降は自分の興味がある分野を選び、インフラチームとフロントチームに分かれ、
Webサーバ構築やWebページのコーディングに向けて、座学と実作業をそれぞれチームにて実施しました。

3.AWS全体学習

次に、実際にどのような内容の座学や実作業を行っていたのかについて紹介します。
まず、各チームに分かれる前にAWSについての学習を行いました。
下記にある画像は、『AWSome Day』と呼ばれる公式オンラインセミナーです。
セミナーの内容をベースに、AWSのビジネスモデル(従量課金制等)であったり、
システムを構築するうえでのオンプレとパブリッククラウドの考え方の違いや、
今回触ることになるAWS上の主要なリソースについて学習しました。

実際に皆が使えるようにAWS上にユーザーを作成していたので、
ログインしてAWSのWebコンソールを見てみるといったことも併せて行いました。

AWSome Dayとは

『AWSome Day』は定期的に実施されている公式オンラインセミナーです。
内容としては、AWS入門者向けにAWSの概要や基礎知識について解説するもので、
社内で実際に参加した人からは非常に解りやすい内容であったという感想が挙がっています。
これからクラウドを学ぶ人には、オススメです。

セミナー開催情報：AWSome Day

4.構成図

実際に作成したAWSの構成図がこちらになります。
要件として、無料枠の範囲内、つまり、お金がかからない範囲でやること、
Webサーバは1台で、Webページに掲載する画像はS3と呼ばれるAWSのストレージサービスに
配置してサーバから参照させるといった構成です。

5.インフラチーム学習内容-Part1

ここからはインフラチーム・フロントチームが、それぞれ行った学習・実作業について
説明させていただきます。
まず初めに、インフラチームは『Webサーバを構築する』というのが目標です。
実際に、構築業務経験があるメンバーが少ないため、
なるべく実際の構築業務に近い流れで行うことをコンセプトに、下記の要件を提示しました。

要件の確認

ミドルウェアとしてApacheを利用する

通信に使用するポートは80

ドキュメントルートは/var/www/html/＜作成したフォルダ名＞にする

インスタンス起動時にApacheが自動実行するようにする

これらを踏まえて、実際にWebサーバとして動作させるためには、
どういった作業が必要になるのかを洗い出しました。
メンバー間で協力しながら『Apacheとは何か』というところから、
インストール方法や設定方法、コンフィグの変更箇所などを洗い出しました。

Tips：Apacheとは

Webサーバ用ミドルウェアの一つ。
オープンソースソフトウェアとして公開され、無償で利用できる。

6.インフラチーム学習内容-Part2

要件の確認と作業の整理をしたのち、構築時に必要になるコマンドを調査し簡単な手順書を用意しました。
今回、OSはAmazon Linux2と呼ばれるAWS EC2インスタンス上で利用できるLinuxベースのOSです。
構築の流れとしては、デフォルトパッケージのアップデートから始まり、
Apacheのインストールと設定変更、それを反映するためのサービス再起動です。
手順として整理したコマンドは、下記記述の通りです。

コマンド整理
 1. パッケージアップデート
# yum update
 2．Apacheのインストール
# yum install httpd
 3．ポートが80となっていることを確認する
# cat /etc/httpd/conf/httpd.conf | grep Listen
 4．ドキュメントルートを"/var/www/html/＜作成したフォルダ名＞"配下に作成
# vi /etc/httpd/conf/httpd.conf
 5．サービス再起動
# systemctl restart httpd
# systemctl status httpd
 6．Apacheが自動起動するよう設定
# systemctl enable httpd.service
EC2インスタンスに接続して実際に構築

WebブラウザからグローバルIPにアクセスし、サンプルページが表示されることを確認

最終的にWebブラウザからAWS上のサーバにアクセスし、
デフォルトのサンプルページが表示されることを確認する。

以上がインフラチームで行った内容となります。

7.フロントチーム学習内容-Part1

続いて、フロントチームの学習内容を紹介いたします。
Webページを作成するために、まずWebページが何の言語を使用して
作成されているかを調査しました。
調査の結果、主にHTML,CSS,JavaScriptが使用されていることが分かりました。

HTMLとは

HTMLはウェブページを作成するために作られた言語です。

HTMLの学習内容としては、主に各HTMLタグの役割について学習しました。
HTMLタグはブラウザがWebページの構造を理解するために使用されています。
各ブラウザ毎に、表示に差が出るSelectbox等のHTMLタグを使用して
HTMLに従ってブラウザがWebページを理解し、表示していることを確認しました。

CSSとは

CSSはウェブページのスタイルを指定するための言語です。
HTMLと併せて文字や枠の色を変更したり、図形を作成したりと、装飾をするために使用されています。
CSSの学習内容としては、各プロパティの意味や使い方を学習しました。

JavaScriptとは

JavaScriptはプログラミング言語の一つで、Webページに動的な表現を付けるために使用されています。
今回は時間の都合上使用することができなかったのですが、次の機会があれば使いたい要素の一つです。
調査後、サンプルページを参考にレイアウトについて学習を進めました。
これはヘッダーやメインコンテンツ等、何処にどの要素があるかを理解しておくことが、
HTMLを書いていく上で非常に重要なためです。

8.フロントチーム学習内容-Part2

レイアウトの確認が終わった後、まずはVisualStudioCodeの使い方を学びました。
フロントチームでは、VScodeを触れたことがあるメンバーがあまりいなかったためです。
VScodeは予測変換や拡張機能が優秀なため、便利な機能をできるだけ使用する方向で進めました。

その後、実際にコーディングを行いました。
コーディング中は記載したHTML要素の配置やCSSの適用状況など、適宜ブラウザで確認しつつ行いました。
想定外の画面になっている箇所は、ブラウザのデベロッパーツール等で確認と修正を行い、
Webサーバに乗せるソースを完成させました。

以上がフロントチームで行った内容となります。

9.完成したサイト

インフラチームが作成したWebサーバに、フロントチームが作成したソースを配置し、
実際に完成したサイトがこちらになります。

※上記画像は、スマートフォンの操作画面となります。

実際のチーム会での活動風景や、実施内容が掲載されています。
スマートフォンで表示させた際にも自動的にリサイズされるような作りになっています。

10.まとめ

2020年エニプラアワードテーマは『AWS学習&Webページ作成』でした。
AWSオンラインカンファレンスの内容をベースにチーム全体でAWS基礎を学習しました。
インフラチームでWebサーバを、フロントチームでWebページのソースを作成しました。

半年間の活動を通して

AWSへの理解が深まり、個人でも触ってみようと思った。

HTMLとCSSでWebページが表示されていることが理解できた。
というご意見もありました。
自分もAWSのセミナーは興味あるものなので、機会がある際に参加してみたいです。

以上で、ご紹介を終わります。ありがとうございました。

　 Tweet
Qiitaで続きを読む

投稿日：2020-12-12T14:45:42+09:00

【ミッション】3分でゼロからwebページを公開する

序文

　目的

GitHub Pagesを使い、ゼロからwebページを作成する方法を紹介します。
(GitHubへの登録からはじめます)
私は10分くらいかかってしまいましたが、頑張れば3分でできると思います。
本当に3分でwebページが作れた!!という方が居たらコメント頂ければ嬉しいです。

GitHub Pages

GitHub PagesはGitHubリポジトリをwebページに変えてくれるサービスです。
webページのアドレスはhttps://[username].github.ioに固定で自由に選ぶことはできませんが、短時間での個人(団体)ウェブサイトの作成・公開を可能にします。

公開後のイメージ

*この後、もっと時間をかけてwebアプリケーションを作りました。¹

1. GitHubアカウントの登録

1.1 ユーザー情報の入力

https://github.com/joinにてGitHubアカウントを取得してください。アカウント取得には、3つの情報(ユーザー名、メールアドレス、パスワード)の入力が必要です。最後に、認証テストがあり、渦巻銀河の選択を求められます。²

1.2 メールアドレスの認証

登録したメールアドレスに確認メールが届きます。青いボタンをクリックして認証を完了してください。

この認証をしないと、GitHubのウェブぺージ上で警告が表示されます。

2. ウェブページの作成

2.1 リポジトリの作成

1で登録したアカウントでGitHubにログインし、リポジトリ(Repositories)を作成します。リポジトリはファイルやプログラムの保管場所です。ホーム画面のリポジトリの項目から、緑色のボタン(New)をクリックすると、新規のリポジトリ作成画面が開きます。

ここで大事なことは、リポジトリの名前を[username].github.ioとすることです。他の項目は各々自由に選択してください(公開かプライベートの選択以外はチェックボックスを全て外してしまうのがいちばん手っ取り早いです)。全てのチェックボタンの確認をし、緑色のボタン(Create repository)をクリックします。

2.2 index.htmlの作成

リポジトリが作成されると、画面が変わります。そのままファイルの追加(Add file)を選択し、ファイルの新規作成(Create new fi...)ボタンをクリックします。

新規ファイルの追加画面に移ります。いちばん上のファイル名を入力します(ここでは慣習的にindex.htmlとします)。次に、ファイルの中身となるテキストを入力します。今回は素早いwebページの作成・公開を目標にしているのでHello Worldだけ入力します。最後に、いちばん下にある緑色のボタン(Commit new file)をクリックします。

3. 作成したwebページを見る

https://[username].github.ioにアクセスしてください。先ほど作成したwebページが表示されます。

詳細はこちらへJavascriptでゼロからwebアプリケーションを作ってみた(仮、準備中)。 ↩

渦巻銀河の判別が少々難しく感じるのは私だけでしょうか。ちなみに、こちらで銀河判別のトレーニングができます。 ↩

　 Tweet
Qiitaで続きを読む

投稿日：2020-12-12T14:23:48+09:00

npmパッケージ検索サイトからの使い方を初心者が解説してみた！

node.jsのパッケージが無料で使えるサイト

npmという無料で使えるnode.jsのパッケージまとめサイト
npm build amazing things

このサイトから必要な情報を取り出し実装するまでを、node初心者が解説します！

初心者なのでスムーズには扱えなかった

node.jsのパッケージを無料で提供してくれているとは言っても、使い方がわからなかったので
覚書として記録しておこうと思います。

使ってみたい！と思ったのはvue.jsのパッケージであるdraggbale

デモサイトは
https://david-desmaisons.github.io/draggable-example/

vue.jsを利用して、ドラッグ&ドラッグが簡単に実装できるみたいです。
これを使ってタスク管理をしてみたい！と思ったので使ってみる事にしました。

ラッキー！サンプルコードがgithubに上がってる

Hello.vue
というフォルダに入っていました。
<template>
  <div class="fluid container">
    <div class="form-group form-group-lg panel panel-default">
      <div class="panel-heading">
        <h3 class="panel-title">Sortable control</h3>
      </div>
      <div class="panel-body">
        <div class="checkbox">
          <label><input type="checkbox" v-model="editable">Enable drag and drop</label>
        </div>
        <button type="button" class="btn btn-default" @click="orderList">Sort by original order</button>
      </div>
    </div>

    <div class="col-md-3">
      <draggable class="list-group" tag="ul" v-model="list" v-bind="dragOptions" :move="onMove" @start="isDragging=true" @end="isDragging=false">
        <transition-group type="transition" :name="'flip-list'">
          <li class="list-group-item" v-for="element in list" :key="element.order">
            <i :class="element.fixed? 'fa fa-anchor' : 'glyphicon glyphicon-pushpin'" @click=" element.fixed=! element.fixed" aria-hidden="true"></i>
            {{element.name}}
            <span class="badge">{{element.order}}</span>
          </li>
        </transition-group>
      </draggable>
    </div>

    <div class="col-md-3">
      <draggable element="span" v-model="list2" v-bind="dragOptions" :move="onMove">
        <transition-group name="no" class="list-group" tag="ul">
          <li class="list-group-item" v-for="element in list2" :key="element.order">
            <i :class="element.fixed? 'fa fa-anchor' : 'glyphicon glyphicon-pushpin'" @click=" element.fixed=! element.fixed" aria-hidden="true"></i>
            {{element.name}}
            <span class="badge">{{element.order}}</span>
          </li>
        </transition-group>
      </draggable>
    </div>

    <div class="list-group col-md-3">
      <pre>{{listString}}</pre>
    </div>
    <div class="list-group col-md-3">
      <pre>{{list2String}}</pre>
    </div>
  </div>
</template>

<script>
import draggable from "vuedraggable";
const message = [
  "vue.draggable",
  "draggable",
  "component",
  "for",
  "vue.js 2.0",
  "based",
  "on",
  "Sortablejs"
];

export default {
  name: "hello",
  components: {
    draggable
  },
  data() {
    return {
      list: message.map((name, index) => {
        return { name, order: index + 1, fixed: false };
      }),
      list2: [],
      editable: true,
      isDragging: false,
      delayedDragging: false
    };
  },
  methods: {
    orderList() {
      this.list = this.list.sort((one, two) => {
        return one.order - two.order;
      });
    },
    onMove({ relatedContext, draggedContext }) {
      const relatedElement = relatedContext.element;
      const draggedElement = draggedContext.element;
      return (
        (!relatedElement || !relatedElement.fixed) && !draggedElement.fixed
      );
    }
  },
  computed: {
    dragOptions() {
      return {
        animation: 0,
        group: "description",
        disabled: !this.editable,
        ghostClass: "ghost"
      };
    },
    listString() {
      return JSON.stringify(this.list, null, 2);
    },
    list2String() {
      return JSON.stringify(this.list2, null, 2);
    }
  },
  watch: {
    isDragging(newValue) {
      if (newValue) {
        this.delayedDragging = true;
        return;
      }
      this.$nextTick(() => {
        this.delayedDragging = false;
      });
    }
  }
};
</script>

<style>
.flip-list-move {
  transition: transform 0.5s;
}

.no-move {
  transition: transform 0s;
}

.ghost {
  opacity: 0.5;
  background: #c8ebfb;
}

.list-group {
  min-height: 20px;
}

.list-group-item {
  cursor: move;
}

.list-group-item i {
  cursor: pointer;
}
</style>
これだけでは動きませんでした。
当たり前ですよね。

githubからファイルをインストール

githubから、まずはURLをコピーします。

使用するツールはVisual Studio Code
Visuak Studio Codeのターミナルを立ち上げ

以下のコマンドを打ちました。
git clone https://github.com/David-Desmaisons/draggable-example.git
cloneが完了するとまるっと一式追加されていました。

必要npmインストール / run serv / build

が必要でした。最後まできちんと見ないといけないですね。
また、githubからcloneしたファイルの【README.md】にもコマンドの手順が記載されていました。

https://github.com/David-Desmaisons/draggable-exampleの最下部にコマンドが書かれています。

順番にコマンドを打っていきます

draggableを動かすために必要な、他のnpmを一括インストールします。
npm install
結果。【found 0】間違えてそうな。。。
cd draggable-example
draggable-exampleのフォルダに移動してからinstallをしないといけなかったです。
沢山インストールされたようです。

node_moduleフォルダが生成され、大量のnmpがインストールされました。

次はブラウザで動きが見れるようにサーバーを立ち上げます。
npm run serve
ローカルサーバー立ち上がりました！

localhost:8080でデモサイトとまったく同じものが出来上がりました。

一端【Ctrl + C】コマンドでサーバーを終了します。
最後にビルドをして、webサーバーへアップロードしても動くようにします。
npm run build
index.htmlを始めとする必要ファイルがdocsフォルダの中に入っていました。
docsフォルダの中身を全てサーバーへアップロードするとサーバーで稼働します。

カスタマイズする時

src > components
の中にあるHello.vueを修正

修正をしたら
npm run serve
でブラウザで確認。
本番へアップする時だけ最後に
npm run build
をすれば良いです。毎回buildまでする必要はありません！

まとめ

・githubの説明は最後まできちんと読む事
・ダウンロードしたファイルにあるREADME.mdを見に行く
・ファイルの階層に注意してnpmのコマンドをうつ

自分で調べたnpmを初めて使いました。
もっとnpmを自由に操れるように修業が必要だなと感じました。

　 Tweet
Qiitaで続きを読む

投稿日：2020-12-12T09:37:15+09:00

初心者がつまづいたSassのコンパイルとか使うためのいろいろを備忘録としてまとめとく

前置き

私の今の状態

1年ぐらいProgateやらドットインストールやらで勉強しましたが、超のつく初心者なので専門用語とかがまだよくわかってません。
間違った言葉の使い方とかしてたらそっと教えてください…

この記事の対象となる人

同じくProgate終わったかなー、程度の人向け。
私の場合は、ProgateでSassやったし実際に書いてみるかー、と思ったらコード書くための準備？の段階で2～3日詰んだので、同じような人に読んでいただければ幸いです。

環境

ここも何書いていいのかわかりませんが…

Windows10

VSCodeを使用

コンパイルにはLiveSassCompilerを使用

手順

ほかにもっといい方法があれば教えてください（切実）

index.html ファイルの head でとりあえずscssのリンクを張る

<head>
<link rel="stylesheet" href="css/style.scss>
</head>
みたいな感じ。

Ctrlと左クリックでファイルを作ってもらう

作ったscssファイルに適当になにか書いてコンパイルする

コンパイルした後エクスプローラーを開くとcssフォルダ内にstyle.cssとstyle.css.mapの二つが追加されているはず。

（自動的にコンパイルされる気がするけど、できなければ画面下にあるWatch Sassみたいなのをクリック）

headに張ったリンクの拡張子を.scssから.cssに変更

私はここで思いっきり躓きました。
.scssを読み込めばいいと思い込んでいたからです。コンパイルしたcssを読み込ませてあげてください。

書く時はもちろんscssファイルに

最初は読み込むファイルとコードを書くファイルが違っていいのか？って疑問に思ってましたが、勝手にコンパイルしてくれてるのでそれで大丈夫でした。
要らぬ心配でした。パソコンはとても優秀です。

ここまできたらあとはとにかくコードを書いていくだけです。

おわりに

知っている人からすれば「そんなことで躓くの…？」とびっくりされるかもしれませんが私は思いっきり躓きました。
私自身が超初心者なんで、「そんな方法でやらなくてももっとこうすればいいのに…」「そこ間違ってるし…」みたいなのがあれば教えてやってもらえたら喜びます。

　 Tweet
Qiitaで続きを読む

投稿日：2020-12-12T09:37:15+09:00

初心者がつまづいたSassのコンパイル方法とか環境構築の備忘録

前置き

私の今の状態

1年ぐらいProgateやらドットインストールやらで勉強しましたが、超のつく初心者なので専門用語とかがまだよくわかってません。
間違った言葉の使い方とかしてたらそっと教えてください…

この記事の対象となる人

同じくProgate終わったかなー、程度の人向け。
私の場合は、ProgateでSassやったし実際に書いてみるかー、と思ったらコード書くための準備？の段階で2～3日詰んだので、同じような人に読んでいただければ幸いです。

環境

ここも何書いていいのかわかりませんが…

Windows10

VSCodeを使用

コンパイルにはLiveSassCompilerを使用

手順

LiveSassCompilerはもうインストールして使える状態になってる前提で進めていきます。
インストール方法についてはこちらの記事を参考にさせていただいました。ありがとうございます。

夢みるゴリラ｜「Live Sass Compiler」の設定方法 - VScodeでSassを書く

index.html ファイルの head でとりあえずscssのリンクを張る

<head>
<link rel="stylesheet" href="css/style.scss>
</head>
みたいな感じ。

css/style.scss にカーソルをあてCtrlと左クリックでファイルを作ってもらう

作ったscssファイルに適当になにか書いてコンパイルする

コンパイルした後エクスプローラーを開くとcssフォルダ内にstyle.cssとstyle.css.mapの二つが追加されているはず。

（自動的にコンパイルされる気がするけど、できなければ画面下にあるWatch Sassみたいなのをクリック）

headに張ったリンクの拡張子を.scssから.cssに変更

私はここで思いっきり躓きました。
.scssを読み込めばいいと思い込んでいたからです。コンパイルしたcssを読み込ませてあげてください。

書く時はもちろんscssファイルに

最初は読み込むファイルとコードを書くファイルが違っていいのか？って疑問に思ってましたが、勝手にコンパイルしてくれてるのでそれで大丈夫でした。
要らぬ心配でした。パソコンはとても優秀です。

ここまできたらあとはとにかくコードを書いていくだけです。
ほかにもっといい方法があれば教えてください（切実）

おわりに

コンパイル　という単語すら知らずにSass使おうとか無謀すぎました。
知っている人からすれば「そんなことで躓くの…？」とびっくりされるかもしれませんが私は思いっきり躓きました。

私自身が超初心者なんで、「そんな方法でやらなくてももっとこうすればいいのに…」「そこ間違ってるし…」みたいなのがあれば教えてやってもらえたら喜びます。

　 Tweet
Qiitaで続きを読む

20201212のHTMLに関する記事は7件です。

Bootstrap(v5)をカスタマイズして必要な機能だけ利用する

はじめに

基本的なBootstrapの利用法とそのデメリット

ソースファイルをコンパイルして独自CSSを生成する

bootstrap.custom.scss

_variables.scss

おわりに

参考リンク

【初学者向け】floatの解除方法

コード紹介

floatの解除

clearfixを使う。

overflow:hidden;を使う。

最後に

AWSを利用してWebページを作ってみよう

目次

1.はじめに

2.全体スケジュール

3.AWS全体学習

AWSome Dayとは

4.構成図

5.インフラチーム学習内容-Part1

要件の確認

Tips：Apacheとは

6.インフラチーム学習内容-Part2

コマンド整理

EC2インスタンスに接続して実際に構築

7.フロントチーム学習内容-Part1

HTMLとは

CSSとは

JavaScriptとは

8.フロントチーム学習内容-Part2

9.完成したサイト

10.まとめ

半年間の活動を通して

【ミッション】3分でゼロからwebページを公開する

序文

目的

GitHub Pages

公開後のイメージ

1. GitHubアカウントの登録

1.1 ユーザー情報の入力

1.2 メールアドレスの認証

2. ウェブページの作成

2.1 リポジトリの作成

2.2 index.htmlの作成

3. 作成したwebページを見る

npmパッケージ検索サイトからの使い方を初心者が解説してみた！

node.jsのパッケージが無料で使えるサイト

初心者なのでスムーズには扱えなかった

使ってみたい！と思ったのはvue.jsのパッケージであるdraggbale

ラッキー！サンプルコードがgithubに上がってる

githubからファイルをインストール

必要npmインストール / run serv / build

カスタマイズする時

まとめ

初心者がつまづいたSassのコンパイルとか使うためのいろいろを備忘録としてまとめとく

前置き

私の今の状態

この記事の対象となる人

環境

手順

おわりに

初心者がつまづいたSassのコンパイル方法とか環境構築の備忘録

前置き

私の今の状態

この記事の対象となる人

環境

手順

おわりに

日付別

タグ一覧

　目的