フロントエンド(コーダー) 「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?...
投稿
- リンクを取得
- ×
- メール
- 他のアプリ
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>