ドラ〇もんも大好きな「どら焼き」をCSSだけで作ってみた。

#どうも7noteです。なんか偶然の副産物でできてしまったので、記事にしてみました。

※ちなみに筆者はあんこが苦手なのでどら焼きは食べません。

**完成図**


## ソース

“`index.html

“`

“`style.css
.dorayaki {
height: 60px; /* どらやきの大きさ */
width: 75px; /* どらやきの大きさ */
position: relative; /* 疑似要素たちの基準値とする */
}

/* 上の生地と下の生地の共通CSS */
.dorayaki::before, .dorayaki::after {
content: “”;

画像から機械学習したモデルで、酔っ払っているかどうかを判断してアウトだったら警報色ライトをつけた

#見事に酔っぱらった
__酔っぱらってたらライトがつきます。__
実際ライトをつけたのは携帯を持つ前です。（顔は同じで携帯が画像範囲に入っていない状態）

__■酔っ払い前__
このとき、ちゃんと真正面を向ける酔ってない具合

ひげが伸びてる時で目のところにライン付けると危ない人みたいですね笑

__■酔っ払い後__
ぐでんぐでんに酔っぱらったみたいに首を曲げてみました。
__ちゃんと電気がついた！！__

#

あなたがまだ使っていないかもしれないHTML5の便利機能10選

https://twitter.com/livesports36/status/1325013585202827264

obnizってフロントエンド側からどうつなぐのか？メモ(ml5.js)

#やろうとしてたこと
ml5.jsのImageClassifierで画像を分類→読み取った値が「酔っ払い」だったらobnizでライトをつける。

分類するJSはhtml内に記載されている。

#結果
フロントエンドからの呼び出し自体はnode.jsの時とほぼ同じ。
srcの指定を入れる必要があった。（最新のバージョンだとなぜかコンソール上に404のエラーが。。。これも原因だったのかも。）

“`javascript

“`

vue.js内で関数Aから関数Bを呼び出すのがうまくいっていなかった。

vue.js内で、obniz.onconnect = async function () {}みたいな感じで呼び出そうとしていたが、
そこに処理が入っていなかった。

そもそも、vue.jsの外側でobnizを接続状態にしておいたらうまくいった。
なぜ。。。

あなたがまだ使っていないかもしれないHTML5の便利機能10選

https://twitter.com/livesports36/status/1325012986944135168

CSSでテーブルからはみ出した部分を省略する

## 実装例

テーブルからはみ出た部分を…で省略する方法です。

See the Pen
BazOmeY by yamazaki (@y_m_z_k)

Mixinでanimationの関数化

#Animationの関数化Mixinについて

mixinを使ってanimationプロパティをまとめると、
使用するときに名前だけ設定すればmixin内のanimationプロパティがdefault値として適用されます。

###mixinの設定
　↓　のようにmixinにanimationプロパティをぶち込みます。
ちなみにanimation:{}はanimation-OOOを省略してます。
面倒な設定ですが、一つひとつ設定するよりかはマシになります。

“`
@mixin.animationNoNamae(
$name,
$duration: 1s,
$timing-function: ease,
$iteratin-count: infinite,
$direction: normal
){
animation: {
name: $name;
duration: $duration;
timing-function: $timing-function;
iteration-count: $iteration-count;
direction: $direction;
}

z-indexが効かない！？　それ、スタックコンテキストのせいかも

# はじめに
要素を重ねる時、z-indexの数字だけ意識していませんか？
スタックコンテキストを意識していないとz-indexの値をいくら大きくしても要素が思い通りに前面に来ない！という事があります。
今回は、そのスタックコンテキストを取り扱っていきます！

# スタックコンテキストとは
positionプロパティの値がstatic以外で、z-indexプロパティの値がauto以外の場合に生成される文脈　だそうです。
うーん、わかりづらい！笑

# 実践
とりあえずベースとなるHTMLとCSSを作成

【初心者でもわかる】CSSで任意の位置で写真を丸く切り抜く方法。

#どうも7noteです。四角の写真をCSSで丸く切り抜く方法。

四角形の写真（長方形でも可）を任意の位置を中心に切り抜く方法です。

フォトショップなどを使わずにCSSで丸く切り抜いていきます。

**切り抜く前の画像**

**切り抜いた画像**
↓は右下にフォーカスしたもの
![mihon2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661092/ef47143d-9235-9e00-cade-5eebd3

位置指定(position)で％を使用することで起きた弊害

#以下のようなスライドダウンで開くコンテンツがあるとする

See the Pen
pull_down_1 by yoshida (@yoshi090

【初心者でもわかる】flexboxで縮めたくない要素には「flex-shrink」を使え

#どうも7noteです。flexboxのよく使う小技。

flexboxは便利で使い勝手がいいのですが、たまに横の要素が長くなった影響で、widthを指定していても無理に縮小されてしまうことがあります。


これの対策方法として、**「flex-shrinkを指定する」**方法があります。

## 対策

“`index.html

ポイント

テキストが長くなっても「flex-shrink: 0;」を指定していれば大丈夫！

“`

“`css
.box {
width: 400px;
border: 1px solid #000;
margin-bottom: 10px;
display: flex;
align-items: cen

Deviseを使ってユーザー管理機能を実装

#Deviseをインストール
何と言ってもまずは、このgemをinstallするところから全ては始まります。

“`ruby:deviseのインストール
% gem’devise’
% bundle install
% rails g devise:install
“`
これでdeviseのインストールが完了です。

##devise関連のファイル

###modelを生成

“`
rails g devise user
“`
ユーザーモデルとマイグレーションファイルが生成されます。
またこのコマンドを実行すると`config/routes.rb`に自動でdeviseのルーティングが設定されます。

“`config/routes.rb
Rails.application.routes.draw do
devise_for :users
# For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html
end
“`

これから学ぶ言語まとめ

これからプログラミングの学習を始めるにあたり言語の内容や役割を調べてみました。下記にまとめましたのご確認ください。間違い等ありましたご指摘の方よろしくお願いいたします。

HTMLについて
HTML（エイチティーエムエル、HyperText Markup Language）は、ウェブページを作成するために開発された言語であり、 現在、インターネット上で公開されてるウェブページのほとんどは、HTMLで作成されている。
ハイパーテキストでは、ウェブページから別のウェブページにリンクをはったり、 ウェブページ内に画像・動画・音声などのデータファイルをリンクで埋め込むことができ、 HTMLには、このハイパーリンク機能で関連する情報同士を結びつけて、情報を整理するという特徴がある
身近なHTMLとしてウェブサイト、電子メール（HTML形式）、スマホアプリがあげられる。

CSSについて
CSS（Cascading Style Sheets、カスケーディング・スタイル・シート）とは、ウェブページのスタイルを指定するための言語です。 ワープロソフトなどで作成される文書も含めて、文書のスタイルを指定

実家の会社の日報表をwebアプリ化した。（スマホ用）

#はじめに
実家の会社が未だに紙ベースでやりとりをしているので、実際に使ってほしいという気持ちを持ちつつ作ってみました。（スマホ用）
#概要と背景
– 営業マンがその日行った営業を日報表にまとめてその日の終わりに提出する。
– 紙面でのやりとりなので、事前に報告ができない、過去の営業記録をいちいち紙で探す必要がある、など不便なことが多い。
– 日報表の項目は、訪問先住所・訪問先氏名・会見者・訪問結果・内容・日付の6項目。
– 社員の管理は社員用テーブルで管理し、訪問履歴はセールス記録テーブルで管理する。
– 訪問履歴は社員に個別に与えられた社員番号で個別に管理する。

#開発環境
– サーバーサイド
– java
– java EE
– フロントサイド
– javascript
– html
– css
– データベース
– MySQL
– その他
– bootstrap

#基本機能
– ログイン機能
– 社員名と社員ごとに与えられたパスワードで管理
– セッションによるログイン管理
– ログアウト機能

Bootstrapのフッター mt-autoの設定

JSPを開発していますが、デザインにはBootstrapを使用しています。

今回はヘッダーとフッターを付けよう！っていうテーマでBootstrapを調べていました。

やりたいイメージとしてはこれ
https://getbootstrap.com/docs/4.5/examples/sticky-footer-navbar/

このヘッダーとフッターの配置にしたい。

でもこうかな？と思って抜粋して色々試してみてもフッターが上手く画面下部に張り付きません。

で、サンプルダウンロードして不要そうな所消してフッターの位置だけ保持できたのがコチラ。

“`HTML

【データ分析】Google Charts便利機能まとめ

# 対象者
– グラフを使ってデータ分析したい
– グラフのカスタマイズ機能やフィルター機能など目一杯使いたい
– javascript 応用者

# グーグルチャートについて
グーグルチャートについては、[こちら](https://qiita.com/narumiyam/items/d6aab8aa85ab0f80fa75) の記事にまとめておりますのでご覧ください。
今回は、グーグルチャートには実はこういった便利機能がある！という紹介なので、
使い方について、こちらの記事では言及していません。
気になったものがあれば公式ドキュメントをご覧ください。

## グーグルスプレッドシートを活用したグーグルチャートの使用方法
[Google Spreadsheets](https://developers.google.com/chart/interactive/docs/spreadsheets)

>日本語訳
>
GoogleChartsとGoogleSpreadsheetsは緊密に統合されています。
GoogleチャートをGoogleスプレッドシート内に配置すると、Googleチャー

スクリーンセーバーみたいなページ作ってみた

windowsとかでよくみるスクリーンセーバーをHTMLとCSSで作ってみました。

常にブラウザの中央に回転する「Windows 10」を配置。


## ソース

“`index.html

Windows 10

“`

“`style.css
body {
background: #000;
position: relative;
width: 100vw;
height: 100vh;
margin: 0;
padding: 0;
}

p {
color: #fff;
font-size: 50px;
display: inline-block;
animation: spin 5s infinite linear;
position :absolute;
top:

【Bootstrap】基本のクラスまとめ

# 概要

最近、Bootstrapを使ってフロントを作っています。
自分への備忘録としてこれまでに使ってきたクラスをまとめておきます。

参照
Bootstrap (ver. 4.5) : https://getbootstrap.jp/

# ブレークポイント

* sm : 576px
* md : 768px
* lg : 992px
* xl : 1200px

# レイアウト
## container
* 固定幅のコンテナ
* 各ブレークポイントごとに最大幅が変わる

## row
* グリッドシステムの行を決める要素
* 子にcolを持つことで真価を発揮

## col
* グリッドシステムの列を決める要素
* rowの子要素として使う
* col-sm-3
* sm : 576px未満で縦並び
* 3 : (3/12 = 25% の幅)

# ボタン
## btn
* ボタンを作る

## btn-primary
* 青ベースのボタンを作る
* danger : 赤ベース

親が display:flex; だと子要素のdisplayをtable-cellにできない

#前提

これは自分用のメモに近しいものです。一瞬戸惑ったので次すぐできるように。

#現象

単純な話です。

“`html

BUTTON

“`

“`css
.wrapper {
display: flex;
flex-direction: column;
}

.btn {
width: 7rem;
height: 2.6rem;
border: solid 0.2rem #bd4a4f;
display: table-cell;
vertical-align: middle;
text-align: center;
margin: auto 1rem;
}
“`

.btnの中身のテキストを中央揃えにするために`display:table-cell`を適用したいんですが、親要素がflexだと子要素のtable-cellが解除されるのか、うまく縦方向の中央揃えができなくなります。

# 対処法

ボタン自体に最低限のラッパーをつ

【コーディング初心者向け練習課題】LINE風のチャットルームを作る

#どうも7noteです。LINE風のチャットルーム作り。

LINE風のチャットルームの作り方を段階的に分けて解説しつつ、課題的に取り組めるものです。

手順に沿って作っていきます。

**完成予定図**

## ステップ１「HTMLのソースを組む」

**参考ソース**

“`index.html

• 相手のメッセージ

  17:00