- 投稿日:2019-05-26T22:15:07+09:00
個人的に一番良いと思うHTTPエラーページ
WEBページにアクセスするとHTTPステータスコードが返されます。
100番台 200番台 300番台 400番台 500番台 情報 成功 リダイレクション クライアントエラー サーバーエラー 基本的には400番台,500番台が返された時にエラーページは表示されます。
それらのページをそれぞれの意味をもとに個人的に最も良いデザインを考えました。
コピぺで実装できるので是非お試しください。1, .htaccess
まずはこれがないと始まりません。
今回はルートディレクトリにあるerrorフォルダの中にファイルを入れていきます。
ルートディレクトリに.htaccessという名前のファイルを作成して中に次のように書いてください。ErrorDocument 401 /error/401.php ErrorDocument 403 /error/403.php ErrorDocument 404 /error/404.php ErrorDocument 500 /error/500.php ErrorDocument 503 /error/503.php2, エラーページ本体
次にerrorフォルダを作成しその中に401.php,403.php,404.php,500.php,503.phpの5つのファイルを作成してください。
それぞれに以下のファイルをコピペしてください。でも一箇所だけそれぞれの最後の方にある「ここにメールアドレス」はきちんと自分のメールアドレスを描いてください。401.php
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> <meta name="format-detection" content="telephone=no"> <title>HTTPエラー 401 / HTTP ERROR 401</title> </head> <body> <span style="font-size:1.5em;">HTTPエラー 401<br>HTTP ERROR 401</span><br>認証に失敗しました<br>Unauthorized<br><?php echo "アクセスしようとしたURL : "; echo (empty($_SERVER["HTTPS"]) ? "http://" : "https://") . $_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"]; echo "Requested URL : "; echo (empty($_SERVER["HTTPS"]) ? "http://" : "https://") . $_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"]; ?><br>管理者にご連絡頂ければ幸いです。メールアドレス:<a href="mailto:ここにメールアドレス">ここにメールアドレス</a><br>Please contact the administrator. Mail address : <a href="mailto:ここにメールアドレス">ここにメールアドレス</a> </body> </html>403.php
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> <meta name="format-detection" content="telephone=no"> <title>HTTPエラー 403 / HTTP ERROR 403</title> </head> <body> <span style="font-size:1.5em;">HTTPエラー 403<br>HTTP ERROR 403</span><br>アクセスが禁止されています<br>Forbidden<br><?php echo "アクセスしようとしたURL : "; echo (empty($_SERVER["HTTPS"]) ? "http://" : "https://") . $_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"]; echo "Requested URL : "; echo (empty($_SERVER["HTTPS"]) ? "http://" : "https://") . $_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"]; ?><br>管理者にご連絡頂ければ幸いです。メールアドレス:<a href="mailto:ここにメールアドレス">ここにメールアドレス</a><br>Please contact the administrator. Mail address : <a href="mailto:ここにメールアドレス">ここにメールアドレス</a> </body> </html>404.php
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> <meta name="format-detection" content="telephone=no"> <title>HTTPエラー 404 / HTTP ERROR 404</title> </head> <body> <span style="font-size:1.5em;">HTTPエラー 404<br>HTTP ERROR 404</span><br>ページが存在しません<br>Not Found<br><?php echo "アクセスしようとしたURL : "; echo (empty($_SERVER["HTTPS"]) ? "http://" : "https://") . $_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"]; echo "Requested URL : "; echo (empty($_SERVER["HTTPS"]) ? "http://" : "https://") . $_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"]; ?><br>管理者にご連絡頂ければ幸いです。メールアドレス:<a href="mailto:ここにメールアドレス">ここにメールアドレス</a><br>Please contact the administrator. Mail address : <a href="mailto:ここにメールアドレス">ここにメールアドレス</a> </body> </html>500.php
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> <meta name="format-detection" content="telephone=no"> <title>HTTPエラー 500 / HTTP ERROR 500</title> </head> <body> <span style="font-size:1.5em;">HTTPエラー 500<br>HTTP ERROR 500</span><br>サーバー内部でエラーが発生しました<br>Internal Server Error<br><?php echo "アクセスしようとしたURL : "; echo (empty($_SERVER["HTTPS"]) ? "http://" : "https://") . $_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"]; echo "Requested URL : "; echo (empty($_SERVER["HTTPS"]) ? "http://" : "https://") . $_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"]; ?><br>管理者にご連絡頂ければ幸いです。メールアドレス:<a href="mailto:ここにメールアドレス">ここにメールアドレス</a><br>Please contact the administrator. Mail address : <a href="mailto:ここにメールアドレス">ここにメールアドレス</a> </body> </html>503.php
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> <meta name="format-detection" content="telephone=no"> <title>HTTPエラー 503 / HTTP ERROR 503</title> </head> <body> <span style="font-size:1.5em;">HTTPエラー 503<br>HTTP ERROR 503</span><br>アクセスの集中によりサービスが利用できません<br>Service Unavailable<br><?php echo "アクセスしようとしたURL : "; echo (empty($_SERVER["HTTPS"]) ? "http://" : "https://") . $_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"]; echo "Requested URL : "; echo (empty($_SERVER["HTTPS"]) ? "http://" : "https://") . $_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"]; ?><br>管理者にご連絡頂ければ幸いです。メールアドレス:<a href="mailto:ここにメールアドレス">ここにメールアドレス</a><br>Please contact the administrator. Mail address : <a href="mailto:ここにメールアドレス">ここにメールアドレス</a> </body> </html>3,まとめ
要は「管理者に連絡が取れる手段を何かしら用意しよう」「現在どこのページにアクセスしているのかわかるようにしよう」ってことです。
間違ってたりうまくできなかったらコメントまでご連絡ください。
- 投稿日:2019-05-26T20:03:29+09:00
javascript学習① 20190410
javascriptについて学習をする
javascript.html要素を全て読み込んで動作を加えたいため、 bodyタグの後半にscriptタグを書くことが一般的 <body> <div id="target" class="box"></div> <script> 'use strict'; document.getElementById('target').addEventListener('click', function(){ document.getElementById('target').style.background = 'pink'; }); const target = document.getElementById('target') </script> document.getElementById('target')は要素をidで指定してgetする命令 .addEventListener('click', function(){〇〇}:何かをしたら何かの処理を行う(例)clickをした時にfunctionに記した動作を行う fuctionには何個でも処理を追加することができる document.getElementById('target').style.background = 'pink';getした要素に対して.で繋いで処理をかく const hoge = 命令 で変数に置き換えることができる <script> for (let i=0;i<10;i++){ if(i===num){ }else{ } } </script>
- 投稿日:2019-05-26T18:40:17+09:00
css animation 時間差で表示したい
初心者ですが、習得したことを少しづつ発信していこうと思います。
class名は任意に設定してください。目標
https://saruwakakun.design/
のページ読み込みの1s後に出てくるNEWというアラートっぽいメッセージをjavascriptではなく、cssだけで出したい。解決策
@keyframes/ の記述で opacity:0 を設定してアニメーションが始まるまで見えなくすることが肝?
また transform: scale(); でバウンドっぽいアニメーションを効かせている。index.html<div class="new-animation">NEW</div>style.css.new-animation { background-color: #ffb36b; position: absolute; top: 13px; right: 10px; width: 37px; height: 37px; border-radius: 8px; color: #fff; font-size: 13px; font-weight: bold; text-align: center; line-height: 37px; transform-origin: 50% 50%; animation: animScale 0.5s both; //--animScaleは任意の引数--// display: inline-block; animation-delay: 1.5s; } @keyframes animScale { 0% { opacity: 0; transform: scale(0); } 25% { opacity: 1; transform: scale(0.8); } 40% { transform: scale(1.1); } 60% { transform: scale(0.9) } 80% { transform: scale(1.05); } 100% { transform: scale(1); } }※なにか間違っているところがあれば、ご指摘お願いします。
- 投稿日:2019-05-26T16:35:53+09:00
まじで最&高のvim環境を作りたい2
まじで最&高のvim環境を作りたい1
⬆︎の記事ではscala開発環境を最&高にするvim-metalsの導入方法でしたが
今回は
- HTML
- CSS、SCSS、LESS ⇦SASSはないみたいです(ネストをインデントで表現するやつ)
- TypeScript
- Angular
の開発環境を最&高にしていきたいとおもいます
前回何したっけ
coc.nvim
っていうLSを管理してくれるプラグインの導入- ⬆︎を使って
vim-metals
を導入- Scalaの開発環境を最&高に近づけた
今回何すんの?
前回入れた
coc.nvim
さんで他のLS(Langage Server)も追加したい
自分はちょこっとAngular開発もしてるので今回は
html,css,js,ts,angularのLSを追加しようと思う
ついでにオススメのvimrcの設定ファイルもちょこっと各言語のLSをInstall
結局やることは単純に
coc.nvim
の拡張機能を一個一個インストールするだけ
coc.nvimめんどくさいのでAngularのプロジェクトを作っちゃう
検証なんですがhtm、ts、scss、angularの揃ったプロジェクトつくちゃった方が早い。
初めての人はこちらでAngular cli
のインストール済ませてください
https://cli.angular.io/別に自分でそれぞれのファイル作ってやっても全然大丈夫です
$ ng new angular-exsample ? Would you like to add Angular routing? Yes ? Which stylesheet format would you like to use? {SASS,SCSS,CSS,LESS}から選ぶ ⬆︎今回はSCSSを採用 ... .. 〜 いろいろ頑張ってる 〜 . $ ls angular-exsample $cd angular-example $ls -al .editorconfig .gitignore README.md angular.json e2e/ node_modules/ package-lock.json package.json src/ tsconfig.json tslint.jsonスタイルシートがscssで生成されるAngularプロジェクトができた
じゃぁ早速LSの方にいきましょう
HTML
まずhtmlファイルを見にいきましょう
適当にsrc/app/app.component.html
とかでいいでしょう
下の方の空いてるところに
今の段階では何も出ないですが、:CocInstall coc-htmlhttps://github.com/neoclide/coc-html
とすることでhtmlのLSをインストールしてくれます
この時にyarnを使うので初期のyarnのインストールは必須でしたね。。。
できたらイェーいマジYABAI
ちゃんとaside
とかあんまり使わないタグも補完が。
おすすめvimrc設定
内容としてはシンプルで、タグを作った時に</
とうてばそのネスト位置にマッチしたタグを勝手に閉じてくれるというものaugroup HTMLANDXML autocmd! autocmd Filetype xml inoremap <buffer> </ </<C-x><C-o> autocmd Filetype html inoremap <buffer> </ </<C-x><C-o> augroup ENDついでにXMLも書いてますがまぁ気にしないでください笑
不要な人は消しても大丈夫です笑荒技ですが
</
で閉じた後にそのタグの中で編集していきたい人は
htmlの部分をこんな感じにするとよきautocmd Filetype html inoremap <buffer> </ </<C-x><C-o><ESC>F<iどういう意味かvimmerならわかると思いますが、
”閉じタグを生成して、ESCでノーマルモードに出て、左側検索の
F
に<
を探して飛んでi
でINSERTモードに入る”を
</
に凝縮するっていうめっちゃ行儀悪いコマンドでもそうするとこんな風になる
タグの付け方クソ適当ですいません。動画撮るのに夢中でなんも考えてなかった笑
でも開発効率上がりそう〜〜〜まぁ何はともあれ最&高に一歩近づきましたね
CSS
ほぼ同じように
:CocInstall coc-csshttps://github.com/neoclide/coc-css
とやればいいだけ
これでもう
こんな風に鬼の補完 + ノーマルモードにすると構文エラーを検知してくれるTypeScript
:CocInstall coc-tsserver同じようにLSを追加
https://github.com/neoclide/coc-tsserverするとこんな感じい(もう適当になってる)
ちゃんとエラー教えてくれるの神Angular
AngularのLSもあったので追加してみた
:CocInstall coc-angularこれでそこそこ最&高に近づいたんじゃないっすかね
今回の記事に関係するリンク
まじで最&高のvim環境を作りたい1
coc.nvim
https://cli.angular.io/
https://github.com/neoclide/coc-html
https://github.com/neoclide/coc-css
https://github.com/neoclide/coc-tsserver
https://github.com/iamcco/coc-angular
https://github.com/neoclide/coc-vetur
- 投稿日:2019-05-26T05:58:31+09:00
【CSS】テーブルタグ内のラジオボタンの押しにくさを解消する
きっかけ
td内部に設置したラジオボタンのクリックのしにくさに業を煮やして諦めかけてたところ解決したのでメモ
見えない壁
td内部に設置したラジオボタンのクリック範囲を広げるためにやったこと
つまりは失敗例です
labelで挟み込んでマージン無くして幅は100%高さも100%!!
あれ?
幅はセル内いっぱいになったけど高さが何かに制限されている
とクロームちゃんは教えてくれました
その時のHTMLとCSSindex.html<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="test.css"> <title>jstest</title> </head> <body> <table> <tr> <th>ラジオ</th> <th>テキスト</th> </tr> <tr> <td><label><input type="radio"></label></td> <td>テキストテキスト<br>テキストテキスト<br>テキストテキスト</td> </tr> </table> </body> </html>test.css/* ラジヲボタンのクリック範囲を少しでも広げる */ td label { display: block; width: 100%; height: 100%; margin: 0; }素人目には完璧なCSS記述に思えたんだけど
セルの見た目に対してクリック範囲がめちゃくちゃ狭い
テキストが改行してるのでセルが縦長なのに有効に使えない成功例
寝ぼけ眼でゴロゴロしてたら思いついたのがこちらです
コード
HTMLさっきと同じなのでCSSを
test.css@charset "UTF-8"; th { border: solid 1px gray; } td { min-width: 3em; position: relative; border: solid 1px gray; } /* ラジヲボタンのクリック範囲を少しでも広げる */ td label { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0; } /* ラジヲボタンを中央に */ input[type="Radio"] { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; }たったこれだけのことです
セルの内部どこをクリックしても反応してくれます!
泣きそうになりました最後に
知ってる人は当たり前に使ってるんだろうと思うけど…
失敗例の紹介はあれど成功例の紹介記事が見当たらなかった注意点としてはラジオボタンのみの列を作ると潰れてしまうので
幅を設定するかなんかしてください(適当)ラジオボタンを中央に寄せるのは目から鱗でした
position:absolute で中央に配置するやり方
感謝