CSSのみでハンバーガーメニューを作る

よくあるハンバーガーメニューをCSSのみを使用して作っていきます。
応用するとボタンのクリックに応じて様々な要素をアニメーションさせることが出来ます。

CSSのみで作ると以下のメリットがあると思います。

* JSライブラリに依存しない
* CSSを使用した自由度の高いアニメーション表現が可能

# 完成品


# 1. ヘッダーの作成

まずはヘッダーを作成していきます。

“`html:site_logo.html

Amazon Insentives APIのHTMLサンプルの実行の仕方

自分用メモ

Amazon Insentives APIを使えばアマゾンギフトコードの発行などができます。ただこれに使われている認証方法が「AWS 署名バージョン 4」というものでbasic認証などの用にただ打てばいいというわけではないそうです。ありがたいことにサンプルも用意されていますが、若干古くそのままでは動かなかったのでここにメモします。

1. Web Server for Chromeなどでローカルでサーバーを建てて、サンプルコードがあるディレクトリにネットワーク越しにアクセス可能にする。
2. google-chrome –allow-file-access-from-files –disable-web-security –user-data-dir=/home/USERNAME/HOGEHOGE のようにしてchromeを起動して、1.のURLへアクセス。

React×TypeScriptで作ったポートフォリオサイトを作成した

#はじめに
React、TypeScriptを使った初めての作品として自己紹介サイトを作成しました。

#作成したサイト
https://it-tsumugi.github.io/reactPortfolio/

#実現したいこと
・自分の経歴、能力、作品などが伝わるポートフォリオサイトの作成
・SPAによる高速なページ遷移
・必要な人のみ閲覧してもらえばいいのでSEO対策は考えない
・学習コストが増えすぎるのを防ぐため、サーバーサイドは考慮しなくていい構成にする
・同様の理由で必要以上のフレームワーク、ライブラリを導入しすぎないようにする
・レスポンシブ対応の実装
・チーム開発を意識したコーディングを心掛ける

#使用技術
**フロントエンド**
React, React-Router, React-Hook-Form, EmailJS, TypeScript, styled-component, styled-media-query, Material-UI, react-vertical-timeline-component Yarn, Prettier

**ツール**
Git

Web開発者向けの24のChrome拡張機能

今日の投稿では、ウェブサイトのデザインと開発で一般的に使用されているGoogleChrome拡張機能について学習します。
#Google Chromeとは何ですか？
Google Chromeは、2008年に製造されたWebブラウザであるGoogleの有名で成功した製品の1つです。これは、高度なセキュリティ機能と優れたブラウジングエクスペリエンスを備えたクロスプラットフォームのWebブラウザです。 さらに、アドレスバーのURL提案、メモリ使用量の最適化、ページ応答時間の短縮など、他の多くのデバイスで一緒に使用できる便利なプロパティがいくつか見つかりました。
それだけでなく、プログラマーが作業効率を高め、時間と労力を節約するのに役立つ拡張機能も提供します。 次に、一般的に使用されるChrome拡張機能をいくつか見てみましょう。
#Lorem Ipsum Gener

HTML tableタグ

自分メモ

<"Tabaleタグの使用方法について">

th要素
th要素では、表の「見出し」を作成することができます。

tr要素
tr要素は、表の行を定義するための要素です。

td要素
td要素は、表のデータを入れるための要素です。

【Vue.js】算出プロパティのキャッシュ

#はじめに
こんにちは！
今回は【Vue.js】算出プロパティのキャッシュについてアウトプットしていきます！

#キャッシュとは
・cpmputed・・・キャッシュされる（依存関係に元付きキャッシュされる）
・methods・・・キャッシュされない

#書き方・解説
ランダムの数字を返す処理をcpmputedとmethodsで記述。

“`HTML:HTML

Computed

1. {{ computedNumber }}
2. {{ computedNumber }}
3. {{ computedNumber }}
4. {{ computedNumber }}

Methods

1. {{ methodsNumber() }}
2. {{ methodsNumber() }}
3. {{ methodsNu

オンラインプログラミングを学ぶための10のウェブサイト

プログラミング言語の基礎を学ぶとき あなたは長い間理解し、覚えることができるように練習したいと思うでしょう。 したがって、以下のウェブサイトは、子供たちがより長く覚えるための演習を解決する際にその知識を適用するために生まれました。

これらのサイトの目的は、プログラミングスキルのテストを支援することです。 低いものから高いものへと問題を解決することによって。 それだけでなく、あなたはしなければなりません より高いランキングを達成するために他の開発者と競争してください。 それはゲームをするようなものです。 あなたはブロンズ、シルバーからゴールド、プラチナのような低ランクから行かなければなりません…これらのページが場所になることを願っています プログラミングへの関心を高め、新しい知識を学ぶのに役立ちます。
#Exercism
Exercism Webサイトには、50を超えるサポートされているプログラミング言語で練習できる何千もの演習があります。 その演習も非常に多様で、初心者やプログラミング業界で多くの経験を持つ人に提供されています。 オープンソースであり、世界中のボランティアプログラ

【CSSの基本】そのmarginはどの要素が持っているのか

#【CSSの基本】そのmarginはどの要素が持っているのか
複数人数でコーディング作業していると、「あれ？CSSのmarginの当て方が自分のやり方と違ってて…ちょっと気持ち悪い」って思うことがありませんか？
marginの付け方に強制的なルールはないのですが、何となく一方向に向かってmarginを当てている人が多いと思います。
具体的には要素の下に付けていくタイプ（margin-bottom派）と上に付けていくタイプ（margin-top派）です。

##margin-bottom派？margin-top派？それとも？
「マージンをどっち向きに付けるか問題」は結構古くからネット上の話題に上っています。
結局、強制的なルールがない以上、結論は出ないのですが、だいたい大きく分けて
**margin-bottom派**
**margin-top派**
**ミックス派**
の3つの派閥に分かれているみたいです。

###～シンプルに考えて～margin-bottom派の意見
HTML＋CSSでコーディングをはじめてすぐはmargin-bottom派が多いのではないかと思います。
要素の間を

の意味

HTMLの基本
知ってそうで知らないことをアウトプットしていきます。

の意味
このタグの役割は、「このHTMLドキュメントはHTML5の仕様に基づいて作られている」とブラウザに教えること。

このタグのおかげで、ブラウザがHTMLドキュメントをコードが異なった仕様やバージョンとしてレンダリングするトラブルを回避できる。

【Vue.js】算出プロパティのgetterとsetter

#はじめに
こんにちは！
今回は【Vue.js】getterとsetterについてアウトプットしていきます！

#getterとsetter
・cpmputed（プロパティ）・・・getter,setterが必要
・methods（メソッド）・・・getterのみ必要

getter=**dataの値を取り出すのメソッド**
setter=**dataの値に代入するためのメソッド**

#書き方・解説
今回は税抜価格、税込価格の計算を例に解説していきます。

“`HTML:HTML

base price :

tax included prie :

“`

“`Vue.js
data: {
basePrice: 100
},
computed: {
taxIncludedPrice: {
get: function() {

情報収集自動化

RSSを使って情報収集自動化
————–

情報のソースとなるRSSフィードを選び出します。
各自いつも見ているNewsサイトなどのRSSフィードを取得してください。
今回は[GoogleNews](https://news.google.com/news/rss/headlines/section/topic/TECHNOLOGY?hl=en-US&gl=US&ceid=US:en)です。

### Pythonライブラリの追加

以下のライブラリをインストールしてください。
※pipが無ければapt-getしてください。

“`bash
$ pip install feedparser
$ pip install extractcontent3
$ pip install google-api-python-client
$ pip install google-auth-httplib2
$ pip install google-auth-oauthlib
$ pip install google-cloud-translate
“`

### Pyt

marginの相殺について

★FlexBoxではmarginの相殺が起きない★
（ドットインストール 「詳解CSS フレックスボックス編 #11 縦方向に要素を配置してみよう」）

HTML

“`

Header

Main

【Vue.js】算出プロパティとメソッドの比較

#はじめに
こんにちは！
今回は【Vue.js】算出プロパティとメソッドの違いについてアウトプットしていきます！

#算出プロパティとメソッドの違いとは
**算出プロパティとメソッドの違いは３点あります。**
①算出プロパティ　cpmputed　・・・ （）不要
　 　　　 メソッド　methods・・・　（）必要

②getter,setter
・cpmputed・・・getter,setterが必要
・methods・・・getterのみ必要

③キャッシュ
・cpmputed・・・される
・methods・・・されない

#書き方・解説
##①プロパティとメソッド

“`HTML:HTML

{{ reversedMessage }}

{{ reversedMessageMethod() }}

“`
“`Vue.js
data: {
message: ‘Hello Vue.js!’
},
computed: {

streamlit個人メモ

データ分析などを行ってでも簡単に結果共有したい場合、簡単になにか方法がないかと探ったら`streamlit`にたどり着いたのでちょっと勉強がてら書いてみる。

基本的な`streamlit`についてはGoogleさんに聞いていただくとして実践での活用メモを記載していきます。

## その１．まずはテーブル内の情報をWebリンクさせたい
– `st.dataframe`でWebURLを自動認識するわけでなく
– `st.table`でも同様

う〜ん、どうしたものか

## HTMLを使って書けばよいのですね
こちらからヒントをいただきました、ありがとうございます。
https://github.com/shimat/kanto_it_flu
### streamlitビルドページ
https://share.streamlit.io/shimat/kanto_it_flu/main/main.py

`st.write(xxxx, unsafe_allow_html)`なんてあるわけですから。

## コードはちょっとだけ改変する
HTMLリンクさせたいテーブル列の情報をanker

【SASS】はじめてのSASS

これから自分が学んだことをアウトプットするためこれから記事にしようと思います。
よろしくお願いいたします
【SASSの内容】
SASSとは？
css をより効率的に書けるようにした言語。webページがどんどん複雑になっていくとcssがカオスになっていくため、使いにくい
→コードの再利用、変数、条件分岐ができるようになったのがSASS。特にbootstrapをカスタマイズするときは便利なので使ってみることにした。

【準備①bootstrapのダウンロード】
以下の公式サイトからダウンロード
https://getbootstrap.jp/docs/4.5/getting-started/download/
今回はcomposerからダウンロードすることに

“`composer.bash
composer require twbs/bootstrap:4.5.0
“`
自分の場合はdockerコンテナを利用してタウンロードしたので

“`composer-docker.bash
docker-compose up exec app composer require twbs/bo

適切な「og:type」を選択したい

こんにちは。こんばんは。おはようございます。
いつものように新規サイトを作ってて、いつものようにOGPタグを設定しようとして、いつものようにOGPのmetaタグを書いててふと手が止まりました。
検索すると「og:typeのTOPはwebsite、下層はarticle」って言われてるけど**今もそうなの？**

…………調べようか。

## まずは結論

| 種類 | og:type | 備考 |
|:-:|:-:|:–|
| TOP | website | indexページ |
| 下層ページ | website | articleに該当しない個別ページ
アーカイブとかも含む |
| 記事、投稿 | article | ブログ記事など |
| プロフィール | profile | プロフィールページ
SNSのホーム画面とか |
| 本 | book | 電子書籍のブラウザビューアとか |
| 音楽 | music | 音楽プレイヤーがメインのページ |
| 動画 | video | 動画プレイヤーがメインのページ |

*

GASでStripe決済をゼロから爆速で実装

[](https://youtu.be/oNNvwa4u9zI)

# はじめに

[Stripe](https://dashboard.stripe.com/test/dashboard)という決済プラットフォームをGASで使えたら、スプレッドシートをデータベースにしたり、メールアドレスの入力を無くしたり、全部無料でできるから良いな〜と思ったので、実験しました。

YouTubeでの解説：https://youtu.be/oNNvwa4u9zI

# API キーの発行

テスト環境にチェックを入れて、開発者のボタンを押し、左側の「API キー」からAPIの発行ができます。

![スクリーンショット 2021-10-21 18.15.30.png](https://qiita-image-store.s3.ap-northeast-

Rubyって何？

今日は初めて、プログラミングについて書いていこうと思います！

そもそもプログラミングって何だ？

ってところから入りたかったんだけど、なんせ自分も初心者で、
やり始めた人が最初つまづくところって、きっとRubyだと思うんですよね。
自分だけかな？そうであってくれ。。。！
そうであってくれっていうのも失礼か。。

HTMLとかCSSってのもあるんだけど、プログラミング言語とは少し違くて。
なんならそっちからやりたかったけど、重要なのはRubyみたい！
時間があったらそのうち書くけど、今はRubyから書かせてください。

Rubyって何だ?

https://www.ruby-lang.org/ja/

。。。ん？
ちょっとなんのこっちゃって感じ？
小難しめに書いてるので説明すると
要はプログラミング言語の１つです
初心者が一番最初に触れるかもしれないプログラミング言語なのではないでしょうか？
違ったらすいません。

たまに見たことある真っ黒な画面に、
色の付いた英語の列がずらーっと並んでいてそれをがちゃがちゃ打ち込むのがプログラミングのイメージだと思い

テーブル要素内の文字列の折り返し方法

# テーブル要素内の文字列の折り返し方法

“`css
table.table td {
word-break: break-all;
word-break: break-word;
}
“`

ラベルなしのチェックボックスをカスタマイズする方法

# はじめに

チェックボックスをCSSでカスタマイズする方法は他のいろんな記事にまとめられていましたが、
よく書かれていたのは__ラベルつき__のチェックボックスのカスタマイズする方法でした。

そこでこの記事では、__ラベルのないチェックボックスのみ__をカスタマイズする方法をまとめましたので、どなたかの参考になればなと思います。

# ラベルなしのチェックボックスをカスタマイズする方法

#### before

#### after