htmlとcssのみで簡易的なダイアログを作る方法

記事を読んでて、ちょっと感動したので、勉強がてらの忘備録です。

:targetを使うやつなので、
「はいはいそれね。」の方は、大事な時間をロスするかもしれません。
お戻りください。

こんな感じで動くので、ますはコードペンで実際に動かしてみてください。
https://codepen.io/AdrianBece/pen/poopaaQ

まずはコードの説明から。

“`html:html

Open modal

×

Modal content

“

【jQuery】右クリックしたら他のサイトへ飛ばす

右クリック禁止！というサイトがありますが、もういっそ右クリック禁止の約束を破ったら帰ってもらったらいいんじゃないかと思って、右クリックしてしまったら別のサイトに飛んでもらうjQueryを作ってみました。
デモページ

デモページは以下から。右クリックすると別ページの飛ぶので注意。

##右クリックしたら他のサイトへ飛ばすのデモページ
デモページ

##JavaScript

デフォルトだと、みんな大好きyahoo.jpに飛びます。optionのurlを指定し、飛ばしたいサイトのurlを入れておけばそちらのサイトに飛ぶようになります。

“`javascript
(function($){
$.fn.rightClickEscape = function(options){
var defaults = {
url : ‘http://www.yahoo.jp/’
};
var settin

Flexbox で要素を変芸自在に並び替える

# Flexbox
inline-blockを使用してもできるが、細かいところを自動で修正してくれ、簡単にレイアウトを作成することができるプロパティー。
正式名称は「Flexible Box Layout Module」
横並びしたい時に使用される。

#使い方
親要素に`display:flex;`を指定する。

“`html

1

2

3

“`
“`css
.f-container{
display:flex;
}
“`

## デフォルト
アイテムが水平方向に左から右へと配置される。

“`css
.f-container{
display:flex;
width: 200px;
color: white;
font-size: 50px;
}
.f-itema {
background-color: blue;

JavaScriptとCSSアニメーションでタイピング風表示を行う

# こんなやつ
[](https://gyazo.com/a01843cc10d7f1cb9e7910e7b10b604d)
# ~~結論~~
~~[iTyped.js](https://github.com/luisvinicius167/ityped)を使う。~~

# 一文字ずつ表示させる処理
“`html:HTML

“`
“`JavaScript:JavaScript
const typing = (element, sentence) => {
[…sentence].forEach((character, index) => {
setTimeout(() => {
document.querySelector(element).textContent += character;
}, 100 * ++index);
});
}

typ

初心者によるプログラミング学習ログ 165日目

# 100日チャレンジの165日目

twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。

100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。

165日目は

おはようございます
165日目

今日も今日とてwebサイトコーディング課題

というか、みなさんLPとかひとつつくるのにどれくらい時間かかるもんなんだろう？？

たぶん自分の場合は時間かけすぎなんだろうな・・・#早起きチャレンジ閏年判定付き 生年月日フォーム をつくってみた

# 1. はじめに

個人的に、何らかサイトの会員登録画面で生年月日を入力するとき、
存在しない月日（例えば 9月31日、2月30日、4月31日 など) が選択できてしまうことが 割とよくあります。

システム的にも、ユーザー的にも、存在しない月日は入力できない方が良いはずです。

さらに、閏年は2月29日までありますし、
今回は、その点も含めて 存在しない年月日を入力できないように セレクトボックスの選択肢を制御する方法を調べてみました。

# 2. 準備

作成にあたって、以下のツールを準備します。

– テキストエディター
– ブラウザ （ここではChromeを使用）

また、ライブラリーに jQueryを使用します。
jQueryのサイトからファイルの読み込み方を確認します。

– jQuery　
https://code.jquery.com/

# 3. 作成

作成した生年月日フォームのhtml・jsファイルの全体像とブラウザ画面を示します。

## 3-1. コーディング

以下に作成した html(main.html) と javascript(form.js)

元記事を表示

HTML CSS ドロップダウンメニューを作ろう

研修でやったサイト模写の中で、ドロップダウンメニューが出来なかったので出来るようにするためのメモ。

##多階層のドロップダウンメニュー
“`dropdown-menu.html

CSSだけでドロップダウンメニュー01

第三階層までVer

【vue.js】チェックボックスでチェックされているときとチェックされていないときでそれぞれ値を送る方法

#はじめに
最近、Rails+Vue.jsの組み合わせで使う必要があり、備忘録的につまったところを残していこうと思います。
今回はタイトルにもある通り、チェックされているときとチェックされていないときにそれぞれ値を送る方法についてまとめました。
もっと良い感じに書けるなどありましたら、コメントいただけると嬉しいです。。

#実装してみる
##erbの場合
`erb`の場合、下記で実現できます。

“`erb
<%= f.check_box :is_mon_monthly_contract, {checked: child_fee.plan.is_mon_monthly_contract_target?}, :target, :non_target %>
“`

これでチェックされている場合は`target`、チェックされていない場合は`non_target`が送られます。
ちなみにinput要素のチェックボックス自体にチェックされていない場合の値を指定する方法はないようです。
でも、erbでは実現できているじゃないか。。と思い調べてみたところhiddenを使用することで実現している

A-FRAME: 物理演算でボーリングっぽい動きを実現してみる１（ボールの速度）

A-Frameをつかって物理演算ができるようにしてみます。
個々の設定値がどういう意味で、何をどう設定したらどんな効果があるのかを検証していきます。
最終的にはボーリングっぽい振る舞いをさせる為の設定値を見出すことを目標にします。

今回はボールに与える速度を検証します。

レーンとピンとボールをシーンに用意します。
ボールに速度を与えます。
速度を変更した例を以下に掲載します。

### 例１）z方向に-20

ひとまず-20で設定してみます。
手前から奥に行ってもらう為にz軸にマイナスの力を与えます。
[demo](https://k38.github.io/aframe/physics-system/velocity_1.html)
ボールがピンに押し返されています。
たまにこういう人もいますが、ちょっと弱いですね。

### 例２

pugのbug（else）

今日はpugの話。
ちょっとバグでハマったので備忘録。
else 文がうまく動かないときがある。(ifだけなら動いた)

“`pug
table
– for (var parent = 0; parent < 2; parent++) - for (var child = 0; child < 2; child++) tr //- こっちは普通に動く - if(child == 0) if(parent == 0) td(rowspan='2') hoge else td(rowspan='2') fuga //- ここに不要な1文を入れないとなぜかバグる（if(true)） - if(true) if(child == 0) td foo td bar //- 最後の行 else

HTML/CSSのコーディングスピードを爆速にする〜Emmet〜

### Emmetって？

エメットって読む。
HTML/CSSを効率的に書くためのプラグイン
Sublimetext、VisualStadioCodeなどの様々なIDEに対応

### 事前準備

VisualStadioCodeは標準搭載。
プラグインのインストールは不要。

### どのくらい早くかける

ためしにHTMLファイルに「!」を入力する。
一瞬で、HTMLテンプレートが記載される


### どのくらい早くかける　その２

以下のHTMLを書くためにEmmentで記述するには

▼　完成形

“`html

“`

▼　Emment

“`text
div#only.test
“`

![ezgif-4-3bbad673891

初心者によるプログラミング学習ログ 164日目

# 100日チャレンジの164日目

twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。

100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。

164日目は

おはようございます
164日目

今回もwebサイトコーディング課題

調べながらだからなかなかすすまんな〜#早起きチャレンジHTML/CSSしかやったことないコーダーがJavaScriptを勉強する回〜while文

こんにちは！化・ω・石です。最近めっきり冷え込みましたね。

今日のJavascriptは**while文（繰り返し）**です。ゲームの中では、「指定回数だけ探索する」とか「同一性が50以下になるまで探索する」とか、とかで使えそうですね。というわけでそんな設計を想定してコードを書いてみましょう！

while文の基本書式は以下の通りです。

“`javascript

while(条件式){
条件式がtrueの場合、処理を繰り返し実行する。
}
“`

#指定回数だけ探索し、そのたびに同一性をランダムで減少させる

まず回数をカウントする変数が必要そうですね。変数に格納した数値を1ずつ増やしていって、10回探索したら加算を止める、としたらよさそうです。
ついでにその数値をp要素で出力しましょう。要素をDOMツリーに追加するには、`createElemen()`メソッドと`appendChild()`メソッドで実装できるようです。

“`JavaScript

‘use strict’ // おまじない

let adv = 1; // 変数advに1を代入

while

元記事を表示

railsでsubmitをキャンセルする

参考：https://www.sejuku.net/blog/28720#submit

「false」を渡してあげるだけです。

“`javascript

<%= form_for @wifi_agency, html: {class: 'form'} do |f| %>
<%= f.text_field :name, :class=>“form-control”%>
<%= f.submit "保存", class: "btn btn-success", :onclick => “return check_name()”%>
<% end %>

“`

jQueryの変数で要素を取得

参考：https://stackoverflow.com/questions/17097947/jquery-using-a-variable-as-a-selector

“`html

hello

“`

“`javascript
$(“#”+sample).text()

//出力
=> hello
“`

WEBのデータ通信入門まとめ(GET/POSTメソッド、Cookie、セッションID)

# はじめに
– 自己紹介：UbuntuでPythonを書いてデータ分析とか異常検知してます。
– [Twitter](https://twitter.com/norihitoishida)やってます。
– AutoMLの一つであるNAS(Neural Architecture Search)に興味があります。
– WEBを勉強していてGET/POSTメソッド、Cookie、セッションIDあたりで躓いたのでまとめました。
– 間違いや加筆すべきことがあったら教えて下さい。
– いいねと思ったらぜひフォロー, thumbs-up&拡散をお願いします！

# 目次
– WEBクライアントとWEBサーバの通信の流れ
– GETメソッドとPOSTメソッドの比較
– CookieとセッションIDの比較

# WEBクライアントとWEBサーバの通信の流れ
WEBクライアント(ブラウザ)とWEBサーバ(アプリ)の通信は以下のような流れで行われます。
①人間：ブラウザにURLを入力する
②ブラウザ：URLに従ってWEBサーバにHTTPリクエストを送る(例：「hoge.htmlを下さい」と伝える)
③サ

左寄せのまま中央寄せにするやつに終止符を打つ[fit-content]

左寄せのまま中央寄せにしたいやつよくあるよね

だいたいは入れ子にして、外をcenterにして中をleftにすることが多いと思う

でもあれいろいろダサイんですよね　htmlが複雑化してくるに従ってなんかいろいろ面倒なことになる、text-align が要素以下に全部影響したりとか　幅を指定したいときとか可変だったりとか　入れ子なのもださいし　とにかくいろいろ面倒になる

そこでこう

“`html

案内文とか長ったらしくなったとき途中で改行したい、
文中は左寄せしたいけど
全体をセンターリングしたい

“`


なんかこの見慣れない fit-content とかいうやつ

バリデーションのエラー表示をなるべく出さない

Railsでバリデーションエラーのメッセージ表示を作り込むには、コストがかかります。なるべくHTMLとJavaScriptでバリデーションをやってしまい、Railsのバリデーションエラーはめったに出さない、というスタイルを目指したい。

## バリデーションの種類とHTML

確認したブラウザーは、Chrome、Firefox、iPhoneのSafari （2019年11月時点のバージョン）、およびIE11です。

### presence

input, textarea, selectなどたいていの入力欄ではrequired属性を使って、空かどうかをチェックできます。

#### input type=”text”

required属性で空文字列をチェックできますが、スペースだけの文字列はチェックされません。pattern属性に正規表現を追加して空白文字以外の文字が含まれるようにします。

“`HTML

“`

pattern属性の正規表現は、文字列全

HTML/CSSしかやったことないコーダーがJavaScriptを勉強する回〜条件分岐if/else ifと変数

こんにちは！化・ω・石です。
昨日に続いてJavaScriptを勉強していきます。いやーJavaScript攻略に自信をつけた化石は無敵でs

# 条件分岐〜if

**今日お休みでいいですか？**

英語が苦手だった中学高校時代、if構文は最大の敵でした。というかいろんな構文が敵でした。**そのせいか「if」という単語を見ると蕁麻疹が出ます。**ｳﾜｯ… いや蕁麻疹出るほどじゃないですけど、今日お休みしたいレベルには忌避感があります。

でもこれを超えないとあらゆるコードの実装が難しくなります…。頑張りましょう！

if文といえばアレ。**「もし〜なら」「もし〜でないなら」**。ifとelseがセットなのはご存知の通り。Excelでやったぞ〜！（それは覚えている）
JavaScriptでの書式は以下の通り。

“`javascript

if(条件式){
条件式がtrueになる（成り立つ）ときに実行する処理
} else {
条件式がfalseになる（成り立たない）ときに実行する処理
}
“`

よし…よしまだ大丈夫。理解できる。

ここで唐突に自分が作っているゲームの話をす

誰でもたった一行で、はてなブログ「Pro」を表示する方法

How to display HatenaBlog Pro. 自己責任。グレーゾーン。お遊び程度。

#発見した
はてなブログ「**Pro**」だとなんとなくベテランが書いた記事に見えてしまいませんか（）。。
noteより内容の薄い日記を始めるべく、はてなブログをカスタマイズしている中、プロフィールに「Pro」マークを表示させる方法はないかとggり、ソースを見つけたのでメモメモやよ。

ブログ始めました。Koshi⚔?Tech Blog

##方法1 プロフィールに貼り付け
はてなブログ>デザイン>カスタマイズ>サイドバー>プロフィール(モジュール)
プ