What's New Qiita

20200629のHTMLに関する記事は11件です。

  • 投稿日：2020-06-29T23:47:52+09:00

WordPressでエリア検索を実装したい

WordPressで、関東地方の歴史建造物を検索できるサイトを作っており、エリア検索を実装したいと思っています。
キャンプ場検索サイト「なっぷ」のように検索窓をクリックすると、関東地方（１都6県）が縦に表示され、
その中で例えば東京都をクリックすると右側に市区町村が縦に表示されるようにしたいです。
スクリーンショット 2020-06-29 22.55.27.png

市区町村はある程度グループ化して、表記するつもりですが、それでも縦に長くなるので、スクロールをつけると良いのではと考えています。参考はJAL公式サイトです。⬇︎
スクリーンショット 2020-06-29 22.57.43.png

（都県）　　　（市区町村）
東京　　→　 新宿・文京・豊島　　　　‖←スクロールバー　
神奈川　　　渋谷・港・千代田・中央
埼玉　　　　目黒・品川・大田
千葉　　　　世田谷・杉並・中野
茨城　　　　練馬・板橋・北
栃木　　　　江東・台東・荒川
群馬　　　　葛飾・足立・江戸川　　　　（これ以上の市区町村はスクロールすることで表示可能）　
ーーーーーーーーーーーーーーーーー

上記のような実装はカテゴリ検索と呼ぶのでしょうか？
的確な表現がわからず、調べる段階でつまづいております、、
また、実装の手順をおおよそ教えていただけますでしょうか？
お力貸していただけると光栄です。
よろしくお願いいたします。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-06-29T23:41:29+09:00

【初心者でもわかる】いちょう切り。part2（2×2に並べた要素に隙間を作る-flexbox編-）

どうも、7noteです。今回はflexboxを使っていちょう切り「part2」やって行こうと思います。

part1まだの方はこちらからどうぞ！
【初心者でもわかる】いちょう切り。part1（4つの要素を2×2に並べる方法-flexbox編-）

「・・・（CM明け）・・・」
「さて、4等分にしたオレンジを並べるのはできたでしょうか？」
「上手くできなかった、という方はコメントくださいね！」
「ここからは、2×2に並べたオレンジに隙間を作っいきます。」
「ラストスパートがんばっていきましょう！」

最終完成予定イメージ

orange_fix.png

今回の材料はこちら(1人前)

ファイル CSSプロパティ 意味
index.html
style.css background: ~~;
justify-content:space-between;
display: inline-block;
margin: ~~;		 背景の色を設定
横並びを等間隔に設定
隙間を当てるため
隙間を設定
orange_01.png オレンジの画像（左上）
orange_02.png オレンジの画像（右上）
orange_03.png オレンジの画像（左下）
orange_04.png オレンジの画像（右下）

作り方

  1. 前回part1で作ったindex.htmlを用意。見やすいように背景に色を入れます。
  2. 5pxの縦線の隙間を作ります。（垂直方向の隙間）
  3. 5pxの横線の隙間を作ります。（水平方向の隙間）
  4. 見えない隙間に注意して完成！

1. 前回part1で作ったindex.htmlを用意。見やすいように背景に色を入れます。

style.css
.dish {
    width: 400px;
    display: flex;
    flex-wrap: wrap;

    /*--ここから下を追加--*/
    background: #CCC; /*見やすいように背景色を指定*/
}

2. 5pxの縦線の隙間を作ります。（垂直方向の隙間）

今回は親要素（dish）の横幅を広げて簡単に行いますが、親要素が動かせない時は、子要素の大きさを変更して対応しましょう。
子要素の大きさを変えてやる方法はまたいつか記事書こうかな。

style.css
.dish {
    width: 405px; /*400pxから405pxに変更*/
    display: flex;
    flex-wrap: wrap;
    background: #CCC;

    /*--ここから下を追加--*/
    justify-content: space-between; /*要素を左右均等に水平方向に並べる*/
}

3. 5pxの横線の隙間を作ります。（水平方向の隙間）

style.css
/*--ここから下を追加--*/

.dish img {
    display: inline-block; /*marginを当てるために必要*/
    margin-bottom: 5px; /*下方向に5pxの隙間を作成*/
}

4. 見えない隙間に注意して完成！

ぱっと見できてそうに見えるが、これでは綺麗なコーディングとは呼べません！
一工夫しましょう！
今起きている問題はここです。

orange_ng.png

オレンジ色の部分がmarginです。
03と04（オレンジの下半分）にもmargin-bottomがついてしまっているので、
01と02にだけborder-bottomが効くように変えてみましょう。

style.css
.dish img {
    display: inline-block; /*marginを当てるために必要*/
}

/*--ここから下に変更--*/
.dish img:nth-child(-n+2) { /*最初から2番目にまで適応*/
    margin-bottom: 5px; /*下方向に5pxの隙間を作成*/
}

＼完成／

orange_fix.png

解説・作り方のコツ

  • 隙間を開ける方法は他にもいろいろありますが、今回は簡単に隙間を作る方法を紹介しました！違う方法もまたそのうち記事書こうかな。

素材データ配布

真似して作りたい人はこの画像をダウンロードして使ってね！
orange_01.png
orange_02.png
orange_03.png
orange_04.png

おそまつ！

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

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-06-29T23:30:44+09:00

スクロール位置に応じて下線が追従するグローバルメニュー

はじめに

コーディングを行う際、ヘッダーのメニューにある下線をスクロール位置ごとに動かしたかったのですが、躓いてしまったため残したいと思います。
私はコーディング歴も浅く、手探りで実装したので、もしより良い方法があればご教授いただけると幸いです。

完成形

menu.gif

コード

下線が追従する基本的な形はこちらを参考にしました。

sample.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sample</title>

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css">
  <link rel="stylesheet" href="css/style.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="js/script.js"></script>
</head>
<body>
  <header class="header">
    <nav id="navigation">
      <ul>
        <li class="current">
          <a href="#">content</a>
        </li>
        <li class="menu-2">
          <a href="#">second-content</a>
        </li>
        <li class="menu-3">
          <a href="#">3rd-content</a>
        </li>
        <li class="menu-4">
          <a href="#">4</a>
        </li>
      </ul>
      <span id="slide-line"></span>
    </nav>
  </header>
  <div class="contents">
    <div class="content" id="content1">ひとつめ</div>
    <div class="content" id="content2">ふたつめ</div>
    <div class="content" id="content3">みっつめ</div>
    <div class="content" id="content4">よっつめ</div>
  </div>
</body>
style.css
header{
  width: 100%;
  height: 30px;
  position: fixed;
}
ul li {
  display: inline-block;
}
a{
  display: inline-block;
  padding: 30px 20px;
  font-size:14px;
  text-decoration:none;
}
#navigation{
  position: relative;
}
#slide-line{
  position: absolute;
  bottom: 0;
  height: 2px;
  background-color:#75C2FF;
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
}

.content{
  height: 700px;
  padding: 80px;
}
.content:nth-child(odd){
  background-color: #f5f5f5;
}
script.js
$(window).load(function(){
  $('nav span').css({
    width: $('nav .current').width(),
    left: $('nav .current').position().left
  });

  $(window).scroll(function () {
    let content2 = $('#content2').offset().top;
    let content3 = $('#content3').offset().top;
    let content4 = $('#content4').offset().top;
    if ($(this).scrollTop() < content2) {
      if ( ! $('header').hasClass("current1") ) {
        $('header').addClass("current1");
        $('header').removeClass("current2 current3 current4");
        $('nav span').animate({
          width: $('nav .current').width(),
          left: $('nav .current').position().left
        });
      }
    }else if ($(this).scrollTop() > content2 && $(this).scrollTop() < content3) {
      if ( ! $('header').hasClass("current2") ) {
        $('header').addClass("current2");
        $('header').removeClass("current1 current3 current4");
        $('nav span').animate({
          width: $('.menu-2').width(),
          left: $('.menu-2').position().left
        });
      }
    }else if ($(this).scrollTop() > content3 && $(this).scrollTop() < content4) {
      if ( ! $('header').hasClass("current3") ) {
        $('header').addClass("current3");
        $('header').removeClass("current1 current2 current4");
        $('nav span').animate({
          width: $('.menu-3').width(),
          left: $('.menu-3').position().left
        });
      }
    }else if ($(this).scrollTop() > content4) {
      if ( ! $('header').hasClass("current4") ) {
        $('header').addClass("current4");
        $('header').removeClass("current1 current2 current3");
        $('nav span').animate({
          width: $('.menu-4').width(),
          left: $('.menu-4').position().left
        });
      }
    }
  });
});

仕組み

まずメニューバーが動く仕組みについてですが、animateメソッドを使って横幅と位置を指定することで動きをつけています。
こちらの詳細は参考サイトにございますのでご覧ください。

let content2 = $('#content2').offset().top;
let content3 = $('#content3').offset().top;
let content4 = $('#content4').offset().top;
次にスクロールによる、スクロールをした時の区切りとなる要素の位置を上記で定義します。
以下のif文に関しての説明です。
現在のスクロール位置が特定の区切りの中（例えばcontent2の中）にいるか、かつheaderが特定のクラス（前の例えだとcontent2というクラス）を持っていないとメニューバーが動くという仕組みです。

悩んだこと

今回はheaderのクラスのつけ外しを行うことでうまく動かしているのですが、これをする前はうまくいっていませんでした。
console.logなどで確かめてみるとわかるのですが、scrollアクションは少しのスクロールで何回も発火するため、その度にanimateメソッドが読み込まれ非常に処理が重くなってしまいました。
そこで私は、animateメソッドが読み込まれるのをスクロール位置が切り替わった時のみにしたいと考え、クラスの有無を条件式としてあげることで重くなることを防ぐことができました。

おわりに

最後までご覧いただきありがとうございます。
この方法は初心者の私が考えたやり方のため、無理のある記述の可能性があります。
ぜひ有識の方がいらしたらご意見くださると幸いです。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-06-29T23:30:44+09:00

スクロール位置に応じてバーが追従するグローバルメニュー

はじめに

コーディングを行う際、ヘッダーのメニューにある下線をスクロール位置ごとに動かしたかったのですが、躓いてしまったため残したいと思います。
私はコーディング歴も浅く、手探りで実装したので、もしより良い方法があればご教授いただけると幸いです。

完成形

menu.gif

コード

下線が追従する基本的な形はこちらを参考にしました。

sample.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sample</title>

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css">
  <link rel="stylesheet" href="css/style.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="js/script.js"></script>
</head>
<body>
  <header class="header">
    <nav id="navigation">
      <ul>
        <li class="current">
          <a href="#">content</a>
        </li>
        <li class="menu-2">
          <a href="#">second-content</a>
        </li>
        <li class="menu-3">
          <a href="#">3rd-content</a>
        </li>
        <li class="menu-4">
          <a href="#">4</a>
        </li>
      </ul>
      <span id="slide-line"></span>
    </nav>
  </header>
  <div class="contents">
    <div class="content" id="content1">ひとつめ</div>
    <div class="content" id="content2">ふたつめ</div>
    <div class="content" id="content3">みっつめ</div>
    <div class="content" id="content4">よっつめ</div>
  </div>
</body>
style.css
header{
  width: 100%;
  height: 30px;
  position: fixed;
}
ul li {
  display: inline-block;
}
a{
  display: inline-block;
  padding: 30px 20px;
  font-size:14px;
  text-decoration:none;
}
#navigation{
  position: relative;
}
#slide-line{
  position: absolute;
  bottom: 0;
  height: 2px;
  background-color:#75C2FF;
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
}

.content{
  height: 700px;
  padding: 80px;
}
.content:nth-child(odd){
  background-color: #f5f5f5;
}
script.js
$(window).load(function(){
  $('nav span').css({
    width: $('nav .current').width(),
    left: $('nav .current').position().left
  });

  $(window).scroll(function () {
    let content2 = $('#content2').offset().top;
    let content3 = $('#content3').offset().top;
    let content4 = $('#content4').offset().top;
    if ($(this).scrollTop() < content2) {
      if ( ! $('header').hasClass("current1") ) {
        $('header').addClass("current1");
        $('header').removeClass("current2 current3 current4");
        $('nav span').animate({
          width: $('nav .current').width(),
          left: $('nav .current').position().left
        });
      }
    }else if ($(this).scrollTop() > content2 && $(this).scrollTop() < content3) {
      if ( ! $('header').hasClass("current2") ) {
        $('header').addClass("current2");
        $('header').removeClass("current1 current3 current4");
        $('nav span').animate({
          width: $('.menu-2').width(),
          left: $('.menu-2').position().left
        });
      }
    }else if ($(this).scrollTop() > content3 && $(this).scrollTop() < content4) {
      if ( ! $('header').hasClass("current3") ) {
        $('header').addClass("current3");
        $('header').removeClass("current1 current2 current4");
        $('nav span').animate({
          width: $('.menu-3').width(),
          left: $('.menu-3').position().left
        });
      }
    }else if ($(this).scrollTop() > content4) {
      if ( ! $('header').hasClass("current4") ) {
        $('header').addClass("current4");
        $('header').removeClass("current1 current2 current3");
        $('nav span').animate({
          width: $('.menu-4').width(),
          left: $('.menu-4').position().left
        });
      }
    }
  });
});

仕組み

まずメニューバーが動く仕組みについてですが、animateメソッドを使って横幅と位置を指定することで動きをつけています。
こちらの詳細は参考サイトにございますのでご覧ください。

let content2 = $('#content2').offset().top;
let content3 = $('#content3').offset().top;
let content4 = $('#content4').offset().top;
次にスクロールによる、スクロールをした時の区切りとなる要素の位置を上記で定義します。
以下のif文に関しての説明です。
現在のスクロール位置が特定の区切りの中（例えばcontent2の中）にいるか、かつheaderが特定のクラス（前の例えだとcontent2というクラス）を持っていないとメニューバーが動くという仕組みです。

悩んだこと

今回はheaderのクラスのつけ外しを行うことでうまく動かしているのですが、これをする前はうまくいっていませんでした。
console.logなどで確かめてみるとわかるのですが、scrollアクションは少しのスクロールで何回も発火するため、その度にanimateメソッドが読み込まれ非常に処理が重くなってしまいました。
そこで私は、animateメソッドが読み込まれるのをスクロール位置が切り替わった時のみにしたいと考え、クラスの有無を条件式としてあげることで重くなることを防ぐことができました。

おわりに

最後までご覧いただきありがとうございます。
この方法は初心者の私が考えたやり方のため、無理のある記述の可能性があります。
ぜひ有識の方がいらしたらご意見くださると幸いです。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-06-29T22:58:15+09:00

HTML,CSS学習からPF(ポートフォリオ)作成まで

HTML,CSS学習からポートフォリオ作成へ

著者は昨年の11月からHTML,CSSを学習し始めました。

純粋に好奇心とパソコンでできることに憧れがあって始めて見たのがきっかけです。

最近では著者自身もツイッターをしていてよく見かけるのですが、Web制作をするためにHTML,CSSを学習している方がかなり多くいらっしゃいますよね。

皆さんの積み上げなどもご参考にさせていただいてます。

そんな中、この記事では少しでもご参考になればと今までの自分の体験談、学習内容、意見等をお伝えできればと思います。
著者もまだまだ成長途中なので、随時更新や皆さんにできるだけ有益な内容にできるよう努めていきますし、ご参考にしていただけると幸いです。

目次(随時更新)

コンテンツ 難易度 更新日時
使う教材を決める ★☆☆☆☆ 2020/06/29

使う教材を決める

HTML,CSSを学習していく際に大事なのが使う教材が皆さんそれぞれで合うものを選ばないといけません。
そうしないと挫折してしまう可能性が高くなってしまうので、慎重に選びます。

以下に目安の表を作成してみました。

型分類 教材 学習法 向いている方
実践型 Progate スライドを確認しながらコードを書く 体を動かして体感で覚えられる方
動画型 Udemy,Dotinstall 動画を見ながらコードを書く 授業を受けて理解できる方
読解型 書籍 書籍をみながらコードを書く 自分で理解しながら進められる方

上記は一例ですが、目安として考えてみてください。

「実践型」「動画型」から始めるのがおすすめです。
「読解型」は慣れていないと理解が進まず進行が詰まってしまうので、慣れるまではおすすめしません。
慣れてきたら書籍を見ていくのがおすすめです。

今後の更新内容

次回以降の更新内容です。

コンテンツ 難易度 追記日時
各型分類の学習法 ★☆☆☆☆ 近日中
HTML,CSSを進め方 ★☆☆☆☆ 近日中
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-06-29T22:47:32+09:00

SEOの観点から見たlinkタグのrel属性一覧とその用途

目的

本稿は、プロジェクトで dns-prefetch を使用しているメンバがいた為、
今後の知見のために、上記についてまとめることで今後自身で対応する際に
調べる時間を減らすことを目的とする。

＃ どうせならば dns-prefetch 以外rel属性もまとめることで、
＃ 関連付けて覚えてしまおうという魂胆からプロジェクトで頻出度
＃ が高いrel属性も記載する。

rel属性とは

自分のページと外部ページやファイルを関連づけるlinkタグの属性
であり、href属性で記載したURLとの関係性を表す属性である。

＃ linkタグは <HEAD>～</HEAD> 間で使用

rel属性一覧

rel属性は複数あり、その一覧を以下に記載する。

  • href先との関係性を検索エンジンに示す
  • リソースをバックグラウンドで先に読み込む

＃ 随時追加予定

href先との関係性を検索エンジンに示す

▼ 使用例

<link rel="canonical" href="https://sample.co.jp">

検索エンジンに対してhrefで記載したURLが正規のURLであることを示す。

内容が同じなのにURLに差異があると、検索エンジンに別のページだと見なされる
可能性がある。その場合、評価が分散し、結果的にページの評価が下がってしまう。

＃ 同ページにhttps://sample.co.jp と https://sample.co.jp/
＃ をhrefに記載している場合など。

そのため canonical を設定することでページの評価分散を避ける。

リソースをバックグラウンドで先に読み込む

hrefで記載したリソースを事前に読み込んでおくことで、
ページ遷移時のパフォーマンスを向上させる（Resouce Hints）。

また Resouce Hints は以下で構成されており、各説明は以降で記載する。

  • dns-prefetch
  • preconnect
  • prefetch
  • prerender

■ dns-prefetch

▼ 使用例

<link rel=”dns-prefetch” href=”//sample.co.jp”>

外部サイトから通信を確立する際に、事前に名前解決
を行うことで遷移時の処理を省略することが出来る。

■ preconnect

▼ 使用例

<link rel=”preconnect” href=”//sample.co.jp”>

TCP three-way handshaking1や SSL/TLS session negotiation2を事前に処理する。

■ prefetch

▼ 使用例

<link rel=”prefetch” href=”/sample.js” as="script">

リソースを予めキャッシュに格納する。

dns-prefetch や preconnect と違い、通信の確立ではなく画像のような
リソースを取得する際に使用する。また、as属性 で取得するリソースの種類
を指定することで、ブラウザ側が最適なプロセスでリソースを取得可能となる。

＃ リソースのサイズが大きいまたはネットワーク速度が遅い場合は行わない。

■ prerender

▼ 使用例

<link rel=”prerender” href=”//sample.co.jp”>

prefetch のようなリソースのダウンロードだけでなく、リンク先のDOM構築や
JavaScriptの実行まで行う。CSSやJavaScriptが実行されることで、遷移した際はレン
ダリングが完了している状態となる。

＃ アクセス前なのにCSSのアニメーションが動作するといった事象が発生する。
＃ その場合、Page Visibility API などで対策する必要がある。
＃ 複数指定は不可。

参照URL

  1. データ転送を行う前にコネクションの確立を行うこと。 ↩

  2. 暗号化した通信路上でHTTPプロトコルを利用すること。 ↩

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-06-29T21:58:54+09:00

HTML DJANGOのデータベース更新

このような形でvieww.pyからgoodの数をデータベースから引っ張ってきて数を＋1させて表示させたいのですが、うまくできません。どこが間違っているのでしょうか、、。?よろしくお願いいたします。

def good(self, pk):
    smart = Smart.objects.get(pk=pk)
    smart.good = smart.good + 1
    smart.save()
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-06-29T16:45:17+09:00

jQueryでさくっとアコーディオンメニューを作る

本当にさくっと作りたい時のメモ用
本当に最低限の動きだけ。

HTML
<div class="js-accordion-toggle">開く</div>
<div class="js-accordion-item" style="display:none;">
　ここにコンテンツが入る
</div>

ボタンとなる要素に.js-accordion-toggle、開閉したい要素に.js-accordion-itemを設定。
display:none;を直書きしているのはHTMLが一番早く読み込まれるため、CSSやJSに設定を追加するよりも遅延が少なく、コンテンツが一瞬表示されてしまうのを防ぐため。

ページが開いた状態を初期状態にしたい場合はstyle="display:none;"を書かずに.js-accordion-toggleにis-openクラスを追加しときましょう。

jQuery
  var $toggle       = $( '.js-accordion-toggle' );
  var $item         = $( '.js-accordion-item' );
  var openClass     = 'is-open';
  var operationText = [ open:'開く', close:'閉じる' ];


  $toggle.on( 'click', function() {
    if ( $( this ).hasClass( openClass ) ) {
      $( this ).removeClass( openClass );
      $( this ).next( $item ).slideUp();
      $( this ).text( operationText[open]);
    } else {
      $( this ).addClass( openClass );
      $( this ).next( $item ).slideDown();
      $( this ).text( operationText[close]);
    }
  });

クリックした$toggleがis-openクラスを持っているかどうかを判別し、

  • ついていなければis-openを付与し、直下にある$itemを表示させる。
  • ついていればis-openを削除し、直下にある$itemを非表示にする。

operationTextはボタンの文言を変更するための文字列のまとまり。

  • is-openがついていればoperationText[open]に格納されている文字列を表示
  • ついていなければoperationText[close]に格納されている文字列を表示させる。

以上です。
さっくりアコーディオンさせたい場合のメモでした。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-06-29T14:39:24+09:00

2Dのドット絵作成ツールを作ってみる

2Dドット絵作成ツール開発をしました。

参考にした資料

  • 『いちばんやさしいJavascript 入門教室』 (廣瀬豪)

実施できたこと

  • 任意の色を選択してドット絵を作成できる機能　（16×16）
  • 削除機能
  • ドット絵を画像として保存する機能
  • 実際に手元にあるナノブロックの色に近いカラーパレット作成

コード

<!DOCTYPE html>
<html lang="ja">
 <head>
  <meta charset="utf-8">
  <title>ピクセルアート作成</title>
  <style>
  table { border-collapse: collapse; }
  td {
   width: 30px;
   height: 30px;
   border: solid 1px;
  }
  </style>
          <a href="index.html"><img src="ant-logo4.png" alt="街を作ろう"></a>
 </head>
 <body>
  <div>
   <table id="pixelTBL"></table>
   <br>
   <table id="paletteTBL"><tr></tr></table>
  </div>
  <br>

  <div>
   <input type="image" src="clear.png" alt="削除" onclick="clearCell()">
   <input type="image" src="download.png" alt="画像保存" value="画像保存" onclick="drawCanvas()">
   <canvas id="picture" width="16" height="16" style="border:solid 1px;"></canvas>
  </div>

  <script>
  const Matrix_Rows = 16;
  const Matrix_Cols = 16;
  let Color_Index = "black";

  const pixelTBL = document.getElementById("pixelTBL");
  const paletteTBL = document.getElementById("paletteTBL");

  const cvs = document.getElementById("picture");
  const ctx = cvs.getContext("2d");

  function pixelTable() {
   for(let i=0; i<Matrix_Rows; i++) {
    let row = pixelTBL.insertRow(-1); 
    for(let j=0; j<Matrix_Cols; j++) {
     let cell = row.insertCell(-1); 
     cell.onclick = function(){
      this.style.backgroundColor = Color_Index; 
     }
    }
   }
  }

  let COL_palette = [ "#ffffff", "#000000", "#ff4500", "#1e90ff", "#f5deb3", "#a52a2a", "#fffacd", "#808080", "#800080", "#ff0000", "#32cd32", "#00ff00", "#d2691e", "#5f9ea0", "#008b8b" , "#00bfff", 
  "#ffff00", "#8b4513", "#c71585", "#ffb6c1"];

/*
白 #ffffff
黒 #000000
オレンジレッド   #ff4500
青 #1e90ff
アイボリー #f5deb3
ワイン   #a52a2a
黄色  #fffacd
グレー   #808080
紫 #800080
赤 #ff0000ß
緑 #32cd32
黄緑  #00ff00
チョコレートブラウン  #d2691e
深緑1 #5f9ea0
深緑2 #008b8b
水色  #00bfff
黄色  #ffff00
こげ茶   #8b4513
ショッキングピンク #c71585
薄ピンク    #ffb6c1
*/
  function paletteTable() {
   for (let j=0; j<COL_palette.length; j++) {
    const cell = paletteTBL.rows[0].insertCell(-1); 
    cell.style.backgroundColor = COL_palette[j];
    cell.innerHTML = "<img src='cube1.png'>";
    cell.style.padding = "0px";
    cell.style.border = "0px";
    cell.onclick = function(){
     Color_Index = this.style.backgroundColor; 
    }
   }
  }

  function clearCell() {
   for (let i=0; i<Matrix_Rows; i++) {
    for (let j=0; j<Matrix_Cols; j++) {
     pixelTBL.rows[i].cells[j].style.backgroundColor = "white";
    }
   }
   ctx.fillStyle = "white";
   ctx.fillRect( 0, 0, 16, 16 );
  }

  function drawCanvas() {
   for (let i=0; i<Matrix_Rows; i++) {
    for (let j=0; j<Matrix_Cols; j++) {
     let col = pixelTBL.rows[i].cells[j].style.backgroundColor;
     ctx.fillStyle = col;
     ctx.fillRect( j, i, 1, 1 );
    }
   }
  }

  window.onload = function() { 
   pixelTable();        
   paletteTable();  
   clearCell();     
  }
  </script>
 </body>
</html>

動き

https://3dblock.jp/

image.png

image.png

以下が削除ボタンです。

image.png

以下がダウンロードボタンです。
image.png

クリックすると画像として保存できます。
image.png

実際の画像→　ダウンロード.png

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-06-29T14:38:29+09:00

Progate学習 中級編メモ

HTML&CSS　中級編

■プロパティ、タグ等まとめ

※機能の詳細が何かは省略しています

学習過程でプロパティ等は暗記する必要はないと考えていますが（その都度ぐぐる）中級編道場をスムーズに進めるためにまとめました。

・background-image: url(画像のURL);
・background-size: cover;
・margin:0 auto; (widthとセット)
・opacity: 0.7;
・letter-spacing: 10px;
・display: inline-block;
・div class="btn blue"（複数指定）
・div: hover{
background-color: red;
}
・border-radius
・text-aligin: center;　（margin: 0 auto;との違い）
・＜span class="fa fa-facebook"＞＜/span＞（CSSでシート読み取る必要あり）
・opacityとrgbaの違い
background-coor: rgba(84,190,238,0.5);
・transition: all 1s;
・line-height: 10px;
・font-weight: bold;
・width: 50%;
・position: absolute;
top:50px; left: 70px;
・position: relative;
・box-shadow: 0px 10px #0000;
・cursor: pointer; （text）
・div:active{
background-color:red
}
・box-shadow:none ;
・btn.active{
position: relative;
top: 6px;
box-shadow: none;
}
・position: fixed;
top: 10px; left: 40px;
・z-index: 1; （potisionと併用）

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-06-29T07:24:05+09:00

[Web開発]Web開発する際に、有用なサービス

はじめに

今から紹介をするサービスは個人的にWeb開発する際に、有用だと思ったサービスです。

codepen

フロントエンドコードを構築、テスト、および検出するのに最適なサービスです。
CodePenは、フロントエンドデザイナーと開発者のためのソーシャル開発環境です。
Web サイトの構築と導入、作業の成果の誇示、学習とデバッグのためのテスト ケースの構築、インスピレーションの獲得が出来ます。

https://codepen.io/

devdocs

開発する際に、HTMLやJavascript等する際に、気になるメッソド等説明やコードを確認出来ます。

https://devdocs.io/

remixicon

シンプルなアイコンシステム
Remixアイコンは、デザイナーや開発者向けオープンソースのニュートラルスタイルのシステムシンボルのセットです。
これらのアイコンは、個人用と商業用の両方で無料で利用出来ます。

https://remixicon.com/

caniuse

caniuseはAlexis Deveriaによって構築され、管理されており、Web開発コミュニティによって時々アップデートが提供されています。
簡単にHTMLやCSSをブラウザことにサーポタ情報を教えてくれるサービスです。

https://caniuse.com/

mockaroo

独自の仕様に基づいてランダムに生成された大量のテストデータをすばやく簡単にダウンロードし、SQL または CSV 形式を使用してテスト環境に直接ロード出来ます。

https://www.mockaroo.com/

備考

  • 特にありません。
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

日付別

タグ一覧