※Chromeバージョン: 90.0.4430.93で行ったときの記事になります。 ブラウザの自動補完機能について サイトにログインした時などに出るこれです。（以下はChromeの場合） 入力したIDとパスワードを保存し、次回以降のログイン時に自動でIDとパスワードを補完してくれるとても便利な機能です。 ただ、パスワードが変更できる画面やユーザーを新規登録する画面のIDとパスワードの部分など、してほしくないところまで補完をしてくれるので度々開発者を悩ませます。 私が行っている開発案件の中で、ユーザーを新規登録する画面でユーザーIDとパスワードを入力しようとしたらなんか勝手に入力されてる！？という事象が発生し、色々試行錯誤して無事解決したのでそのことについて書こうと思います。 1戦目 autocomplete="off"を付ける <input type="password" name="registPassword" autocomplete="off" /> ダメでした／(^o^)＼ 昔は大丈夫だったそうなのですが、今はなぜか無視されてしまいます。 サイト側がoffにしてよって言っているのに、それを無視するとはどういうことなのよ・・・。 2戦目 jQueryで消す onloadされたら消しにいくような感じにしてみた。 $('input[name="registPassword"]').val(""); ダメでした／(^o^)＼ナンデヤ setTimeout( function() { $('input[name="registPassword"]').val(""); }, 1000); 遅延させたらうまく消せました。（jQuery→補完の順番なのかな・・。） ただ、一瞬表示されて消えるのですごく違和感が。 3戦目 readonly属性使う 最初はreadonlyつけておいて・・・ <input type="password" name="registPassword" readonly /> focusされたらreadonly外す！ $('input[name="registPassword"]').focus(function() { $(this).attr('readonly',false); }); これはうまくいきました＼(^o^)／ 色々調べたところ、readonlyやdisabled属性がついているものは補完しないそうです。 見た目も自然。まさかreadonlyがかかっているとは利用者は思うまい・・・。 他にも色々方法ありそう 調べていると、type="password"があるかで補完対象か判断しているようなので、初期表示時はテキストボックスにしておいて書き換えたりなど、他にもやり方は色々ありそうです。 バージョンが上がったら動作しなくなったりするかもしれないので、戦いはまだまだ続くのだろうな・・・。

どうも7noteです。CSSでひし形を作ります。 CSSだけで様々な図形を作れるとなにかと便利です。 ひし形の作り方を紹介していきます。 トランプのダイヤにも使えますね。 ソース <span class="diamond"></span> style.css .diamond { width: 30px; height: 30px; background: #f00; /* 背景色の場合、指定 */ border: 1px solid #000; /* 線描画の場合、指定 */ border-radius: 5px; /* 角丸にしたい場合、指定 */ display: inline-block; transform: rotate(45deg) skew( calc((90deg - 60deg) / 2), /* ダイヤ型の角度を変更する */ calc((90deg - 60deg) / 2) /* ダイヤ型の角度を変更する */ ); } まとめ 四角形を作成し、transformで回転&傾斜をつけてダイヤ型になります。 結構簡単に作れるので疑似要素として表示させて組み合わせたり、2つ使ってキラキラさせた表現を作ったりもできそうですね。 おそまつ！ ~ Qiitaで毎日投稿中!! ~ 【初心者向け】WEB制作のちょいテク詰め合わせ

まず何よりも先にGoogle Chromeのデベロッパーツールで調べてみる サイト全体の隙間を消すために試したこと body,html { margin: 0px; padding: 0px; } 画像の間にできた隙間を消すために試したこと vertical-align: bottom; line-height: 1.0em; その他いろんなパターンの時に試したこと line-height: 0; margin: 0; padding: 0; font-size: 0; display: block; これらを親要素に指定するのか子要素に指定するのかによって結果も変わってくるので、そこらへんもいろいろ試してみるのが効果的かなと思います。

formタグで入力フォームを作るときにオートコンプリート機能があるということなので まとめておきます。 HTML の autocomplete 属性 HTML の autocomplete 属性は、入力値としてテキストまたは数値を取る 要素、 要素、 要素、 要素で利用できます。 autocomplete を使用すると、ウェブ開発者は入力欄にどの種類の情報が期待されているかをブラウザーに示唆するのと同様に、ユーザーエージェントがフォーム入力欄の値を埋めるための自動支援を提供する必要があることを指定します。 提案値の情報源は、一般にブラウザーに依存します。ふつうは、ユーザーが入力した過去の値からとりますが、あらかじめ構成された値から取得することもあります。例えば、ブラウザーはユーザーに名前、住所、電話番号、メールアドレスを自動補完するために保存させることができます。おそらく、ブラウザーは以降の認証手続で自動補完を行うために、クレジットカード情報を暗号化して保存する機能を提供しているでしょう。 (MDN Web Docsより引用) ブラウザに依存するのでユーザーが入力したことがあるメールアドレスだったり、住所などが補完されるということになります。 また自動補完させないようにするには autocomplete="off" とするそうなのですが、ブラウザによってはうまくいかない場合もあるようです。 マスターパスワードが用いられない場合でも、ブラウザーのパスワード管理機能は純粋にセキュリティの向上につながります。パスワードをブラウザーが保存すればユーザーは覚えなくてもよいため、覚えなければならない場合よりも強固なパスワードをユーザーが設定できるようになります。 このような理由から、現代的なブラウザーの多くはログイン欄における autocomplete="off" に対応していません。 ウェブサイトが autocomplete="off" を に設定しており、かつそのフォーム内にユーザー名とパスワードの入力欄が含まれていた場合、ブラウザーはログイン情報を記憶するか尋ねてきて、ユーザーが同意すれば、次回の訪問時にログイン欄を自動入力します。 ウェブサイトが autocomplete="off" をユーザー名とパスワードの 欄に設定していた場合でも、ブラウザーはログイン情報を記憶するか尋ねてきて、ユーザーが同意すれば、次回の訪問時にログイン欄を自動入力します。 autocomplete属性の使い方 HTMLのinputタグやtextareaタグにautocomplete属性を指定することでブラウザに設定した情報を利用したオートコンプリート機能が利用できます。 html <input type="text" autocomplete="属性値"> メールアドレスの自動補完 html <input type="email" name="email" autocomplete="email"> See the Pen autocomplete　Email by morioka (@rm5912) on CodePen. クレジットカードの自動補完 See the Pen autocomplete　CreditCard by morioka (@rm5912) on CodePen. autocompleteの値(一例） 値の名前　　　　　　　　　　　　　　　　 補完する内容 off autocompleteを許可しない　 on autocompleteを許可する　 name 氏名　　　　　　　　　　　 given-name ファーストネーム　　　　　　 additional-name ミドルネーム　　　　　　　 family-name ラストネーム　　　　　　　　 email メールアドレス　　　　　　　　 username ユーザー名またはアカウント名　 new-password 新しいパスワード　　　　　　　 current-password 現在のパスワード　　　　　　　 postal-code 郵便番号　　　　　　　　　　 address-level1 都道府県　　　　　　　　　　 address-level2 市区町村　　　　　　　　　　 address-level3 町域　　　　　　　　　　 address-level4 番地など　　　　　　　　　　 organization 企業・団体・組織名　　　　　　 bday 生年月日　　　　　　　　　　 bday-year 生年月日の年 bday-mounth 生年月日の月　　　　　　　　 bday-day 生年月日の日　　　　　　　　 tel 電話番号　　　　　　　　　　 tel-area-code 市外局番　　　　　　　　　　 tel-local 市外局番を除いた電話番号 cc-name クレジットカード登録名　　　　　 cc-given-name 登録名のファーストネーム　　　 cc-additional-name 登録名のミドルネーム　　　　　 cc-family-name 登録名のラストネーム　　　　　 cc-number カード番号　　　　　　　　　　 cc-exp カードの有効期限　　　　　　　 cc-exp-month カードの有効期限の月　　　　　 cc-exp-year カードの有効期限の年　　　　　 cc-csc カードのセキュリティコード　　　　 終わりに フォームで入力する際になぜクリックすると自動補完できるのかわかりませんでしたが autocompleteを利用することでできるとわかりました。 ブラウザによってもうまく作動しないなど、あるようなので注意は必要です。 参考サイト お問い合わせフォーム最適化。改善しておきたい16の項目 MDN Web Docs HTML の autocomplete 属性 クロスブラウザに対応したオートコンプリート付き入力フォーム

See the Pen 住所入力フォーム練習 by morioka (@rm5912) on CodePen. 郵便番号から住所が簡単に入力できるサービスを使ってみた。 YubinBangoというサービスを利用して郵便番号から住所を自動入力機能を実装してみました。 住所から郵便番号を出すなどはできませんが 十分使えるかなと思います。 html <script src="https://yubinbango.github.io/yubinbango/yubinbango.js" charset="UTF-8"></script> ライブラリを読み込んでinputのclass属性に下記のプロパティを指定します。 クラス名 分類　　　 h-adr formやdivで囲む p-region 都道府県　　 p-locality 市区町村　　 p-street-address 町域　　　 p-extended-address 上記以外の住所 これに郵便局のURLを貼るなどすればいいかなと思います。 参考サイト お問い合わせフォーム最適化。改善しておきたい16の項目 YubinBango

Dockerを用い、公式のnginxコンテナでやります。 何番煎じか分かりませんが、シンプルな記事が少なかったのでメモとして。 条件 Dockerが使える環境 コンテナ名(任意)：nginx-container Webコンテンツが格納されたフォルダ：/home/username/public_html ポート番号：8080 テスト用に、/home/username/public_htmlに次のファイルを置いておく index.html <html> <body> index </body> </html> コマンド docker run \ --name nginx-container \ -v /home/username/public_html:/usr/share/nginx/html:ro \ -p 8080:80 \ -d \ nginx:latest 結果 http://localhost:8080/ へアクセスし「index」と表示されれば成功です。

はじめに ノードの作成、挿入を勉強しました。 今までhtmlファイルのheadタグでjsファイルを読み込んでいましたが、 挿入箇所、例えば document.body.appendChild(container); とbodyタグの中に挿入するときは、bodyタグの開始以降に記述しないと Cannot read property 'appendChild' of null 挿入先がないと怒られます。 さいごに jsファイルの読み込み場所の正解がわかりません。body終了タグの直前が丸いのでしょうか。

はじめに ノードの作成、挿入を勉強しました。appendChildって難しい 以下ありがたい参考ページ 【DOM基礎】要素内容の取得・設定／ノードの作成・挿入・削除 appendChildがnull 今までhtmlファイルのheadタグでjsファイルを読み込んでいましたが、 挿入箇所、例えば document.body.appendChild(container); とbodyタグの中に挿入するときは、bodyタグの開始以降に記述しないと Cannot read property 'appendChild' of null 挿入先がないと怒られます。 appendChildがundefined 挿入先の指定が document.body.appendChild(container); または id名.appendChild(container); でしかできませんでした。 クラス名やタグ名を指定するのは無理そう？ さいごに jsファイルの読み込み場所の正解がわかりません。body終了タグの直前が丸いのでしょうか。

Laravel Collectiveで入れ子構造のformの書き方 前提 バージョン：Laravel6、HTML5 Laravel Collective 導入済み 実装方法 HTML5ではinputタグにform属性を追加することで任意のformに対応させることができる。 ①formにidを付ける Form::openの引数でidを設定する。 {!! Form::open(['route' => 'ルート指定', 'method' => 'メソッド指定', 'id' => 'id指定']) ②inputにform属性を付ける Form::**の引数でform属性にformタグのidを指定する。 {!! Form::text('変数名', '初期値', ['form' => 'formのidを指定']) !!} {!! Form::submit('表示名', ['form' => 'formのidを指定']) !!} ③中身を任意の場所に置く formタグ自身は入れ子にできないため、中身だけを任意の場所に置く。 サンプル 簡単なサンプル。 このサンプルでは入れ子にする意味は特にないが、入れ子構造はフォーム内にリセット・検索・抽出など機能を持つ要素を配置したいときに役立つ。 コード demo.blade.php <body> <!-- formタグ自身は入れ子にできないので外側に配置 --> {!! Form::open(['route' => 'demo1', 'method' => 'post', 'id' => 'form1']) !!} {!! Form::close() !!} <!-- 本体となるform --> {!! Form::open(['route' => 'demo2', 'method' => 'post', 'id' => 'form2']) !!} <!-- 入れ子にしたいformの中身 --> <div> {!! Form::label('text1', 'フォーム1') !!} {!! Form::text('text1', '', ['form' => 'form1']) !!} {!! Form::submit('送信1', ['form' => 'form1']) !!} </div> <!-- 本体となるformの中身 --> <div> {!! Form::label('text2', 'フォーム2') !!} {!! Form::text('text2', '', ['form' => 'form2']) !!} {!! Form::submit('送信2', ['form' => 'form2']) !!} </div> {!! Form::close() !!} <p>フォーム1の送信結果：{{ $text1 }}</p> <p>フォーム2の送信結果：{{ $text2 }}</p> </body> web.php Route::get('/demo', 'DemoController@demoget')->name('demo'); Route::post('/demo1', 'DemoController@demo1')->name('demo1'); Route::post('/demo2', 'DemoController@demo2')->name('demo2'); DemoController.php public function demoget() { return view('demo',[ 'text1' => '未送信', 'text2' => '未送信' ]); } public function demo1(Request $request) { $text1 = $request->text1; return view('demo',[ 'text1' => $text1, 'text2' => '送信なし' ]); } public function demo2(Request $request) { $text2 = $request->text2; return view('demo',[ 'text1' => '送信なし', 'text2' => $text2 ]); } 実行結果 ~/demoにgetアクセス 上記入力の状態で「送信1」 上記入力の状態で「送信2」

Gridを元にレイアウトしてみる 完成版はこちらです　↓↓ 目標：Gridレイアウトの基礎を理解するため テキストエディターはVSCode. ↓下記のGridレイアウトチートシートを参考 Gridレイアウトのチートシート ～codeを書き始める前の準備～ ・構成を考える！　何をどんな風に、どうやって作るのか？ 　最初にある程度決めておくと後が楽になります。 　例　どの位Gridを書くのかを調べる 　　　<div>は何個必要なのか？ 　　　class属性名はどうしようか？ ・紙とペンで実際に枠を書いてみる（添付画像） ここまで出来たらcodeを書いていきます♪ ※head部分は省略 <div class="all"> <header class="header">ヘッダー</header> <div class="sub">サブ</div> <main class="main">メイン</main> <section class="section">セクション</section> <div class="sub2">サブ２</div> <footer class="footer">フッター</footer> </div> * { padding: 0; margin: 0; } .all { width: 1000px; height: 500px; background-color: cadetblue; margin: 100px auto 100px; } .header { background-color: pink; } .sub { background-color: aqua; } .main { background-color: rgb(194, 157, 228); } .section { background-color: coral; } .sub2 { background-color: yellowgreen; } .footer { background-color: cornflowerblue; } この状態で一旦ブラウザで確認　↓↓↓ 『親要素の.all』に、Gridを付けていきます .all { width: 1000px; height: 500px; background-color: cadetblue; margin: 100px auto 100px; display: grid; ※追加 grid-template-rows: 20% 40% 20% 20%;　※追加　 grid-template-columns: 40% 40% 20%;　※追加 } .all { width: 1000px; height: 500px; background-color: cadetblue; margin: 100px auto 100px; display: grid; grid-template-rows: 15% 40% 20% 20%; grid-template-columns: 30% 40% 20%; grid-gap: 5%;　※追加 } .all { width: 1000px; height: 500px; background-color: cadetblue; margin: 100px auto 100px; display: grid; grid-template-rows: 15% 40% 20% 20%; grid-template-columns: 30% 40% 20%; grid-template-areas: ※追加 'header header header '　※追加 'sub main main'　※追加 'section section sub2'　※追加 'footer footer footer';　※追加 grid-gap: 5%; } .header { background-color: pink; grid-area: header;　※追加 } .sub { background-color: aqua; grid-area: sub;　※追加 } .main { background-color: rgb(194, 157, 228); grid-area: main;　※追加 } .section { background-color: coral; grid-area: section;　※追加 } .sub2 { background-color: yellowgreen; grid-area: sub2;　※追加 } .footer { background-color: cornflowerblue;　 grid-area: footer;　※追加 } Gridレイアウトの完成です！！ まとめ Flexboxと似ているGridレイアウト　を使用してHPの枠を作ってみました！！ 登場する場面は少ないけれど引き続き理解していきたいと思います 今回は以上です！ ありがとうございます

1.ふわっとさせたいHTMLの要素にクラスをつける index.html <div class="他クラスとも共存可 effect-fade"> //処理 <div> 2.CSSにふわっとさせる処理を書く style.css .effect-fade { opacity: 0; transform: translate(0, 100px); /* ふわっとさせる高さ */ transition: all 1500ms; /* ふわっと仕切るまでにかかる時間 */ } .effect-scroll { opacity: 1; transform: translate(0, 0); } 3.Jqueryでふわっと詳細を書く script.js $(function () { $(window).scroll(function () { $(".effect-fade").each(function () { var elemPos = $(this).offset().top; var scroll = $(window).scrollTop(); var windowHeight = $(window).height(); if (scroll > elemPos - windowHeight) { $(this).addClass("effect-scroll"); } }); }); jQuery(window).scroll(); });