発端 Electronで遊んでるのですが、動作確認したときに画面の上部に謎の隙間が・・・。 スタイル指定した記憶もないしなぜだろうと思い調べた。 結果 ブラウザにはbodyタグにデフォルトでmarginが指定されているらしい。 で、ほとんどのブラウザが8pxをデフォルトで指定している。 たしかに、Electronの開発ツールを見ると以下のようなスタイルが指定されていた。 bodyDefCss.css body { display: block; margin: 8px; } これはわからん・・・ ちなみになくしたい場合はcssやbodyのスタイルにmargin: 0pxを定義します。 override.css body { margin: 0px; } や override.html <body style="margin: 0px;"> みたいな感じですかね。 以上、 超簡単な記事でした。
Electronで遊んでるのですが、動作確認したときに画面の上部に謎の隙間が・・・。 スタイル指定した記憶もないしなぜだろうと思い調べた。
ブラウザにはbodyタグにデフォルトでmarginが指定されているらしい。 で、ほとんどのブラウザが8pxをデフォルトで指定している。
body
margin
たしかに、Electronの開発ツールを見ると以下のようなスタイルが指定されていた。
body { display: block; margin: 8px; }
これはわからん・・・
ちなみになくしたい場合はcssやbodyのスタイルにmargin: 0pxを定義します。
css
margin: 0px
body { margin: 0px; }
や
<body style="margin: 0px;">
みたいな感じですかね。
以上、 超簡単な記事でした。
input要素って、typeがfileになると途端にスタイルが面倒くさくなりますよね。 reactでそれっぽいコンポーネントを作ったので、残しておきます。 import React, { useState } from 'react'; import styled from 'styled-components'; const Wrapper = styled.div` display: flex; `; const Label = styled.label` お好きにどうぞ `; const Input = styled.input` display: none; `; const FileName = styled.p` お好きにどうぞ `; const onChange = (event, cb, setFileName) => { cb(event); const targetName = event.target.files.item(0).name; setFileName(targetName); }; const InputFile = props => { const [filename, setFileName] = useState('選択されていません'); if (props.type !== 'file') return <p>typeの指定、間違ってるよ</p>; return ( <Wrapper> <Label> ファイルを選択 <Input {...props} onChange={e => onChange(e, props.onChange, setFileName)} /> </Label> <FileName>{filename}</FileName> </Wrapper> ); }; export default InputFile; 使い方はこんな感じ <InputFile type='file' accept='image/*' onChange={e => なんか好きな処理} />
input要素って、typeがfileになると途端にスタイルが面倒くさくなりますよね。 reactでそれっぽいコンポーネントを作ったので、残しておきます。
import React, { useState } from 'react'; import styled from 'styled-components'; const Wrapper = styled.div` display: flex; `; const Label = styled.label` お好きにどうぞ `; const Input = styled.input` display: none; `; const FileName = styled.p` お好きにどうぞ `; const onChange = (event, cb, setFileName) => { cb(event); const targetName = event.target.files.item(0).name; setFileName(targetName); }; const InputFile = props => { const [filename, setFileName] = useState('選択されていません'); if (props.type !== 'file') return <p>typeの指定、間違ってるよ</p>; return ( <Wrapper> <Label> ファイルを選択 <Input {...props} onChange={e => onChange(e, props.onChange, setFileName)} /> </Label> <FileName>{filename}</FileName> </Wrapper> ); }; export default InputFile;
使い方はこんな感じ
<InputFile type='file' accept='image/*' onChange={e => なんか好きな処理} />
グラデーションを使う グラデーションには、2つあって、 1.線形グラデーション 2.円形グラデーション さらにリピートすることもできる。 基本的な書き方はこう、 ベンダープレフィックスと若干違うかな。 方向は、角度での指定もできて（90degみたいな）。 上2つのサンプルのコード載せますね。 1. 2.
グラデーションには、2つあって、 1.線形グラデーション 2.円形グラデーション さらにリピートすることもできる。 基本的な書き方はこう、 ベンダープレフィックスと若干違うかな。 方向は、角度での指定もできて（90degみたいな）。 上2つのサンプルのコード載せますね。 1. 2.
はじめに セキュリティ上の理由により、プラグイン等のインストールを実施できない中で、 なんとかSeleniumのような動作を実現できないか調査した所、 少し無理矢理ながらもできたので、メモを残したいと思います。 課題整理 単純に画面へJavascriptを埋め込むのでは、遷移時にクリアされてしまいます。 では、遷移する度に埋め込むのか？そのような事では自動化とは言えません。 ということで、iframeにて操作したい画面を描画し、 親画面からcontentsメソッドを使用して操作する事にしました。 問題発生 試しに以下のスクリプトを実行した所、エラーが発生しました。 // 流したスクリプト $("#iframeのid").contents().find("#操作したいtextのid").val("hoge"); // エラーメッセージ VM183:1 Uncaught TypeError:$(...).contents is not function at<anonymous>1:11 存在するはずのメソッドが使用できない、、、？なぜ？？ というわけで調査した所、どうやらクロスドメイン制約によるものという事がわかりました。 （参考サイト https://qiita.com/growsic/items/a919a7e2a665557d9cf4） 先人の方々も調査を行っているようで、既に対策も確認する事ができました。 （参考サイト http://shinimae.hatenablog.com/entry/2015/12/09/183057） 同じ方法でやってもなぁ、、、さて、どうするか。 斜め上の発想で対応 同一ドメインであれば問題ないのであれば、 一度、操作したいページを描画し、そのhtmlを書き換えてしまえばいいのでは？ ※具体的にはbodyの中身をクリアし、そこへiframe要素を追加してそこで描画し、操作してみる。 というわけで試してみたところ、、、成功しました！ これはセキュリティ的に大丈夫なのか？という怪しい所を残しながらも突破できたので、とりあえずは良しとすることにしました。 ※この手法を採用する際は、自己責任でおねがいします。 // 埋め込み時 $("body").html("<iframe id='hoge' src='操作したいurl' width='好きな幅' height='好きな高さ'/>"); // 操作時 $("#hoge").contents().find("#書き換えたいtextのid").val("test"); // 画面遷移判定 $("#hoge").load(function() { console.log("遷移完了"); } 最後に アカウント情報等の利用者毎に事なる値を入力する運用に使用したい場合は、 html書き換え時にtext等を配置し、その値を使用するのも良いかと思います。 ただ、amazonなどは、iframeでの表示を制限した作りになっているようなので、注意ですね。
セキュリティ上の理由により、プラグイン等のインストールを実施できない中で、 なんとかSeleniumのような動作を実現できないか調査した所、 少し無理矢理ながらもできたので、メモを残したいと思います。
単純に画面へJavascriptを埋め込むのでは、遷移時にクリアされてしまいます。 では、遷移する度に埋め込むのか？そのような事では自動化とは言えません。 ということで、iframeにて操作したい画面を描画し、 親画面からcontentsメソッドを使用して操作する事にしました。
試しに以下のスクリプトを実行した所、エラーが発生しました。
// 流したスクリプト $("#iframeのid").contents().find("#操作したいtextのid").val("hoge"); // エラーメッセージ VM183:1 Uncaught TypeError:$(...).contents is not function at<anonymous>1:11
存在するはずのメソッドが使用できない、、、？なぜ？？ というわけで調査した所、どうやらクロスドメイン制約によるものという事がわかりました。 （参考サイト https://qiita.com/growsic/items/a919a7e2a665557d9cf4）
先人の方々も調査を行っているようで、既に対策も確認する事ができました。 （参考サイト http://shinimae.hatenablog.com/entry/2015/12/09/183057）
同じ方法でやってもなぁ、、、さて、どうするか。
同一ドメインであれば問題ないのであれば、 一度、操作したいページを描画し、そのhtmlを書き換えてしまえばいいのでは？ ※具体的にはbodyの中身をクリアし、そこへiframe要素を追加してそこで描画し、操作してみる。
というわけで試してみたところ、、、成功しました！ これはセキュリティ的に大丈夫なのか？という怪しい所を残しながらも突破できたので、とりあえずは良しとすることにしました。 ※この手法を採用する際は、自己責任でおねがいします。
// 埋め込み時 $("body").html("<iframe id='hoge' src='操作したいurl' width='好きな幅' height='好きな高さ'/>"); // 操作時 $("#hoge").contents().find("#書き換えたいtextのid").val("test"); // 画面遷移判定 $("#hoge").load(function() { console.log("遷移完了"); }
アカウント情報等の利用者毎に事なる値を入力する運用に使用したい場合は、 html書き換え時にtext等を配置し、その値を使用するのも良いかと思います。 ただ、amazonなどは、iframeでの表示を制限した作りになっているようなので、注意ですね。
CSSを使っていろんなものを動かしてみる 例えばこんなの See the Pen border animation by Ryoto kubo (@Ryotokubo) on CodePen. よくwebサイトで見かけると思いますが、実はCSSだけなんですね。 こういうのもそう。 See the Pen QPLmGX by Ryoto kubo (@Ryotokubo) on CodePen. 全てCSSのみです。 これを使えば要素にカーソルを乗せたとき画像を少し大きくしたり、時間差で色を変えるなんてこともできます。 転職を志しhtmlとCSSを学び始めると、行き着くとこはポートフォリオ作成だと思います。 その過程の中で「少しでも見た目を良くしたい」「凝りたい！」みたいな気持ちもあるかと思います。 そんなときCSS アニメーション使ってみましょう 尚、ここではややこしいコードの説明は割愛します。 興味がある方はgoogleで 「CSS アニメーション 」 「CSS animation」 「CSS animation まとめ」 などと調べてみてください。様々なパターンが見れて「あっ！これもCSSでできるんだ」と思う動きがあるはずです。 尚、コードの詳細が知りたい方は 「animation keyflames」 と検索してみてください。 animationで動きの設定を作ってあげて、keyflamesでどう動くのかを設定してあげるといった感じなのですが、設定にも種類があり設定次第では様々な動きがつけられますので。 では。
例えばこんなの
See the Pen border animation by Ryoto kubo (@Ryotokubo) on CodePen.
よくwebサイトで見かけると思いますが、実はCSSだけなんですね。
こういうのもそう。
See the Pen QPLmGX by Ryoto kubo (@Ryotokubo) on CodePen.
全てCSSのみです。 これを使えば要素にカーソルを乗せたとき画像を少し大きくしたり、時間差で色を変えるなんてこともできます。
転職を志しhtmlとCSSを学び始めると、行き着くとこはポートフォリオ作成だと思います。
その過程の中で「少しでも見た目を良くしたい」「凝りたい！」みたいな気持ちもあるかと思います。 そんなときCSS アニメーション使ってみましょう
尚、ここではややこしいコードの説明は割愛します。
興味がある方はgoogleで
「CSS アニメーション 」 「CSS animation」 「CSS animation まとめ」
などと調べてみてください。様々なパターンが見れて「あっ！これもCSSでできるんだ」と思う動きがあるはずです。 尚、コードの詳細が知りたい方は
「animation keyflames」
と検索してみてください。 animationで動きの設定を作ってあげて、keyflamesでどう動くのかを設定してあげるといった感じなのですが、設定にも種類があり設定次第では様々な動きがつけられますので。
では。
状況 何でも良いのですが、以下のようなhtmlファイルがあるとします。 <!DOCTYPE=html> <html> <head> <script type="text/javascript" src="js/test.js"></script> </head> <body> テスト <body> </html> 上記をブラウザで表示すると、以下のようにheadタグ内に記載した内容がbodyタグに移動してしまっている。 原因 headタグ内に全角スペースが入力されているから。 ASP.NETで既存のWEBページにあとからmasterpageを設置するという作業でハマった。 masterpageが原因かという思い込みにとらわれてしまった・・・。 既存のページは単にheadタグの記載がbodyにずれるだけだから、 表示自体には問題がなかっただけ。 ちなみにVisual Studioでエディタにスペースを表示させる方法は、 メニューバーの［編集］－［詳細］－［スペースの表示］を選ぶ。
何でも良いのですが、以下のようなhtmlファイルがあるとします。
<!DOCTYPE=html> <html> <head> <script type="text/javascript" src="js/test.js"></script> </head> <body> テスト <body> </html>
上記をブラウザで表示すると、以下のようにheadタグ内に記載した内容がbodyタグに移動してしまっている。
headタグ内に全角スペースが入力されているから。
ASP.NETで既存のWEBページにあとからmasterpageを設置するという作業でハマった。 masterpageが原因かという思い込みにとらわれてしまった・・・。 既存のページは単にheadタグの記載がbodyにずれるだけだから、 表示自体には問題がなかっただけ。
ちなみにVisual Studioでエディタにスペースを表示させる方法は、 メニューバーの［編集］－［詳細］－［スペースの表示］を選ぶ。
