フロントエンド(コーダー) 「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月, 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」のスレッドが強く推奨されます。 (知らぬ間に)古い...
- リンクを取得
- ×
- メール
- 他のアプリ
<!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; ...
- リンクを取得
- ×
- メール
- 他のアプリ
<!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; } ...
- リンクを取得
- ×
- メール
- 他のアプリ
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プラグインを導入すること...
- リンクを取得
- ×
- メール
- 他のアプリ
【HTML Living Standard(HTML5)、CSS3」仕様】 現在はHTML5は廃止され、「HTML Living Standard」に移行しましたが、現状では「HTML Living Standard」はHTML5の ほぼ上位互換です。 なので現状ではHTML5で勉強しても大丈夫ですが、気になる場合は下記「HTML Living Standardとは？廃止されたHTML5との違いなど徹底解説！｜SEOラボ」、「HTML5は廃止でHTML Living Standardが採用！経緯やそれぞれの違いを解説」を参照してみると良いでしょう。 ただし、将来的には「HTML Living Standard」とHTML5の仕様は乖離して行くかもしれません。 Doctypeスイッチ http://webnote.motq.net/html/sum/doctype-switch.htm HTML5の要素による構成例 https://web-svr.com/HTML5%E7%B7%A8/21.php ※↑これは あくまでも基本の例であって絶対ではありません(例えばaside要素を左に配置するとか、aside要素自体を無くす、footer要素自体を無くすなど)。 [PC表示]と[スマートフォン表示]でレイアウト構成が変化している事に注意して下さい、一般的にレスポンシブ･デザインと言う手法が使われます。 ※「header要素、footer要素、nav要素、main要素、article要素、section要素、aside要素」などのリンク先のページを参照することを強く推奨します。 それらの意味が分からずに使っても、それでは間違って使ってるだけになるので、それなら(間違って使うよりは)とりあえずdivタグで代替しておけばおｋです(pタグも「Paragraph：段落」であって改行では無い)。 まあ「header要素、footer要素、nav要素、main要素、aside要素」ぐらいなら間違えることも無いでしょうけど。 <p>｜正しい段落の使い方・記述方法 https://www.webnoiroha.net/html-p/ >pタグとは? >段落は英語で“Paragraph”といい、この頭文字の’P’がタグの名称となっています。 >pタグは...
- リンクを取得
- ×
- メール
- 他のアプリ
relative→absolute→relative→absolute <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> </head> <style> .Border { border: thin solid black; } .Size { width: 10vw; height: 10vw; } .Bias { left: 3vw; top: 3vw; } .Relative { position: relative; } .Absolute { position: absolute; } </style> <body> <div class="Size Border Relative "> <div class="Size Border Absolute Bias"> <div class="Size Relative"> <div class="Size Border Absolute Bias"></div> </div> </div> </div> </body> </html>
- リンクを取得
- ×
- メール
- 他のアプリ
import java.io.BufferedReader; import java.io.FileInputStream; import java.io.InputStreamReader; import java.io.IOException; import java.util.ArrayList; import java.util.Scanner; public class WordReaderTest { public static void main(String[] args) { // WordReaderDsp(new FileWordReader("Test.txt", "UTF-8")); System.out.println("2次元配列array[y][x]の四隅を指定せよ。"); System.out.println("array[y][x]の引数を「x」「y」の順番で入力する、「x」「y」は「0～2」の半角数字を入力する、「x」「y」の間にはスペースを入れる。"); System.out.println("エラーにならない限りは4回まで入力できます。"); System.out.println(); System.out.println("入力を開始して下さい。"); WordReaderDsp(new Scanner2()); } public static void WordReaderDsp(IFWordReader wr) { char[][] array = new char[3][3]; for (int k = 1; k <= 4; k++) { try { int x = (int) Float.parseFloat(wr.next()); int y = (int)...
- リンクを取得
- ×
- メール
- 他のアプリ
JavaScriptデモ／AJAX「外部テキスト･ファイル読み込み」 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> </style> </head> <body> <div id="idDisplay"></div> </body> <script> let wDisplay = document.getElementById("idDisplay"); let sCharset = "UTF-8"; let sFileName = "hoge.txt" let oAJAX = new XMLHttpRequest(); oAJAX.overrideMimeType('text/plain; charset=' + sCharset); oAJAX.open("GET", sFileName, true); oAJAX.onload = function () { console.log("oAJAX.onload"); if (this.readyState === 4 && this.status === 200) { console.log("this.readyState: " + this.readyState); console.log("this.status: " + this.status); let res = oAJAX.responseText; wDisplay.innerText = res; } }; oAJAX...
- リンクを取得
- ×
- メール
- 他のアプリ
コーダーとWebデザイナー ガチのWeb系ベンダーの場合(フリーランスが基本)。 Webデザイナーは「Photoshop、Illustrator」などで(pxで)デザインカンプ(データ)を作ります(それがWebデザインです)。 つまりWebデザイナーは「Photoshop、Illustrator」のどちらかが必要と言うことです(業界標準です)。 コーダーはそのデザインカンプ(データ)を元に、(pxをvwに換算して)コーディングします(なので基本的にWebデザイナーはコーディングしませんし、コーダーはWebデザインはしません)。 稀に「Webデザイナー+コーダー」の兼業者も居ますが、Webデザイナーとコーダーは完全に別業種です。 なおコーダーはそのデザインカンプ(データ)を見るために、一般的に「Photoshop、Illustrator」をマニュアルを見ずにバリバリ使えるようにしておけと言われているようです(マニュアルを見ながらチマチマやってたら納期がキツくなるので)、つまりコーダーは「Photoshop、Illustrator」が必須と言うことですが、プロなら「XD」も揃えとけと言われています(XDは「Photoshop、Illustrator」で何か問題が発生した場合の保険と言う意味合いが強いようです)。 自社のコーポレート・サイトを作成している部門の場合(社員などとして雇用)。 一般的には、「Webデザイナー、コーダー」の両方のスキルが要求される場合が多いように思われます。 ただし、自社のコーポレート・サイトを作成している部門だと一般的には、コーダーはアマチュア・レベルが大半だと思って良いです。 基本的にアマチュア・レベルだと、ほぼほぼ(99.9%)欠陥Webページしか作れないと思って良いです。 この知恵袋でも、自社のコーポレート・サイトを作成している部門の人が質問したりして来ますが、"全員"アマチュア・レベルなので、(アマチュア・レベルだと)欠陥Webページしか作れないので、プロ・レベルを勉強して下さいとアドバイスしてあげても、上司にバレなきゃ良いみたいな感じで、誰もプロ・レベルを勉強しようとした人は居なかったですね。 上司にバレたら怒られるよ、と忠告してあげても「そんなの関係ねぇ」みたいな対応になる。 何が言いたいのかというと、自社のコ...
- リンクを取得
- ×
- メール
- 他のアプリ
HTML Living Standard(HTML5)、CSS3」仕様 現在はHTML5は廃止され、「HTML Living Standard」に移行しましたが、現状では「HTML Living Standard」はHTML5の ほぼ上位互換です。 なので現状ではHTML5で勉強しても大丈夫ですが、気になる場合は下記「HTML Living Standardとは？廃止されたHTML5との違いなど徹底解説！｜SEOラボ」、「HTML5は廃止でHTML Living Standardが採用！経緯やそれぞれの違いを解説」を参照してみると良いでしょう。 ただし、将来的には「HTML Living Standard」とHTML5の仕様は乖離して行くかもしれません。 Doctypeスイッチ http://webnote.motq.net/html/sum/doctype-switch.htm HTML5の要素による構成例 https://web-svr.com/HTML5%E7%B7%A8/21.php ※↑これは あくまでも基本の例であって絶対ではありません(例えばaside要素を左に配置するとか、aside要素自体を無くす、footer要素自体を無くすなど)。 [PC表示]と[スマートフォン表示]でレイアウト構成が変化している事に注意して下さい、一般的にレスポンシブ･デザインと言う手法が使われます。 ※「header要素、footer要素、nav要素、main要素、article要素、section要素、aside要素」などのリンク先のページを参照することを強く推奨します。 それらの意味が分からずに使っても、それでは間違って使ってるだけになるので、それなら(間違って使うよりは)とりあえずdivタグで代替しておけばおｋです(pタグも「Paragraph：段落」であって改行では無い)。 まあ「header要素、footer要素、nav要素、main要素、aside要素」ぐらいなら間違えることも無いでしょうけど。 <p>｜正しい段落の使い方・記述方法 https://www.webnoiroha.net/html-p/ >pタグとは? >段落は英語で“Paragraph”といい、この頭文字の’P’がタグの名称となっています。 >pタグは決し...
- リンクを取得
- ×
- メール
- 他のアプリ
Javaデモ／JSPages「ファイル入出力、ファイル･ロック」：「RandomAccessFile、FileChannel、Charset、ByteBuffer」(Ver.2) 開発環境はEclipseです。 Eclipseにおいてサーバー･サイド用Javaプロジェクトを作る場合は「動的Web」でプロジェクトを作る必要が有ります。 「動的Web」プロジェクト作成時には、必ず「web.xmlデプロイメント記述子の生成」チェックボックスをチェックしてして下さい(下記参照)。 Webアプリ向け開発手順 http://www.javaroad.jp/opensource/js_eclipse6.htm 現在、文字エンコードは多数ありますが、「UTF-8、Shift_JIS」の2つがインターネットでのデファクト･スタンダードですが、Windowsの場合はShift_JISとは微妙に違うMS932(CP932)がデファクト･スタンダードになります(なのでWindowsにおいてShift_JISと言う場合は、基本的にMS932(CP932)を意味します)。 指定されている文字エンコードとセーブ時の文字エンコードが違うと全角文字が文字化けするので注意して下さい。 【このデモの略説】 新規データをファイルの先頭に追加して行きます。 サーバー･サイドの場合、多数のユーザーが同時にアクセスした場合を考慮する必要があります。 具体的にはサーバー･サイドの場合は、ファイル出力時にファイルをロックしないとデータ破壊される危険性があります。 また ファイルの書き換え(ファイル入力してファイル出力する)は、ファイル入出力を一体としてロックしないとデータ破壊される危険性があります、つまり ファイル入力とファイル出力でファイル・ロックを2つに分けるとファイル･データが破壊される危険性があります。 下記デモでもファイル入力とファイル出力でファイル・ロックは1つだけだと言うことに注意して下さい。 try-with-resources文を使っているので自動クローズがサポートされるので、クローズを明記する必要は有りません。 クローズすると自動的にロックも解除されるので、ロックの解除も明記する必要は有りません。 「oRWChannel.truncate(0);」は一旦ファイル･サイズをゼロにしていま...
- リンクを取得
- ×
- メール
- 他のアプリ
Javaデモ／Swing「JFrameスケルトン･テンプレート」(8) import java.awt.EventQueue; import java.awt.Container; import javax.swing.JFrame; public class J005 extends JFrame { static String sAppTitle = "Java Application"; static J005 oAppFrame; Container content; /** * Launch the application. */ public static void main(String[] args) { // 以前はイベントもメイン･スレッドでしたが、 // イベントはイベント・ディスパッチ・スレッドに分離されたために、 // GUIコンポーネントの設定もイベント・ディスパッチ・スレッドで設定しなければならなくなったので、 // メイン･スレッドでのGUIコンポーネントの設定はNGになりました、 // 下記のように「EventQueue.invokeLater()」でイベント・ディスパッチ・スレッドに登録しなければなりません。 EventQueue.invokeLater(new Runnable() { public void run() { try { oAppFrame = new J005(); oAppFrame.setVisible(true); } catch (Exception ex) { ...