HTML <div class="main"> <div class="container"> <div> </div> CSS .main { position: relative; } .container { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; } 上記のように、position: relative;とposition: absolute;を使うことによって、要素を中央配置することができます！

シチュエーション form要素内にあるテキストボックスにカーソルを当てた状態でエンターキーを押すと、 form要素内のボタンが発火する。 <form> <input type="text" /> <button onclick="hogeEvent()">hoge</button> <input type="submit" value="submit" /> </form> 上記の場合、hogeボタンが発火した。 hogeボタンをコメントアウトしてみたらsubmitボタンが発火した。 原因 HTMLの仕様がそうなっているから https://developer.mozilla.org/ja/docs/Web/HTML/Element/form 対処 input要素はbutton要素にして、typeを button にする。 submitは onclick="submit();" を設定する。 <form> <input type="text" /> <button type="button" onclick="hogeEvent()">hoge</button> <button type="button" onclick="submit();">submit</button> </form> これにより、form要素内のボタンの意図しない発火を防ぐことができる。 参考 Enterキーを無効にする方法 Enterキーを押すとsubmitされるのを防ぐ

何故にそんなことを考えたの？ 当初の目的は、「空気抵抗を最小限にするにはどんな断面がいいの？」という疑問でした。 そのためにこの記事を参考にジューコフスキー翼を作ってみて、その抗力を調べようと思ったのですが、 「抗力係数が分からねぇ…」という根本的な問題にぶち当たりました(当然ですが)。 で、それじゃあどうやって抗力を求めるの？ そこで色々とGoogle先生に聞いてみるも、ほぼ答えは $$ D = \frac{1}{2} \rho v^2 C_d $$ (ρは空気の密度、vは速度、Cdは抗力係数) この記述以外がなかなか見当たらねぇ…。と悩んでいたそんなところ、 こんなサイトがあるじゃありませんか。 (現在は撤回されていますが、僕がアクセスした当時は抗力の試算方法も載っていました) こりゃすげぇ!!と早速試しに円柱の空気抵抗を計算してみたら、既存の式に比べて値が異様に高い…。 (従来の式で約48[N]に対して、上のサイトの方式(以降、「長谷川式」)の抗力は約5023[N]) (円柱は半径0.5[m]の高さ1[m]、標高0[m]で15[℃]の状態、風速は40[km/h]を想定しました) 上のサイトの管理者(以降、長谷川様)に問い合わせても、 この２、３日熟慮しましたが、抗力計算結果の間違いの理由が解明できておりません。 とのこと。 じゃあ、詰んだの？ んな訳はあるめぇ、他に方法があるはずだ、と思い色々な値を見てみました。 その紆余曲折は長い上に面白くないので割愛しますが、ある値に行きつきました。 固有音響インピーダンス 簡単に言えば音の伝わりづらさです。交流電圧とインピーダンスの関係と同じです。 長谷川様の仮説では、 物体が空気中を移動するとき、物体の前面には空気が圧縮されて高気圧域が、後面には空気が膨張して低気圧域が発生する。 ということになっています。これは僕も正しいと思います。ですが同時に、 空気中に生じた気圧差は音速で解消されるのですが、物体の移動が続くと物体の表面に気圧差は発生し続けるのです。 とエビデンスなしに述べております。これには疑問符が付きました。 恐らく、長谷川様の仮説のバックボーンとなっている本、 "Understanding Flight"にそう書いてあったのを鵜呑みにしたのでは、と思います。 その点について長谷川様に問い合わせてみても、 小生は「気圧差の解消速度はその場の音の伝播速度」と考えています。もちろん流速でも移動速度でもありません。 「その場の音の伝播速度」とはその場の「音響インピーダンス」を考慮してのことで、上空3000mの音速を考慮してセスナの揚力を計算しています。 という回答で、いまいちピンと来ません。 音響インピーダンスは $$ \frac{p}{Sv} ( \frac{[Pa]}{[m^2]･[m/s]} ) $$ で求まるのですが、長谷川式揚力の計算式 $$ \frac{v}{c} ･ \sin \theta ･ \frac{p}{101325} ･ 1atm ･ S ･ \cos \theta ( \frac{[m/s]}{[m/s]}･\frac{[Pa]}{[Pa]}･[Pa]･[m^2] ) $$ (v:流速、c:その場の音速、p:雰囲気圧、S:表面積、θ:表面の傾き) のどこにも音響インピーダンスを考慮した部分が出てきていません。 さて、何故「音響インピーダンス」にたどり着いたかという話をしていませんでしたが、 気圧差を音速で解消しようとするけれども、「音響インピーダンス」に邪魔されて 実際には音速でない速度で解消されていると考えたからです。 (例えば、団扇で扇いでから実際に風が来るまで意外とタイムラグがあると思います) 話を戻して、数式に空気の固有音響インピーダンスを登場させましょう。 空気の固有音響インピーダンスは $$ Z = \rho c ([kg/m^3]･[m/s]) = \frac{p_a}{v_a} (\frac{[Pa]}{[m/s]}) $$ (ρ:その場の密度、c:その場の音速、pa:その場の気圧、va:その場の速度) (厳密には疎密波が正弦波の場合) で求まるので、その場の速度vaを求めたければ $$ v_a = \frac{p_a}{\rho c} $$ となります。ところで、長谷川様の仮説では物体の前方で上昇した気圧(＝物体の後方で降下した気圧)は $$ \frac{v}{c} \sin \theta ･ p \sin \theta = \frac{vp}{c} \sin^2 \theta $$ となるため、式をまとめると $$ v_a = \frac{vp \sin^2 \theta}{\rho c^2} $$ となります。僕はこのvaが気圧差を解消しようとする流速だと判断しました。そしてそれを利用して、 $$ D = \sum \frac{1}{2} \rho v_a^2 h \sqrt{\varDelta x^2 + \varDelta y^2} $$ (h:物体の高さ、Δx:x軸上の微小変化量、Δy:y軸上の微小変化量) と立式してみました。 レッツ実践 グラフの描画にはplotly.jsを使用しています。 cylinder.js // 定数群 const N = 1000; // 分割数[個] const d0 = 1; // 円柱の直径[m] const l0 = 1; // 円柱の長さ[m] const cd = 0.63; // 直径:高さが1:1の円柱の抗力係数 const sonic = 340.6520138; // 15℃時の音速[m/s] const density = 1.225; // 空気の密度[kg/m^3] const pressure = 101325; // 1気圧[Pa] const graphWidth = 720; // 表示するグラフの横幅[px] const graphHeight = 480; // 表示するグラフの高さ[px] // 共通で使う配列 const arr = [ ...Array( N ) ]; // 円を描く関数 const cylinder = ( d ) => { const r = d / 2; return ( t ) => { return { x: r * Math.cos( t ), y: r * Math.sin( t ) }; }; }; // 円を作る const foil0 = cylinder( d0 ); // 作った円を点にプロット const xyList = arr.map( ( k, i ) => i ).reduce( ( p, i ) => { const tmp = foil0( i * 2 * Math.PI / N ); p.x.push( tmp.x ); p.y.push( tmp.y ); return( p ); }, { x: [], y: [] } ); // 速度のx軸を作る(0～音速まで) const xSpeedList = arr.map( ( k, i ) => i * sonic / N ); // 従来の式での抗力のリストを作る const yCDragList = arr.map( ( k, i ) => xSpeedList[ i ] ** 2 * density * d0 * l0 * cd / 2 ); // 速度対長谷川式抗力のリストを作る const hDrag = ( v ) => arr.map( ( k, i ) => { const tmpX = xyList.x[ i ] - xyList.x[ i < N - 1 ? i + 1 : 0 ]; const tmpY = xyList.y[ i ] - xyList.y[ i < N - 1 ? i + 1 : 0 ]; const delta = Math.sqrt( tmpY ** 2 + tmpX ** 2 ); return( ( tmpY / delta ) ** 2 * delta * l0 * pressure * v / sonic ); } ).reduce( ( p, c ) => p + c, 0 ); const yHDragList = arr.map( ( k, i ) => hDrag( xSpeedList[ i ] ) ); // 速度対長谷川式抗力(前方投影面積版)のリストを作る const yHDragList2 = arr.map( ( k, i ) => 0.35 * d0 * l0 * pressure * xSpeedList[ i ] / sonic ); // 速度対樺沢式抗力のリストを作る const kDrag = ( v ) => arr.map( ( k, i ) => { const tmpX = xyList.x[ i ] - xyList.x[ i < N - 1 ? i + 1 : 0 ]; const tmpY = xyList.y[ i ] - xyList.y[ i < N - 1 ? i + 1 : 0 ]; const delta = Math.sqrt( tmpY ** 2 + tmpX ** 2 ); const accel = ( ( tmpY / delta ) ** 2 * pressure * v / ( density * sonic ** 2 ) ); return( accel ** 2 * density * delta * l0 / 2 ); } ).reduce( ( p, c ) => p + c, 0 ); const yKDragList = arr.map( ( k, i ) => kDrag( xSpeedList[ i ] ) ); // プロットした速度対抗力を線グラフとして繋ぐ const sCDrag = { x: xSpeedList, y: yCDragList, type: 'scatter', mode: 'lines', name: 'Conventional' }; const sHDrag = { x: xSpeedList, y: yHDragList, type: 'scatter', mode: 'lines', name: 'Hasegawa-1' }; const sHDrag2 = { x: xSpeedList, y: yHDragList2, type: 'scatter', mode: 'lines', name: 'Hasegawa-2' }; const sKDrag = { x: xSpeedList, y: yKDragList, type: 'scatter', mode: 'lines', name: 'Kabasawa-1' }; // 表示するグラフの配列を入れる const veloData = [ sCDrag, sHDrag, sHDrag2, sKDrag ]; // レイアウト設定 const veloLayout = { height: graphHeight, width: graphWidth, xaxis: { range: [ Math.min( ...xSpeedList ), Math.max( ...xSpeedList ) ], title: 'velocity[m/s]' }, yaxis: { range: [ Math.min( ...yCDragList ), Math.max( ...yCDragList ) ], title: 'aerodynamic drag[N]' }, title: 'Drag on the Cylinder vs Speed' }; // 実際の描画(veloの名が付いたdivタグの内容として表示) Plotly.newPlot( 'velo', veloData, veloLayout, { editable: true, scrollZoom: true, showLink: false, displaylogo: false, modeBarButtonsToRemove: ['sendDataToCloud'] } ); cylinder.html <!doctype html> <html lang='ja'> <head> <script src="https://cdn.plot.ly/plotly-latest.min.js"></script> </head> <body> <div id="velo"><!-- ここに速度対抗力のグラフを表示する --></div> <script src="cylinder.js"></script> </body> </html> ＼結果発表～!!／ 青線が従来の式(抗力係数0.63)(Conventional)、 橙線が長谷川式抗力(Hasegawa-1)、 緑線が前方投影面積から求めた長谷川式抗力に0.35をかけたもの(Hasegawa-2)、 赤線が僕の式(Kabasawa-1)です。 青線と赤線がいい感じに近似していますね。 また、緑線が当たらずと言えども遠からずなのも面白いところです。 (長谷川様曰く、緑線の抗力は実測値に基づいて経験的に0.35という係数をかけたそうです) 課題 高さ対直径が変わると抗力係数が変化しますが、それについていけないところです。 また、円柱以外の立体図形に対して有効なのか分かりません。 【緩募】マサカリ 僕は流体力学や航空力学についてはずぶのド素人なので、いい感じのマサカリが飛んでくると喜びます。 皆様と一緒にこの方式をより良いものとするためにも、是非ご協力をお願いいたします。

Safariにアドブロッカーが入っていたら 画像ファイル名に advertisement というワードがはいってると imgタグでも背景画像でも全く読み込まない。 画像名を変えるしかない。

はじめに HTML言語を全く触ったことがない超初心者が、学校で学んだことを忘れないようにすることを目的に作成しています。 HTMLとはどういったものなのか、結局何ができるのかを一緒に学んで行きましょう。 注意事項 この投稿は第2回目の続きになります。そのため、前回紹介した内容は説明せずに進めていきます。 ド素人ゆえ間違った記載(独自の解釈をしている)場合があるかもしれませんがご容赦ください。 説明に関してはできるだけ図を用いてわかりやすく、作成していこうと思います。 使用するのはGoogle Chrome、Visual Studio Codeの2点になります。 目次 1.画像を挿入方法 2.幅と高さの変え方 3.パスについて 4.alt属性とは 5.リンクを設定してみよう 6.別タブに移動する方法 7.画像にもリンクは設定するには 8.ページ内リンクの方法 1.画像を挿入方法 先ずは画像を用意 index.htmlのあるファイルに表示させたい画像を入れましょう。 画像の準備ができたら、コードを書いていきましょう。 書き方はbodyタグの中にimg src="画像名"と書いていただければOKです。 このimgタグも終了タグは不要です。 srcはsourceのことでimgがimageにあたります。 <h1>image</h1> <img src="hero.png"> 恐らく上記のコードのみだと画像が大きすぎて見切れているかと思います。 そのため次は画像の大きさを変えていきましょう。 2.幅と高さの変え方 こちらも前回の文字サイズ変更同様、本来はcssで操作をするのですが、今回もhtmlで操作していきます。画像サイズの変更方法はいくつかありますが、今回は画像のピクセル数で変える方法を紹介していきます。 書き方としてはimgタグの画像名のとなりに半角スペース横幅を表すwidth="変えたいピクセル数px"と書きます。 <h1>image</h1> <img src="hero.png" width="320px"> wudthで幅のみ指定するとコンピューター側が自動で縦横比を合わせてくれます。 高さの方で変えたいときはwidthの部分をheightに置き換え変えたいピクセル数を書きます。 幅と高さ別々で変えたいときhがどうすれば良いの？ 先ほど書いたコードのimg src="hero.png" width="320pxに半角スペースheight="変えたいピクセル数px"と書いていただけると変更することができます。 <img src="hero.png" width="320px" height="640px"> 実行結果 3.パスについて パスとは画像などのファイルの場所を指定する方法のことです。 今までのコードで言えばhtmlを操作している中のhero.pngを読み込んでいました。 ですがホームページを作るときは複数の画像を使ったりするため、画像用のフォルダーを作るのが一般的ですよね。そのため、先ずは画像用のファイルをhtmlのある場所と同じところに作成し、画像を入れましょう。 今回はimgというファイルを作り、その中にheroの画像を入れました。 これにより今の状態では作成中のホームページに画像が表示されなくなりました。 そのため、コードを変更していきましょう。 やり方は簡単で、img src="hero.png" width="320px"こちらのコードの画像名を指定している(ここではhero.png)の前に画像を入れているフォルダー名+/を入れることによってそのフォルダーの中のhero.pngを指定します。という意味になります。 <img src="img/hero.png" width="320px"> これで再読込をしていただき、画像が表示されればOKです。 次は画像表示する際に必要になってくるalt属性について紹介します。 4.alt属性とは alt属性とは画像に説明を入れることができるものになります。 特に画像の方で変化があるわけではありませんが、コードの書き間違いなどで画像を読み込むことができない時に、代替えとして表示されます。 そのためできるだけこのalt属性を付けておくと、ミスがわかりやすく便利になります。 書き方はimgタグの画像名の隣に半角スペースalt="説明文"となります。 今回はこのように書いてみました。 <img src="img/hero.png" alt="白馬" width="320px"> ではこのalt属性が正しくできているか確認するためにコードに書いてある画像名heroをHEROとして保存し、表示させてみましょう。 画像のあった場所に「白馬」の文字が来ていますね。 これで成功になります。 では次に文字や画像にリンクを付ける方法について学んでいきましょう。 5.リンクを設定してみよう リンクってなんですか？ リンクとはインターネットにアクセスした際に、クリックやタッチをすることで違うページに飛ぶといった仕組みのことになります。 使い方としては他のページに行ったり、違うページを表示させるなどで使われています。 ホームページを作るならば必須になってくるスキルだと言えます。 ではそのリンクを貼る方法について説明していきます。 リンクを行うのもbodyタグの中で操作します。 やり方は先ずはpタグで段落を付けておいてその中にaタグを入れます。 このときaタグの開始タグには半角スペースhref="飛ばしたいURL"を書きます。 aタグの間にURL先の情報を入れると良いと思います。 今回は私のQiitaのマイページにつながるように設定したいと思います。 参照コード <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>hamuo3</title> </head> <body> <h1>Hello World <p> <a href="https://qiita.com/hamuo3kameru">hamuoのQiitaはこちら</a> </p> </h1> </body> </html> 実行結果 このようにリンクを付けた部分が青文字で下線部が引かれているアンカーテキストに切り替わり、その部分のクリックすると指定したリンク先に移動していればOKです。 ですがこの状態だと元の画面は消えてしまい何かと不便ですよね。 そこで新しいタブを開く方法を紹介していきます。 6.別タブに移動する方法 先ほど書いたaタグのURLを書いたとなりに半角スペースtarget_"blank"と打てば新しいタブが開かれるようになります。 <a href="https://qiita.com/hamuo3kameru" target="blank">hamuoのQiitaはこちら</a> できましたら、一度上書き保存してから更新していただきリンク先が新しいタブに移動できていれば次は画像にもリンクを設定していきましょう。 7.画像にもリンクは設定するには 上記で記載したhamuoのQiitaはこちらの部分を消して「4.alt属性とは」で記載した img src="img/hero.png" alt="白馬" width="320px"と書き画像を挿入します。 ここでは必ずaタグの間にimgタグを入れてください。 <h1>Hello World <p> <a href="https://qiita.com/hamuo3kameru" target="blank"> <img src="img/hero.png" alt="白馬" width="320px"> </a> </p> </h1> これにより、画像をクリックすると指定したリンク先に飛ぶことができます。 それでは最後にページ内リンクについて設定していきましょう。 8.ページ内リンクの方法 ページ内リンクを行うのでtarget="blank"は一旦消しましょう。 移動したことを確認しやすいように、リンク先のタグをいくつかのbr(改行)タグで挟んでおきましょう。 次にhタグで移動先をを作ります。このときhタグの中にidを設定していきます。書き方はid="好みのid名"で書きます。 次にリンクの設定を行ったhrefの内容を消して、#設定したid名を入れると完了です。 参照コード <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>hamuo3</title> </head> <body> <h1>Hello World <p> <a href="#sample"> <img src="img/hero.png" alt="白馬" width="320px"> </a> </p> <br><br><br><br><br><br><br><br><br><br><br><br><br> <h2 id="sample">これぐらい簡単だよねぇ</h2> <br><br><br><br><br><br><br><br><br><br><br><br><br> </h1> </body> </html> 画像をクリックすると brタグで挟まれたh2タグのHEROと書かれた場所までページ内で移動が行われていれば完成です。 いかがだったでしょうか、今回はここまでとさせていただきます。 次回はcssの簡単な書きかたについて説明していきます。 それでは皆さん、お疲れ様でした。