What's New Qiita

20190526のCSSに関する記事は6件です。

  • 投稿日：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.php

2, エラーページ本体

次に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,まとめ

要は「管理者に連絡が取れる手段を何かしら用意しよう」「現在どこのページにアクセスしているのかわかるようにしよう」ってことです。
間違ってたりうまくできなかったらコメントまでご連絡ください。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：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>
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：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);
    }
}

※なにか間違っているところがあれば、ご指摘お願いします。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-05-26T16:35:53+09:00

まじで最＆高のvim環境を作りたい2

まじで最＆高のvim環境を作りたい1

⬆︎の記事ではscala開発環境を最＆高にするvim-metalsの導入方法でしたが
今回は

  • HTML
  • CSS、SCSS、LESS　　⇦SASSはないみたいです(ネストをインデントで表現するやつ)
  • TypeScript
  • Angular

の開発環境を最＆高にしていきたいとおもいます

前回何したっけ

  1. coc.nvimっていうLSを管理してくれるプラグインの導入
  2. ⬆︎を使ってvim-metalsを導入
  3. 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とかでいいでしょう
下の方の空いてるところに
スクリーンショット 2019-05-26 1.36.03.png
今の段階では何も出ないですが、

:CocInstall coc-html

https://github.com/neoclide/coc-html
とすることでhtmlのLSをインストールしてくれます
この時にyarnを使うので初期のyarnのインストールは必須でしたね。。。
スクリーンショット 2019-05-26 1.37.28.png
できたらイェーい

マジYABAI
スクリーンショット 2019-05-26 1.43.07.png
ちゃんとasideとかあんまり使わないタグも補完が。
スクリーンショット 2019-05-26 1.46.06.png

おすすめ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モードに入る”

を</に凝縮するっていうめっちゃ行儀悪いコマンド

でもそうするとこんな風になる
vim.gif
タグの付け方クソ適当ですいません。動画撮るのに夢中でなんも考えてなかった笑
でも開発効率上がりそう〜〜〜

まぁ何はともあれ最＆高に一歩近づきましたね

CSS

ほぼ同じように

:CocInstall coc-css

https://github.com/neoclide/coc-css

とやればいいだけ

これでもう
scss.gif
こんな風に鬼の補完　＋　ノーマルモードにすると構文エラーを検知してくれる

TypeScript

:CocInstall coc-tsserver

同じようにLSを追加
https://github.com/neoclide/coc-tsserver

するとこんな感じい（もう適当になってる）
ts.gif
ちゃんとエラー教えてくれるの神

Angular

AngularのLSもあったので追加してみた

:CocInstall coc-angular

スクリーンショット 2019-05-26 4.00.10.png
こんな風に補完が分厚い

これでそこそこ最＆高に近づいたんじゃないっすかね

今回の記事に関係するリンク
まじで最＆高の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

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-05-26T05:58:31+09:00

【CSS】テーブルタグ内のラジオボタンの押しにくさを解消する

きっかけ

td内部に設置したラジオボタンのクリックのしにくさに業を煮やして諦めかけてたところ解決したのでメモ

見えない壁

td内部に設置したラジオボタンのクリック範囲を広げるためにやったこと
つまりは失敗例です
labelで挟み込んでマージン無くして幅は100%高さも100%！！
あれ？
幅はセル内いっぱいになったけど高さが何かに制限されている
とクロームちゃんは教えてくれました
その時のHTMLとCSS

index.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 で中央に配置するやり方
感謝

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-05-26T03:02:26+09:00

{Watch / 2019}} Aladdin

https://gplay.live/play/movie/Aladdin_2019/

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

日付別

タグ一覧