投稿日：2020-08-24T22:30:13+09:00

CSSでカーソルが画像の上に来ると何かが起きるようにしよう。

この記事の対象者

・cssで簡単なアニメーションを付けたい人
・写真に動きを付けたい人

下準備

毎度のことながら始めにfinderからcss_hoverなどと言う名前のフォルダーを作成します。そしたらbracketsを起動して新規ファイルを2つ立ち上げて、それぞれindex.html、style.cssと名前をそれぞれ付けます。そしたらindex.htmlに!と入力してtobキーを押して、プログラムを展開します。そうしたら、langを"ja"に変更して、head内にlinkと入力してからtobキーを押してプログラムを展開してhrefにstyle.cssと入力して準備完了です。
※念の為にソースコードを入力して置きます。
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>

</body>
</html>
hoverを使ってみる

始めに写真を表示させる為のコードを追加します。body要素にこのコードを記述します。
<div class="img_block">
    <img src="IMG_0186.jpeg" alt="サンプル画像">
</div>
finderに自分の好きな写真を入れて名前をその写真に変更して下さい。次はcssのコードをいじっていきます。
cssを何も書かないとたまにこんな感じで写真が見にくいので始めに写真を整えるコードを書きます。
.img_block img {
/*  始めに二行で写真を真ん中に移動させています。*/
    display: block;
    margin: auto;
/*  ここで写真のサイズを調節します。*/
    width: 50%;
/*  ここで上の隙間を作ります*/
    margin-top: 100px;
}
コードの解説はコメントの通りです。次に画像を半透明にします。
これはとても簡単でこの一行を加えるだけです。
※コメントはコピーしなくても問題ありません。
/*  0.8の値をもっと小さくするもっと透明になります。*/
opacity: 0.8;
最後にhoverを使ってカーソルが押された時のコード書いて完成です。
始めにhoverの使い方について軽く解説します。
指定した要素名:hover {
/*  ここにアニメーションを書きます*/
}
実際に使って見ましょう。
コード完成版
<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>

<body>
    <div class="img_block">
        <img src="IMG_0186.jpeg" alt="サンプル画像">
    </div>
</body>

</html>
.img_block img {
/*  始めに二行で写真を真ん中に移動させています。*/
    display: block;
    margin: auto;
/*  ここで写真のサイズを調節します。*/
    width: 50%;
/*  ここで上の隙間を作ります*/
    margin-top: 100px;
/*  0.8の値をもっと小さくするもっと透明になります。*/
    opacity: 0.8;
}

.img_block img:hover {
/*  ここにアニメーションを書きます*/
    opacity: 1;
}
カーソルはスクショなので上手く写っていませんがちゃんと動作しましたね。
※今回使った写真を載せて置きます。

最後に

記事を読んでくれてありがとうございました。
最近はなんとなく毎日更新をしています。pythonとhtmlの記事を投稿していくつもりです。
よければ他の記事も見て下さい。

初心者なので間違った所があったらコメントで教えて下さい。早めに修正します。

今回参考にした素晴らし記事：サルワカ

　 Tweet
Qiitaで続きを読む

投稿日：2020-08-24T22:24:59+09:00

Mixed Content: The page at 'https://〜〜〜' was loaded over HTTPS,というエラーが出た時の対処

あらすじ

サイトにjQueryを拡張するライブラリ（プラグイン）の一種でjQuery UIを利用しダイアログを表示しようとしたときに出たエラーです。

HTMLのheader部分にライブラリを読み込むため、以下のような記述をプラスし
<link type="text/css" rel="stylesheet"
  href="http://code.jquery.com/ui/1.10.3/themes/cupertino/jquery-ui.min.css" />
今回はherokuを利用してデプロイしました。

エラー内容

そうするとクリックしてもダイアログがうまく表示されず。

検証ツールでコンソールを見てみると赤文字でエラーの表示がでてました。
Mixed Content: The page at 'https://home-game-center.herokuapp.com/' was 
loaded over HTTPS, 
but requested an insecure stylesheet 'http://code.jquery.com/ui/1.12.1/themes/pepper-grinder/jquery-ui.css'.
This request has been blocked; the content must be served over HTTPS.
「httpからのリンクなんで読み込めませんよ」とのことのようです。実際そのページだけ必要なものが読み込めていない。

調べてみると、『HTTPSとHTTPの混合サイトで外部リンクが読み込めない』みたいです。

解決策

解決策としては
『（’https:/ or ‘http:/）は省略できる』
とのことなので記述を以下のようにしました。
<link type="text/css" rel="stylesheet"
  href="//code.jquery.com/ui/1.10.3/themes/cupertino/jquery-ui.min.css" />
href=のあとのhttp:を省略して再度デプロイすると本番環境でも正常にダイアログが出て解決しました！

しかし今度はローカルではうまく動作せずになりましたが（涙）

参考

リンクの http: や https: を省略して現在のプロトコルでリンク先にアクセスさせる
・https://qiita.com/arai-wa/items/d9b73539898d658b58c5

　 Tweet
Qiitaで続きを読む

投稿日：2020-08-24T22:17:18+09:00

本で学んだこと(HTML , CSS編)

HTMLとCSSで苦手なところを本で調べて学習し、記録しています。

表を作りたい

表を作る時はtableタグを使用する。

trタグは行を表すもので、今回は、４つあるので４行の表が完成する。
tdタグは、列を表すもの。それぞれ行の中に２つずつあるので２列できる。
<table border=1>
<tr><td>品物</td><td>金額</td></tr>
<tr><td>りんご</td><td>３００円</td></tr>
<tr><td>もも</td><td>４００円</td></tr>
<tr><td>メロン</td><td>９００円</td></tr>
</table>
品物金額

りんご３００円

もも４００円

メロン９００円

フォームを作りたい

フォーム記入欄を作る時はformタグを使用する。

text欄を作る時
<input type="text" name="">
e-mail欄を作る時は type は text となる。
<input type="text" name="email">
password欄を作る時
<input type="password" name="pass">
ラジオボタンを作る時
2つ以上作る場合、typeやnameを同じにしておく。
<input type="tadio" name="名前" value="値1">
<input type="tadio" name="名前" value="値2">
チェックボックスを作る時

2つ以上作る場合、typeやnameを同じにしておく。
<input type="checkbox" name="名前" value="値1">
<input type="checkbox" name="名前" value="値1">
選択欄を作る時
<select name="furuits">
<option name="apple">りんご</option>
<option name="peach">もも</option>
<option name="melon">メロン</option>
</select>
送信ボタンを作る時
<input type="submit" name="submit">

品物	金額
りんご	３００円
もも	４００円
メロン	９００円

　 Tweet
Qiitaで続きを読む

投稿日：2020-08-24T21:59:06+09:00

【初心者でもわかる】文章全体は可変で中央揃えで、中の文字は左寄せにする方法

どうも7noteです。親は中央、子は左寄せにする方法について

見本

ソース
index.html
<div class="oya">
  <div class="ko">
    こんちわ<br>
    こんばんわ<br>
    さようなら、また明日
  </div>
</div>
style.css
    .oya {
        text-align: center;
    }
    .ko {
        border: 1px solid #000; /* 見やすいように線を入れただけ */
        display: inline-block;
        text-align: left;
    }
解説

親（oya）要素にtext-align: center;を入れることで、子（ko）要素を中央寄せにします。

このとき、子要素がblock要素のままだと、可変にもできないし、中央寄せにもならないのでdisplay: inline-block;を指定します。

あとは子要素にtext-align: left;を指定することで、中身の文章は左揃えになります。

まとめ

たまに必要な場面があるので、やり方をわすれないようメモメモ。。。

おそまつ

（コメント・質問・ソースの指摘等なんでもウェルカムです！初心者の方でも気軽に質問ください！）

　 Tweet
Qiitaで続きを読む

投稿日：2020-08-24T21:09:09+09:00

CSSの綺麗な書き方

プログラミングの勉強日記

2020年8月24日
現在しているインターンでCSSの綺麗な書き方（見やすい）書き方を学んだのでまとめる。
更新があればその都度追記していきたいと思う。

改行を作らない

　ソースコードは短く簡潔に書くことが大切なので、ソースコードには改行をしないようにする。
例
.top {
  margin: 0;
  font-size: 16px;
}
.second {
  background-color: red;
}
セレクタと中括弧の間にスペースが必要

　CSSはセレクタとプロパティと値で構成されていて、どの要素かを指定する部分をセレクタという。(クラス名とかID名にもスペースを空ける）
p {
  /* 処理 */
}
プロパティと値の間はスペースが必要

　以下のようにコロンと値の間にはスペースが必要。
.top {
  width: 100%;
}
まとめられる内容はまとめて書く(paddingやmargin)

　以下のようなコードの場合はpadding: 値で四方向すべてを、padding: 上下左右で水平方向を、padding: 上右下左のようにまとめて書くことができる。
.top {
  padding-left: 10px;
  padding-right: 10px;
  margin-top: 2px;
  margin-bottom: 3px;
  margin-right: 4px;
  margin-left: 6px;
}
　なので上記のコードは以下にまとめられる。
.top{
  padding: 0 10px;
  margin: 2px 4px 3px 6px;
}

　 Tweet
Qiitaで続きを読む

投稿日：2020-08-24T17:30:58+09:00

display:flexとalign-items/justify-content

【概要】

1.結論

2.display:flexとalign-items/justify-content とは何か

3.どういう時に使うのか

4.ここから学んだこと

1.結論

”display:flex”と”align-items”と”justify-content”は親要素に3点セットで使用する！

2.display:flexとalign-items/justify-content とは何か

i)display:flex➡︎”指定した要素の子要素”をFlexboxを適用させるためのプロパティです。そして、子要素が横並びになります。Flexboxとは柔軟にレイアウトを組める仕組みです！他にもdisplay:block(指定のセレクタをブロック要素に変更）などがあります。に

ii)align-items➡︎display:flexと併用して使うことが多く、”指定した要素の子要素”の水平方向の配置を決めれます。justyfy-content:center(中央）,justyfy-content:space-between(両端が左右寄り)などがあります。

iii)justify-content➡︎display:flexと併用して使うことが多く、”指定した要素の子要素”の垂直方向の配置を決めることができます。
align-items:felx-start(上),align-items:center(中央)などがあります。

3.どういう時に使うのか

実はこの3点セットでよく使うパターンが決まっております。ど真ん中に配置させたい時（水平方向・垂直方向・そして横並びに整列させたい）はdisplay:flexとalign-itemsとjustify-contentを親要素に3点セットで使用します！

下記に使用例を載せておきます！
ど真ん中設定
.center_of_center{
 display:flex;
 align-items:center;
 justify-content:center;
}
上記のようにすると、画面中央に横並びになった状態でHTMLに反映され画面に表示されます！

*子要素の並び順を変えたい・縦列にしたい場合は親要素に”flex-direction”です。
display:flexはフレックスボックスを適用させるものなので、同時に使用します。

4.ここから学んだこと

align-items/justify-content について、最初に子要素につけていたことによって
表示が反映されていませんでした。”親要素に適用する”という基本が抜けていました。

　 Tweet
Qiitaで続きを読む

投稿日：2020-08-24T17:30:58+09:00

ど真ん中に図や文字を表示させたい

【概要】

1.結論

2.display:flexとalign-items/justify-content とは何か

3.どういう時に使うのか

4.ここから学んだこと

1.結論

”display:flex”と”align-items”と”justify-content”は親要素に3点セットで使用する！

2.display:flexとalign-items/justify-content とは何か

i)display:flex➡︎”指定した要素の子要素”をFlexboxを適用させるためのプロパティです。そして、子要素が横並びになります。Flexboxとは柔軟にレイアウトを組める仕組みです！他にもdisplay:block(指定のセレクタをブロック要素に変更）などがあります。に

ii)align-items➡︎display:flexと併用して使うことが多く、”指定した要素の子要素”の水平方向の配置を決めれます。justyfy-content:center(中央）,justyfy-content:space-between(両端が左右寄り)などがあります。

iii)justify-content➡︎display:flexと併用して使うことが多く、”指定した要素の子要素”の垂直方向の配置を決めることができます。
align-items:felx-start(上),align-items:center(中央)などがあります。

3.どういう時に使うのか

実はこの3点セットでよく使うパターンが決まっております。ど真ん中に配置させたい時（水平方向・垂直方向・そして横並びに整列させたい）はdisplay:flexとalign-itemsとjustify-contentを親要素に3点セットで使用します！

下記に使用例を載せておきます！
ど真ん中設定
.center_of_center{
 display:flex;
 align-items:center;
 justify-content:center;
}
上記のようにすると、画面中央に横並びになった状態でHTMLに反映され画面に表示されます！

*子要素の並び順を変えたい・縦列にしたい場合は親要素に”flex-direction”です。
display:flexはフレックスボックスを適用させるものなので、同時に使用します。

4.ここから学んだこと

align-items/justify-content について、最初に子要素につけていたことによって
表示が反映されていませんでした。”親要素に適用する”という基本が抜けていました。

　 Tweet
Qiitaで続きを読む

投稿日：2020-08-24T13:11:01+09:00

両端からフェードアウトしていくカーテンみたいなアニメーションをcssとjsで作成

右端からフェードアウトしていく風のものはあったのですが両端からは見つからなかったので自作。
白いボックスを両端から出して背景を覆い隠しているだけです。

#loading {
  width: 100vw;
  height: 100vh;
  transition: all 1s;
  background-color: #274bd2;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
}

.fadeout {
    display: none;
}

#left_bk,#right_bk {
    width: 0;
    height: 100vh;
    background-color: rgba(255,255,255,0.8);
    border: none;
    position: absolute;
    top: 0;
    z-index: 2;
}       

#line {
    width: 3px;
    height: 100vh;
    background-color: #274bd2;
    border: none;
    position: absolute;
    top: 0;
    left: 47.5vw;
    z-index: 3;
}
#left_bk {  left: 0; }

#right_bk { right: 0; }

.anime5 {
    animation: animemove5 0.3s linear forwards; } /*1.5sかけて*/

.anime7 {
    animation: animemove7 1.5s linear forwards; } 

@keyframes animemove5 {
    0% {}
    100% {width: 50vw;} /*50vwまで拡大*/
}

  @keyframes animemove7 {
    0% {}
    100% {left: calc(100% - 54px);}
}

const body = document.getElementsByTagName('body')[0];

function fadeOut() {
    left_bk.classList.add('fadeout');
    right_bk.classList.add('fadeout');
    loading.classList.add('fadeout');
}

window.onload = function() {
    setTimeout(cartain, 700);
    setTimeout(blueline, 1000);
    setTimeout(fadeOut, 2000);
};

function cartain() {
    left_bk.classList.add('anime5');
    right_bk.classList.add('anime5');            
    $("#loading").animate({ opacity: 0 }, { duration: 500, easing: 'linear'});       
}

function blueline() {
    line.classList.add('anime7');     
}

<div id="loading">
    <div id="left_bk"></div>
    <div id="right_bk"></div>
</div>
    <div id="line"></div>

    <script src="loading.js"></script>

　 Tweet
Qiitaで続きを読む

投稿日：2020-08-24T12:49:45+09:00

nuxtjsでwebpackのcacheGroupsを使ってJavaScriptとcssの分割方針を変える

Webページの高速化のする手法の一つにJavaScriptやcssなどのアセットを小さくして、細かいファイルにしてCDNにアップロードするというものがあります。

HTTP/2では1つのコネクション上で複数並列に扱うことができるので、ファイルを一つにまとめて通信回数を減らすより、ファイルサイズを小さくして平行に複数ファイル取得するほうが有利です。

nuxt.jsではnuxt.config.jsファイルのbuild部分がそのままwebpackの設定となるので、ここに設定を追加していくことでwebpackの設定を変更しビルドの方針を変えることが出来ます。

全部一つのファイルにまとめる場合
nuxt.config.js
{

  ... (省略) ...

  build: {
    optimization: {
      cacheGroups: {
        styles: {
          name: 'styles',
          minChunks: 1, // 1箇所以上で使われていたらlibraryとしてchunkに含める
          chunks: 'all'
          enforce: true // ファイルサイズの制限を無視してchunkをまとめる
        }
      }
    }
  }
}
この設定では1箇所以上で使われているファイルをビルド後のファイルサイズを無視してchunkに含めるということになるので、全てのコードが1つのchunkに詰め込まれて同じファイルになります。当然ファイルは大きくなります。

ファイルを複数に分割する場合
nuxt.config.js
{

  ... (省略) ...

  build: {
    optimization: {
      cacheGroups: {
        styles: {
          name: 'styles',
          minChunks: 5, // 5箇所以上で使われていたらlibraryとしてchunkに含める
          chunks: 'all'
          enforce: false // ファイルサイズの制限をできるだけ守るように分割する
          minSize: 30000, // 30kbを超えるようにファイル分割する
          maxSize: 1000000, // 100kbを超えないようにファイル分割する
        }
      }
    }
  }
}
このように設定するとファイルのサイズが30kb〜100kbの間に収まるように出来るだけ分割してビルドしてくれます。

　 Tweet
Qiitaで続きを読む

投稿日：2020-08-24T12:03:32+09:00

【CSS3】背景画像を薄くする方法

背景画像に文字を重ねると、画像の色が濃くて文字が見づらい場合があります。

Before

文字の色は変えないまま、背景を薄くする（明るくする、透過させる）ためには、以下のようにします。
index.html
<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>背景画像を薄くする</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <h1>夢に、向かって。</h1>
</body>

</html>
style.css
body {
    background-image: url(bgimage.jpg);
    background-color: rgba(255, 255, 255, 0.5);
    background-blend-mode: lighten;
}

h1 {
    color: #666666;
    font-size: 64px;
    padding: 128px;
}
background-colorプロパティで0.5、つまり50%の白を指定し、background-blend-mode: lighten;で明るくするように色を重ね合わせます。

rgbaの0.5という透過度の指定は、0.7など大きくすれば、もっと薄く白っぽくなりますし、0.3など小さくすれば元の画像が濃くなります。

こうすると背景画像が薄くなり、文字が見やすくなります。

After

背景画像：写真AC https://www.photo-ac.com/main/detail/3186805

　 Tweet
Qiitaで続きを読む

投稿日：2020-08-24T11:52:08+09:00

React + SimpleBar: スクロールバーのスタイルをカスタマイズする

SimpleBarはスクロールバーをカスタマイズするライブラリです。スクロールバーを独自につくるのではなく、CSSのスタイルを割り当てるので、おかしな挙動は起こらず、ネイティブなスクロールのパフォーマンスが保たれます。あくまで、スクロールバーの見栄えを変えるだけです。

デザインはCSSで定める

SimpleBarは純粋なCSSでスクロールバーのスタイルを定めます。CSSで与えられるスタイルでさえあれば、自由にカスタマイズできるということです。また、macOSとWindowsで同じ見た目になるのも大きな魅力といえます。

軽量なライブラリ

6KBのとても軽いライブラリです。JavaScriptはスクロールの動きそのものには触れません。ネイティブな動きとパフォーマンスが得られます。

モダンブラウザをサポート

ChromeとFirefox、Safariなどのモダンブラウザに加え、Internet Explorer 11をサポートします。

ライブラリの概要はドキュメントとデモページでお確かめください。本稿と同じタイトルの「JavaScript + SimpleBar: スクロールバーのスタイルをカスタマイズする」でつくったつぎの作例は、標準のJavaScriptコードでSimpleBarのスタイルを割り当てました。「Left Column」にマウスポインタを重ねると、グラデーションのスクロールバーが現れます。今回のお題は、React用のSimplebarReactで同じサンプルをつくることです。

See the Pen JavaScript + SimpleBar: Customizing scrollbar style by Fumio Nonaka (@FumioNonaka) on CodePen.

本稿の作例は、Create React Appのひな形アプリケーションをもとにつくります。ひな形のつくり方については「Reactアプリケーションのひな形をつくる」をお読みください。

インストール

まず、SimpleBarをインストールします(「Installation」)。SimplebarReactもSimpleBarのCSSを使うからです。npmまたはyarnでインストールしてください。
npm install simplebar --save
yarn add simplebar
つぎに、SimplebarReactのインストールです。やはり、npmまたはyarnで行います(「Installation」)。
npm install simplebar-react --save
yarn add simplebar-react
基本となるページの組み立て

ページを構成する要素は大きく3つ、ヘッダと左カラム、そしてメインコンテンツです(図001)。また、Bootstrap 4.5を用いました。ただし、本稿ではCSSの説明は基本的に省き、SimpleBarの扱いに関わる定めだけ解説することにします。確かめたい方は、最後に掲げるCodeSandboxのサンプルまたはGithubのソースをご覧ください。

図001■ヘッダと左カラムにメインコンテンツで組み立てられたページ

以下のコードは、アプリケーション(src/App.js)に、それぞれヘッダ(src/components/Header.js)と左カラム(src/components/LeftColumn.js)およびメインコンテンツ(src/components/MainContents.js)を静的にレイアウトしたモジュールの中身です。src/App.jsがsimplebar/dist/simplebar.min.cssを読み込んでいます。

SimplebarReactのJavaScriptライブラリをimportするのは、スクロールバーをカスタマイズする左カラムのモジュール(src/components/LeftColumn.js)です。なお、リストの連番項目は、メソッドArray.from()とArray.prototype.map()でつくりました。興味のある方は「ECMAScript 6のArrayに関わる構文を試す」をお読みください。
src/App.js
import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import "simplebar/dist/simplebar.min.css";
import "./App.css";
import Header from "./components/Header";
import MainContents from "./components/MainContents";
import LeftColumn from "./components/LeftColumn";

function App() {
  return (
    <div className="App">
      <Header />
      <div className="container-fluid d-flex px-0">
        <LeftColumn />
        <MainContents />
      </div>
    </div>
  );
}

export default App;
src/components/Header.js
import React from "react";

const Header = () => {
  return (
    <header id="header" className="text-white bg-primary w-100 p-2 d-flex">
      <h1>Header</h1>
    </header>
  );
};

export default Header;
src/components/LeftColumn.js
import React from "react";

const LeftColumn = () => {
  return (
    <div id="left-column" className="bg-light p-2">
      <h3>Left column</h3>
      <ul id="list" className="pl-4">
        {Array.from(new Array(20), (_, index) => (
          <li key={index}>item {String(index + 1).padStart(2, 0)}</li>
        ))}
      </ul>
    </div>
  );
};

export default LeftColumn;
src/components/MainContents.js
import React from "react";

const MainContents = () => {
  return (
    <main className="px-4 py-2">
      <h2>Main contents</h2>
      <p>
        
      </p>
    </main>
  );
};

export default MainContents;
ヘッダを上部に固定する

まずは、ヘッダをページ上部に固定するCSSの設定です(src/App.css)。位置はpositionプロパティにfixedを与えて固定します。具体的な置き場所は上部なのでtop: 0です。すると、<body>要素の領域に含まれなくなるので、そのままではページの上部がかぶって隠れてしまいます(図003)。
src/App.css
#header {
  position: fixed;
  top: 0;
}
図002■ページ上部をヘッダが覆ってしまう

<body>要素のpaddingまたはmarginは、ヘッダの高さ分下げなければならないのです。もっとも、高さはウィンドウ幅やレスポンシブの設定によって変わるかもしれません。動的に定めるべきでしょう。

要素の高さはelement.clientHeightで得られます。要素を参照するフックはuseRefです(src/App.js)。参照(header)は、プロパティでヘッダのコンポーネント(src/components/Header.js)に渡します。ただし、element.clientHeightは、読み取り専用プロパティであることにご注意ください。高さの設定には、要素(<div>)のstyle属性を用います。
src/App.js
// import React from "react";
import React, { useEffect, useRef, useState } from "react";


function App() {
  const [headerHeight, setHeaderHeight] = useState(0);
  const header = useRef(null);
  useEffect(() => {
    const _header = header.current;
    const setLayout = () => {
      setHeaderHeight(_header.clientHeight);
    }
    window.addEventListener("resize", setLayout);
    setLayout();
  }, []);
  return (
    // <div className="App">
    <div className="App" style={{ paddingTop: headerHeight }}>
      {/* <Header /> */}
      <Header headerRef={header} />

    </div>
  );
}
src/components/Header.js
// const Header = () => {
const Header = ({ headerRef }) => {
  return (
    <header
      id="header"
      ref={headerRef}

    >
      <h1>Header</h1>
    </header>
  );
};
SimpleBarを組み込む

SimpleBarを使う要素には、overflowプロパティにautoを与えてください(src/App.css)。そのうえで、SimpleBarを設定する要素は<SimpleBar>に置き替えます(src/components/LeftColumn.js)。
src/App.css
#left-column {
  overflow: auto;
}
src/components/LeftColumn.js
import SimpleBar from "simplebar-react";

const LeftColumn = () => {
  return (
    // <div id="left-column" className="bg-light p-2">
    <SimpleBar id="left-column" className="bg-light p-2">

      {/* </div> */}
    </SimpleBar>
  );
};
そして、スクロールバーを表示するには、要素に高さを定めなければなりません。
src/App.css
#left-column {
  overflow: auto;
  height: 400px;  /* 高さを定める */
}
とはいえ、高さを決め打ちは避けたいところです。すでに、ヘッダの高さはとれるのですから、ブラウザウィンドウのビューポートの高さ(window.innerHeight)から差し引けば、左カラムの高さ(leftColumnHeight)は求まります。
src/App.js
function App() {

  const [leftColumnHeight, setLeftColumnHeight] = useState(0);

  useEffect(() => {

    const setLayout = () => {

      setLeftColumnHeight(window.innerHeight - _header.clientHeight);
    };

  }, []);
  return (
    <div className="App" style={{ paddingTop: headerHeight }}>

      <div className="container-fluid d-flex px-0">
        {/* <LeftColumn /> */}
        <LeftColumn leftColumnHeight={leftColumnHeight} />

      </div>
    </div>
  );
}
src/components/LeftColumn.js
// const LeftColumn = () => {
const LeftColumn = ({ leftColumnHeight }) => {
  return (
    // <div id="left-column" className="bg-light p-2">
    <SimpleBar
      id="left-column"
      className="bg-light p-2"
      style={{
        height: leftColumnHeight,
      }}
    >

      {/* </div> */}
    </SimpleBar>
  );
};
これで、ウィンドウに合わせて左カラムの高さが定まり、スクロールバーは自動表示されるようになりました(図003)。

図003■SimpleBarのスクロールバーが自動表示される

ページ全体をスクロールしたときの不具合を直す

まだ少し、不具合が残っています。ページ全体を下にスクロールしたとき、左カラムがせり上がって、ヘッダにかぶってしまうことです(図004)。

図004■ページを下にスクロールすると左カラムがヘッダにかぶる

左カラム(src/components/LeftColumn.js)の垂直位置は固定しなければなりません。やり方は、前述「ヘッダを上部に固定する」と同じです。ただ、CSS(src/App.css)でなく、style属性で定めることにしました。
src/App.js
function App() {

  return (
    <div className="App" style={{ paddingTop: headerHeight }}>

      <div className="container-fluid d-flex px-0">
        <LeftColumn
          headerHeight={headerHeight}

        />

      </div>
    </div>
  );
}
src/components/LeftColumn.js
// const LeftColumn = ({ leftColumnHeight }) => {
const LeftColumn = ({ headerHeight, leftColumnHeight }) => {
  return (
    <SimpleBar

      style={{
        position: "fixed",
        top: headerHeight,

      }}
    >

    </SimpleBar>
  );
};
もちろん、前述「ヘッダを上部に固定する」と同じように、左カラムがメインコンテンツにかぶってしまいます(図005)。

図005■メインコンテンツが左カラムに隠れてしまう

「ヘッダを上部に固定する」と同じ考え方で、メインコンテンツの左端をカラムの幅だけ右に寄せればよいはずです。けれど、つぎのコードではメインコンテンツの位置がまったく動きません。
src/App.js
function App() {
  const [leftColumnWidth, setLeftColumnWidth] = useState(0);

  const leftColumn = useRef(null);
  useEffect(() => {

    const _leftColumn = leftColumn.current;
    const setLayout = () => {

      setLeftColumnWidth(_leftColumn.clientWidth);

    };

  }, [leftColumn]);
  return (
    <div className="App" style={{ paddingTop: headerHeight }}>

      <div className="container-fluid d-flex px-0">
        <LeftColumn
          leftColumnRef={leftColumn}

        />
        {/* <MainContents /> */}
        <MainContents leftColumnWidth={leftColumnWidth} />
      </div>
    </div>
  );
}
src/components/MainContents.js
// const MainContents = () => {
const MainContents = ({ leftColumnWidth }) => {
  return (
    // <main className="px-4 py-2">
    <main className="px-4 py-2" style={{ marginLeft: leftColumnWidth }}>

    </main>
  );
};
src/components/LeftColumn.js
// const LeftColumn = ({ headerHeight, leftColumnHeight }) => {
const LeftColumn = ({headerHeight, leftColumnHeight, leftColumnRef }) => {
  return (
    <SimpleBar

      ref={leftColumnRef}

    >

    </SimpleBar>
  );
};
SimpleBarコンポーネントをラップする

調べてみると、SimpleBarコンポーネントのclientWidthプロパティ値が0です。SimpleBarは、あくまでスクロールバーのスタイルを整えるためのラッパーだからでしょう。

そこで、Simplebarコンポーネントをつぎのように<div>要素で包み、スクロールバーに用いる以外の属性はすべてこの要素に移します。こうすることで、カラムの要素の幅(clientWidth)が正しく得られるのです。メインコンテンツの左端は、カラムの右端に揃います。
src/components/LeftColumn.js
const LeftColumn = ({ headerHeight, leftColumnHeight, leftColumnRef }) => {
  return (
    <div
      id="left-column"
      ref={leftColumnRef}
      className="bg-light p-2"
      style={{
        position: "fixed",
        top: headerHeight,
      }}
    >
      <SimpleBar
        /* id="left-column"
        ref={leftColumnRef}
        className="bg-light p-2" */
        style={{
          /* position: "fixed",
          top: headerHeight, */
          height: leftColumnHeight,
        }}
      >

      </SimpleBar>
    </div>
  );
};
CSSでスクロールバーのスタイルを変える

SimpleBarのスクロールバーのスタイルは、CSSにより定められています。つまり、見栄えがCSSで変えられるということです。ここでは、スクロールさせるスライダのカラーを、つぎのCSSでグラデーションにしてみましょう(図006)。
src/App.css
.simplebar-scrollbar::before {
  background: linear-gradient(darkblue, skyblue);
}
図006■メインコンテンツの位置が正しく定まってスライダはグラデーションになった

>> CodeSandboxへ

冒頭の標準JavaScriptのサンプルと同じページをSimplebarReactでつくり、CodeSandboxに掲げました。また、Githubでもソースをご覧いただけます。

　 Tweet
Qiitaで続きを読む

投稿日：2020-08-24T10:28:05+09:00

実践 HTML,CSS,JavaScript初級者向け解説作りたいものから逆算して作るWebアプリ

0.はじめに

どうも、はじめして　いっぺい　です。
HTML,CSS,JavaScriptは使いこなせるようになってくると楽しいです。

1.作りたいイメージ

突然ですが、ネットワークグラフってご存知ですか？

ネットワークグラフって物事の可視化するのに便利ですよね。

私も考えを整理したくて様々なツールを使ってみたりはしたのですが、

（マインドマップ、マキネーションツール、フローチャート、図形ツール・・・）

どれもピンと来ていなくて

【詳細】それぞれのツールの感想について

・マインドマップ → 中心から広げられるのはいいけど、枝葉を中心にして伸ばすのは狭い
・マキネーションツール　→　流れを動かして見れるのはいいけど、もうちょっとシンプルのが欲しい
・フローチャート → こんな感じでいいけど、情報の保存が難しい。図の保存？編集も大変？
・図形ツール　→　文字サイズとかの調整が大変？

ノートにメモするようにグラフをかいて、整理したり保存したい。（そして、見やすく編集しやすくてシンプルなのがいい）

今回はネットワークグラフを完成させるところまでいきませんが、
HTMLとCSSとJavaScriptが連携して動くところを掴めると思います。

2.欲しい機能

・葉っぱを配置する
・葉っぱをドラッグで移動させたい

ほんとはもっとある

・シンプルにテキスト保存したい
・保存したテキストは、人に読める形にしたい
・ブラウザを開けばすぐ書き始められて書き出しもしたい
・文字サイズは見やすくしたい
・自由に葉っぱを動かしたい（そして枝も追従したい）
・葉っぱを追加したい位置に追加したい
・保存したデータの読み込みに対応したい
・無限に広がるタイプにしたい
・葉っぱを素早くドラッグしたら枝を伸ばしたい&つなげたい
・もちろん葉っぱの名前の編集もしたい

3.それっぽくコーディングしてみる

実装すること

テキストボックス

追加ボタン(形だけ)

HTML要素をドラッグしたい

ほどほどのスタイリング

データ構造を決める

HTML

タグはシンプルです。
index.html

<body>
  <div id="d1">
    
    <input type="text" id="t1">
    
    <input type="button" id="b1" value="done" onclick="done()">
  </div>
  <div id="d2">
  </div>
</body>

CSS

葉っぱの要素はposition: fixedにして要素を動かせるようにします。
style.css
/* 余白を取らない設定 */
body {
  margin: 0;
  padding: 0;
}

/* インプット領域 */
#d1 { 
  padding: 5px;
  top: 0;
  width: 100%;
}

/* テキストボックスの横幅 */
#t1 {
  width: 85%;
}

/* ボタンサイズ */
#b1 {
  width: 10%;
}

/* 葉っぱの設定 */
.nodes {
  position: fixed;
  background-color: palegreen;
}
JavaScript

配列にオブジェクトを入れてデータの形を決める

配列からcreateElementで要素を作る

その要素をいろいろ設定してdivに追加する
script.js
//JSONの配列に葉っぱのオブジェクトを入れる
let j = [{
  id: 0,
  PosX: 100,
  PosY: 100,
  title: "葉っぱ"
}]

//アウトプット領域の部分を選択
const d2 = document.querySelector("#d2")

//葉っぱを追加する処理を書きたいけど今回はconsole.log
function done() {
　　console.log("done")
}

//上で書いたJSONオブジェクトの配列をループする
//v:配列の中身 i:現在の配列の順番 a:元の配列
j.forEach((v, i, a) => {
  //ラベルタグを作成
  const l = document.createElement('label')

  //タグの文字列
  l.innerHTML = v.title;

  //要素の位置　'px'をつけるのは忘れがち
  l.style.left = v.PosX + 'px'
  l.style.top = v.PosY + 'px'
　　
  //取得できるようにidを設定
  l.id = v.id

　//ドラッグ機能をつける
  l.draggable = true;

  //スタイリング用にクラスをつける
  l.classList.add("nodes")

  //ラベルにイベントリスナーをつける
  l.addEventListener("dragend", (event) => {
    //ドラッグが終わった位置にラベルを配置する
    event.target.style.left = event.clientX + 'px'
    event.target.style.top = event.clientY + 'px'

    //ラベルの座標の位置も更新する
    j[event.target.id].left = event.clientX
    j[event.target.id].top = event.clientY
  })

　//画面に追加
  d2.appendChild(l)
})
4.結果

Webアプリとしての出来としてはしょっぱいですかね？

JSFiddleのサンプル

実は、このWebアプリの完成版があったりするのですが、
どうにかしてマネタイズ出来ないかな〜って奮闘しています

ここまで記事をご覧いただきありがとうございました。

ぜひ今回のコードを見比べながら実行してみてください

　 Tweet
Qiitaで続きを読む

投稿日：2020-08-24T10:18:53+09:00

「神経衰弱風カードフリップアプリ」の作り方

「神経衰弱風カードフリップアプリ」の作り方

「神経衰弱風カードフリップアプリ」を見て、自分も何か「カードゲームを作ってみたい！！」という欲求が日に日に強くなってきました。
カードをめくって、「同じ数字のペア」のカードを探すゲームなのですが、自分の「記憶力」がスコア化されるので、記憶力を強化したい意欲も湧いてきました。

ゲームの内容

カードの枚数を「１６枚」と「３６枚」から選ぶことができるのですが、「３６枚」はかなり難しいです。
残念ながら正解率は平均「７%」くらいになってしまいました・・・
ゲームのメイン画面はこんな感じです。

「１０ゲーム」遊ぶと自分のランクが１０段階のどの位置になるのかが表示されます。
ランクは「最低が１」で「最高が１０」なのですが、自分は「１６マス」が「３」で「３６マス」が「２」でした。
記憶力には自信あったのに・・・・

１６マスのゲーム

マス目の数が少ない「１６マス」のゲームは、

のような感じで、「４×４」の１６枚のカードの中から「同じ数字のペア」を見つけていきます。
正解率が、良い時は「５０％」を超えました。
だいたいの位置を覚えているだけでも「３０％」くらいの正解率になったので、「初心者向け」のモードです。

３６マスのゲーム

まったく数字を覚えられなかったのが「６×６」の「３６マス」のモード。
だいたいの位置すらも自分には覚えられないレベルでした・・・

「マス目」の位置を覚えるというより、特定ターゲットの数字を絞ってその数字を探した方が、結果的に早くクリアできました。
それでも、１０％ちょっと超えるくらいの正解率でしたが・・・

プログラム言語

ゲームの処理は「Javascript」で作られているのですが、「ゲームエンジン」は使っていないみたい。
UIは「HTML5/CSS3」を使っているとのことで、自分も何かカードを利用したゲームが作れるようになりたいな~

ゲームの作り方は、

～プログラミング初心者のための「神経衰弱風フリップカードアプリ」開発入門～

から見ることができます。
実際にゲームで遊ぶこともできるので、「自分の記憶力を試したい方」や「ゲームの作り方を知りたい方」はぜひ一度見てみてください。

余談・・・

このゲームの作成のお話を一度いただいたのですが、自分には難しそうだったので断ってしまいました。
自分のゲームプログラミングのスキルをもっと上げていかないとまだまだ「カードゲーム」を作るのは難しそう。
いろんなゲームのプログラムを見ると、良い刺激になりますね。
最近はサボり気味なので、またプログラムの勉強を始めたいと思います。

　 Tweet
Qiitaで続きを読む

投稿日：2020-08-24T07:35:07+09:00

世界各国のハイレベルなポートフォリオ１１選

今まで皆様は何件くらいのポートフォリオを見たことがありますか？求人中に応募が来たら見てみる、くらいが普通であり、ましてや海外のポートフォリオを見る機会がある人は少ないのではないでしょうか。

皆が作ったポートフォリオに少しでもスポットライトが当たるようにと、2年ほど前にまとめサイト現在のPortfilioHubを立ち上げ、今では世界各国のポートフォリオサイト５０００件のデータが集まりました。その中でGithubスター数で上位にランクインするポートフォリオ達のクオリティは凄まじく、その中から私的トップ１１を紹介したいと思います。

??イギリス @albinotonnina

??ポルトガル @sandrina-p

??インド @ashutosh1919

??インド @parizval

??ウクライナ @tbaltrushaitis

??アメリカ @quangogage

??フランス @MoOx

??カナダ @H-Richard

??オーストラリア @TheDen

??中国 @elevenbeans

??アメリカ @dukewan

スクロールで進行する全体アニメーション系

??イギリス albinotonnina.com by @albinotonnina

スター数でも私としても迷わず1位にしたのがこちら。スクロールで進んでいくアニメーションは必見です。モバイルでもしっかりレイアウトが計算されています。
これは2020年バージョンですが、前のバージョンも同レベルで凄まじく、ウェブが残っていれば掲載して2位にしたいクオリティです。

??ポルトガル www.sandrina-p.net by @sandrina-p

スクロールで進行するアニメーション。モバイルでも専用のアニメーションが再設計されています。

定番スタイル

??インド ashutoshhathidara.com by @ashutosh1919

手書きサインとスクロールで横から入ってくる要素のアニメーションがカッコいいです。
凝ってるポートフォリオサイトほど１ページ構成が多いですが、こちらは複数ページ構成です。モバイルもちゃんと動きます。

??インド parizval.github.io by @parizval

スターこそ少ないですが、個人的にアニメーションの作り込みの深さと、本来のポートフォリオの目的としての情報量などではベストな作品だと思います。ですが私のモバイルだと若干レイアウトがズレてしまっているのが残念。PC推奨です。

??ウクライナ cv.gsm-center.com.ua by @tbaltrushaitis

こちらは是非モバイルでもご覧頂きたいです。一定レベル以上になると単なるレスポンシブではなくモバイル専用に再設計されるケースが多いですが、こちらはモバイルの方が完成度が高いです。

??アメリカ gagehenderson.com by @quangogage

モバイルがネイティブのレスポンシブを活用しているような印象ですが、どちらでもしっかりアニメーションが効いています。

??フランス moox.io by @MoOx

パッと見た感じ一般的なポートフォリオに見えますが、3D表示の3台のiPhoneは画像ではなく、それぞれリンクが貼られておりに、スクロールで3D上で回転します。

ネタ系

??カナダ h-richard.com by @H-Richard

グーグルです。グーグルネタ自体は珍しくないですが、検索結果のレイアウトまで作り込んでます。検索結果だけでなく、Image等のタブ毎まで存在しており、すごいです。モバイルも本物と見紛うほど完璧なレイアウトです。

??オーストラリア theden.sh by @TheDen

ただの緑ターミナル系かと思いきや、ドラッグで各テーブルが動きます！よく見ると古いターミナルを思わせる画面のさざ波や時々起こる色あせ、モノクロ化などエフェクトへの拘りが分かりますね。拘ることが目的化したかのような様相。モバイルはコンテンツが減ってるぽくPC推奨です。

??中国 elevenbeans.github.io/resumeX by @elevenbeans

iPhone上のメッセンジャーでのチャット形式。中国語で分かりませんが、画像なども返答で帰ってきます。モバイルでも同じです。

??アメリカ 1mhz.me by @dukewan

マリオです。動きます。指示通り方向キーで左右に、スペースでジャンプして箱を叩けばポートフォリオとしてのコンテンツが表示されます。モバイルでは動きませんでしたので、PC推奨

おわりに

いかがでしたでしょうか。特にこれからポートフォリオを作ろうとしている方々の参考になれれば幸いです。

気に入った又は参考になったポートフォリオがあれば、レポジトリにスターでフィードバックをあげましょう。素敵なポートフォリオがもっとフォーカスされる世界になれば嬉しいです。

PortfolioHubへの参加はレポジトリをgithubで公開し、スクレイピングを希望するURLを貼り、トピックに#portfolio-websiteを貼り付けるだけです。数日以内にクローリングされます。日本人ポートフォリオはまだ少ないので皆様奮ってご参加ください。

ご一読ありがとうございました。

参考文献

スター用のバッジ作成　https://qiita.com/zizi4n5/items/c5f0013236fd055c3e02

掲載しませんでしたが日本人ポートフォリオの参考に https://qiita.com/turmericN/items/37c3fbe00ee6bbc7e201