Reportage Pickup Report

投稿

12月 18, 2024

<html lang="ja"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <style> #readtitle_area { width: 100%; /* 親要素の幅 */ } #readtitle_area>div { padding-right: 10px; /* 要素間の間隔を設定 */ } #readtitle_area>.LeftWing { float: left; } #readtitle_area>.RightWing { padding-right: 0; /* 最後の要素に余白を設定しない */ float: right; } </style> <body> <div id="readtitle_area"> <div class="LeftWing">タイトル</div> <div class="RightWing"><input type="button" id="read_updatebtn" value="更新"></div> </div> </body> </html>

11月 30, 2024

フロントエンド(コーダー) 「HTML、CSS」の基礎ならProgateや参考書などで良いでしょう。参考 HTMLが学べる学習本・書籍おすすめ10選 HTML学習 https://www.sejuku.net/blog/258353 ※「HTML、CSS」はプログラミング言語では無い。「HTML、CSS」のプロ・レベル(コーダー)は非常に難易度が高いので、アマチュア・レベルでは100%無理と思って良いです(アマチュア・レベルを何年勉強しても無理と言う事)。分かりやすく喩えて言うと、草野球とメジャーリーグぐらいの差なので、草野球を10年やっても20年やっても、メジャーリーグは無理と言う事です。なので「HTML、CSS」のプロ・レベル(コーダー)を目指すなら、プロ・レベル(コーダー)の勉強が必要になりますが、プロ・レベル(コーダー)を勉強しようとすると、恐らく9割程度の人が挫折するでしょう。「高額情報商材、スクール」では、当然 9割程度の人が挫折すると分かってて、販売なり生徒募集なりをしているので、詐欺では無いにしても「未必の故意」が有ります。もしもフロントエンド(プロ)を目指すなら、(JavaScriptの解説は除き)下記を100%理解でき具現化できてフロントエンド(プロ)の"基礎"レベルです、本職のフロントエンド(プロ)になるには更に上のレベルが要求されます。ここで言っているフロントエンド(プロ)とは、あくまでもコーダーの事です。特定の解像度に依存しない実用的なWebページ https://rara.jp/sphinx1335/page2 ※その中の『HTML5の基礎と課題』のフロントエンド(プロ)"入門"用程度の課題を自分でググってコーディングできない場合は、フロントエンド(プロ)は無理だと思って良いでしょう。下記のようなクソみたいな欠陥Webページだと、当然 SEO的にマイナスになります(当然、フロントエンド(プロ)としても失格です)。 >下の画像のページが表示されたら、このWebページ作ったヤツはアホだろと思ってブラウザ・バックしますよね？ > https://drive.google.com/file/d/1znyw4kX9m4I4enroA931c7tyZ1wq8A91/view?...

11月 28, 2024

Javaの小技 ■知ってお得な機能プリミティブ型、オブジェクト型(参照型)　オートボクシング、アンボクシング http://qiita.com/chihiro/items/870eca6e911fa5cd8e58 関数型、メソッド参照、ラムダ式、ストリーム処理 https://qiita.com/lrf141/items/98ffbeaee42d30cca4dc 関数型プログラミングで行こう～みんな大好きJavaから入る関数型の入り口の入り口 http://tercel-tech.hatenablog.com/entry/2014/12/29/173711 [Java] Java8のラムダに超入門（書き方、関数型インターフェース、独自に定義、ラムダ受け取り処理） https://www.yoheim.net/blog.php?q=20160410 [java][java8]Java 8を関数型っぽく使うためのおまじない http://d.hatena.ne.jp/nowokay/20130501 >カリー化 >さて、２引数以上の関数は甘えと書きましたが ↑(知っておいて損は無いかもしれないが)ラムダ式は丸括弧で囲めば2引数以上も可能なのでカリー化は特に必要ない。 ■GUIコンポーネントの設定はイベント・ディスパッチ・スレッドで設定しなければならなくなったようです。昔はイベントもメイン･スレッドでしたが、(知らぬ間に)イベントがイベント・ディスパッチ・スレッドに分離されたようで、GUIコンポーネントの設定もイベント・ディスパッチ・スレッドで設定しなければならなくなりました、つまりメイン･スレッドでのGUIコンポーネントの設定はNGになってしまいました。対処法は定型処理で記述できるので簡単に対応できます(下記)。 Java Swing／「JFrameスケルトン･テンプレート」(7) http://pleiades.vs.land.to/utf8/smt.cgi?r+sara/&bid+00000428&tsn+00000428&bts+2021/01/20%2016%3A41%3A48& ■スレッドは「Concurrency Utilities」のスレッドが強く推奨されます。 (知らぬ間に)古い...

11月 27, 2024

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> </head> <style> .Border { border: thin solid black; } body { display: flex; flex-direction: column; row-gap: 10px; } .Container { display: flex; column-gap: 10px; } main { width: 75%; display: grid; grid-template-columns: 5px repeat(12, 1fr) 5px; grid-template-rows: repeat(4, 150px); gap: 10px 0; } header, nav, footer { height: 150px; border: thin solid black; } main>* { box-sizing: border-box; border-top: thin solid black; border-bottom: thin solid black; } aside>* { box-sizing: border-box; border: thin solid black; ...

11月 27, 2024

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> </head> <style> .Border { border: thin solid black; } body { display: flex; flex-direction: column; row-gap: 10px; } .Container { display: flex; column-gap: 10px; } main { width: 75%; display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: repeat(4, 150px); gap: 10px 0; } header, nav, footer { height: 150px; border: thin solid black; } main>* { box-sizing: border-box; border-top: thin solid black; border-bottom: thin solid black; } aside>* { box-sizing: border-box; border: thin solid black; } ...

11月 25, 2024

JavaScriptデモ／ESM(ES Module) 素のJavaScript(ブラウザ用JavaScript)でModuleを使いたい場合は、ESM(ES Module)記法で記述する必要があるようです。ただし、両方ともサーバー上にないとModuleはimportできないようです。下記デモはコンソールに表示するだけです。【test.html】 <!DOCTYPE html> <html lang="ja"> <meta charset="UTF-8"> <script type="module"> import * as Hoge from "./script.js"; Hoge.Hello(); </script> </html> 【script.js】 export var Hello = function () { console.log("Hello World"); } 【test.html】(動的ローディング版) ※非同期処理に成っている事に注意。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> </head> <script> import('./script.js').then(Hoge => { Hoge.Hello(); }); </script> <body> </body> </html> 参考 Visual Studio Codeでフロントエンド開発環境を構築する http://ashtarte.pa.land.to/utf8/smt.cgi?r+sara/&bid+000002AB&tsn+000002AB&bts+2019/11/17%2010%3A34%3A59& Visual Studio CodeにLive Serverプラグインを導入すること...