<div class="test1 test2 test3"> .test3 { background-color: blue; } .test2 { background-color: green; } .test1 { background-color: red; } このhtml上で反映されるcssはcssファイルに書いた最後のコードが反映されます。 ここでいうと、test1のredが適用される。 html上のclassの順番を変えても変わらず、cssファイルの下にある情報が優先順位としては高いみたいですね。 ただし、この際、htmlにstyleを直書きすると、優先されるのはstyleに書いた情報です。なので、style > classで cssの順位はcssファイルの読み込まれる順番で決まる！！！

期間限定だが、404ページをハロウィーン仕様にしてみました。 ページを読み込んだら、1秒かけてカボチャの口が開いて、メッセージ「404 File not found.」が表示されるというアニメーションです。 右上の「EDIT ON CODEPEN」のロゴをクリックすると、記事に埋め込まれているコードが画面いっぱいに表示されるページに遷移します。 See the Pen Untitled by haruyosih (@lvn_HO) on CodePen. 口が開くカボチャのパーツを上顎 div id="upper"、下顎 div id="lower"、頬 div id="cheek"の3つのパーツに分け、この3つのパーツを包含するブロックを div id="pumpkin"としました。さらにこの中にメッセージ用テキストも内包しています。 <div id="pumpkin"> <div id="upper"></div> <div id="lower"></div> <div id="cheek"></div> <div id="message"><span>404</span>File not found.</div> </div> ① cssでのレイアウトは div id="pumpkin"を基準（ position:relative;）として、「上顎」「頬」「下顎」を絶対配置 position:absolute;で配置します。 ②はじめは上顎は閉まっている状態です。上顎の高さは294pxで、口が開いた状態にするにはtop: -294px;（要素の高さ分だけ上にあげる）、口を閉じた状態の時には100px下に配置したいのでtop: -194px;とします。この状態で始まり、1秒かけて上に100px移動させるのでアニメーションのcssは以下のようにします。 @keyframes upper { 0% { top: -194px; } 100% { top: -294px; } } ③下顎は div id="lower" はheight: 112pxで、 ページ読み込み後、1秒かかて112px下に移動させるのでアニメーションのcssは以下のようにします。 @keyframes lower { 0% { bottom: 0px; } 100% { bottom: -112px; } } ④頬 div id="cheek" は初めは見えない状態にしておきたいので初期値は height: 0　、で1秒かけて200pxの高さに変型させます。 その際、基準点が左上になり、上から下に 200px伸びる動きになります。真ん中がから上と下に 100pxずつ広がってほしいので position:100px（上下真中の位置）として、このブロックの高さ（200px）の半分（100px）の高さにしておきます。 アニメーションのcssは以下のようにします。 @keyframes cheek { 0% { height:0px; opacity: 1; top: 100px; } 100% { height:200px; opacity: 1; top: 0; } } ⑤404メッセージもブラーをつけてフェードインで表示されるアニメーションにしました。 HTMLは <div id="message"><span>404</span>File not found.</div></div> cssで blurFadeIn というアニメーションネームをつけて、ページを読み込んでから3秒後に3秒かけて文字をフェードインさせます。 #message { 　animation: blurFadeIn 3s ease 3s 1 forwards; 　opacity: 0; } @-webkit-keyframes blurFadeIn{ 0%{ opacity: 0; text-shadow: 0px 0px 40px #fff; transform: scale(1.3); } 50%{ opacity: 0.5; text-shadow: 0px 0px 10px #fff; transform: scale(1.1); } 100%{ opacity: 1; text-shadow: 0px 0px 1px #fff; transform: scale(1); } } こうするとページ読み込み後、上下の顎が開いて口の中 div id="cheek" が見えて、更にテキストアニメーションで404メッセージが表示されます。

プログラミング言語の基礎を学ぶとき あなたは長い間理解し、覚えることができるように練習したいと思うでしょう。 したがって、以下のウェブサイトは、子供たちがより長く覚えるための演習を解決する際にその知識を適用するために生まれました。 これらのサイトの目的は、プログラミングスキルのテストを支援することです。 低いものから高いものへと問題を解決することによって。 それだけでなく、あなたはしなければなりません より高いランキングを達成するために他の開発者と競争してください。 それはゲームをするようなものです。 あなたはブロンズ、シルバーからゴールド、プラチナのような低ランクから行かなければなりません...これらのページが場所になることを願っています プログラミングへの関心を高め、新しい知識を学ぶのに役立ちます。 Exercism Exercism Webサイトには、50を超えるサポートされているプログラミング言語で練習できる何千もの演習があります。 その演習も非常に多様で、初心者やプログラミング業界で多くの経験を持つ人に提供されています。 オープンソースであり、世界中のボランティアプログラマーの貢献に依存しているため、費用は一切かかりませんのでご安心ください。 さらに、自分に能力があると感じた場合は、コミュニティに貢献して、他の学生が役立つ演習を行ったり、自分で知識を追加したりできるようにすることもできます。 Exercism CodeWars CodeWarsのWebサイトは、その名前が示すように、各問題を解決する場所であり、簡単なものから難しいものまで上位にランクされています。 サイトはキュウと呼ばれるポイントに基づいて評価を計算し、このスコアはあなたが解決している問題の程度に応じて上下します。 問題の解決策を見つけたら、他の人の答えを見て、それらを自分のコードと比較して、スキルをさらに向上させることができます。 CodeWars CodeChef CodeChefのWebサイトは、インドのソフトウェア会社Directによって設立された非営利の教育機関として知られています。 オンラインエディタを使用して、問題をすばやく解決できます。 さらに、問題はレベルに応じてサイト上で分類されます。 このサイトのハイライトは、他のプログラマーとコミュニケーションを取り、疑問に思っている質問をしたり、他のプログラマーの質問に答えたりできることです。 CodeChef CodinGame CodinGameのWebサイトでコードを学習しながら、実際にゲームをプレイできます。 それは私たちがよりリラックスして幸せな方法で問題を解決することを可能にするだけでなく、問題解決への私たちの興味を高めます。 CodinGameは25以上の言語をサポートしており、世界最高のプログラマーから多くのアルゴリズムやトリックを学ぶことができます。 数学の問題は、簡単なものから難しいものまで、すべての人の学習ニーズを満たすために多くの異なるレベルに分けられます CodinGame HackerRank HackerRank Webサイトは、コーディングスキルの向上を目指すすべての人に人気のあるサイトです。 世界クラスの大会では、初心者だけでなく才能のあるプログラマーも参加できます。 また、採用会社が主催するコンテストを通じて、適切な仕事を見つける機会もあります。 それは主にアルゴリズム、AI、データベース、数学に焦点を当てています... HackerRank CoderByte CoderByte Webサイトは、コーディングスキルの練習と向上を可能にするWebアプリケーションです。 難しいものから簡単なものまで、プログラミングのすべてのレベルに分類されている多くの問題があります。 さらに、マイクロソフト、グーグル、フェイスブックなどの大企業への面接の質問は、これらの企業に応募する際に適用するテクニックを理解するのに役立ちます。 欠点は、高度なタスクにアクセスしてここでコースを受講するのに月額約35ドルかかることです。 CoderByte FreeCodeCamp FreeCodeCampのWebサイトはおそらく私のお気に入りです。 それは私たちが新しい知識を学び、私たちが学んだことを実際の問題解決に素早く適用するのに役立ちます。 さらに、学習したばかりのスキルに関するプロジェクトを完了すると、無料の証明書を受け取ります。 このコースのプログラミング言語は、HTMLやCSSの学習など、プログラミングに不慣れな人のために特別に設計されています。 コーディングプロセス中に質問に答えるのに役立つ専用のフォーラムもあります。 FreeCodeCamp Edabit Edabit Webサイトでは、このサイトでのライブの問題解決を通じて、言語の基本と微妙な点を学ぶことができます。 問題を解決するたびに、ポイントはxpで自動的に計算されます。 ポイントが多ければ多いほど、レベルは高くなります。 あなたや他のプログラマーがリーダーボードのトップに立つためにポイントを競うのは楽しいですね。 また、コーディングの面白さを増し、実際のプログラマーのように問題を考えて解決するのに役立ちます。 Edabit TopCoder TopCoderサイトは、問題解決レベルがかなり難しい挑戦的なサイトであり、通常、プログラミングの経験が豊富な人を対象としています。 特定の問題を解決する必要のある企業と、世界中の開発者によるソリューションをつなぐ場所です。 したがって、ソリューションが他のプログラマーよりも優れている場合は、賞品を獲得できます。 さらに、解決された問題を確認して修正し、Webサイトに適用することができます。 TopCoder Codepen Codepen Webサイトは、さまざまなプログラミング言語で事前に記述されたコードを使用するプログラマーのためのソーシャルネットワークと見なされているため、他のプログラマーと学習して対話することができます。 もう1つの興味深い点は、毎週Webサイトに解決する必要のあるトピックがあり、あなたと他の人が問題を迅速かつ最適に解決するために競争していることです。 Codepen 概要： これを通じて、この記事がコーディングへの関心を見つけ、問題を解決するのに役立つことを願っています。 より良い方法でトピックを作成します。ご不明な点がございましたら、メールをお送りください。できるだけ早く返信いたします。 楽しみにしている もっと良い記事を書けるように、引き続きサイトを応援してください。 良い1日を！ 参照リンクen.niemvuilaptrinh.com

はじめに 最近、なんちゃってグループウェアみたいなものを作ることがあり、 そんな中初めて、FullCalenderを使ってみようといろいろ試しています。 今回は、Timeline Viewで複数の日付を表示した際に、日付のが変わる位置の線を変更したという内容です。 もっといい方法があるよという人はぜひ教えてください。 本記事は、以下の記事がほぼそのままの内容ですが、こちらの記事ではCSS時間をべた書きしてしまっています。 ユーザーで設定を変更したり変数化した際、CSSを書き換えるのが難しいためJS側で設定できるようにしたものです。 How can I show separation between days in a FullCalendar ResourceTimeline? 注意 商用利用の場合Timeline Viewは有料機能です。 サンプルのソースコードと、完成イメージはライセンスが入っていないテスト状態です。 bootstrap 5.xでは動作しないようです。 環境 Chrome バージョン: 94.0.4606.81（Official Build） （64 ビット） jquery 3.6.0 bootstrap 4.6.0 FullCalender 5.9.0 実装 完成イメージ 10/20と10/21の間に黒の線が入っています。 コード calender.js var calendarEl = document.getElementById('calendar'); // カレンダーを表示するDIV let calender_setting = { initialView: 'resourceTimelineWeek', // 表示モード slotMinTime: '07:00', slotMaxTime: '20:00', datesSet(info){ // calendarの日付情報が変更される度に呼び出される // 日付境界に当たるセルにクラスを追加する day_firest_time = calendar.getOption('slotMinTime')+ ":00"; // 07:00:00 // data-dateの値が07:00:00で終わるNodeを集める allEl = document.querySelectorAll('th[data-date$="'+day_firest_time+'"], td[data-date$="'+day_firest_time+'"]'); for (var i = 0; i < allEl.length; i++) { // 全部のElementにクラスを追加 allEl[i].classList.add('day_firest_time_cell'); } }, resources: [ // リソース ] } //　カレンダーの初期化 document.addEventListener('DOMContentLoaded', init); function init() { calendar = new FullCalendar.Calendar(calendarEl,calender_setting); calendar.render(); } clender_custom.css .day_firest_time_cell { border-left: 3px double !important; border-left-color: #333 !important; } clender.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2-bootstrap-theme@0.1.0-beta.10/dist/select2-bootstrap.min.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar@5.9.0/main.min.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar-scheduler@5.9.0/main.min.css"> <link rel="stylesheet" href="clender_custom.css"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.full.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.9.0/main.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.9.0/locales/ja.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/fullcalendar-scheduler@5.9.0/main.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/fullcalendar-scheduler@5.9.0/locales-all.min.js"></script> <script src="./js/calendar.js"></script> <title></title> </head> <body> <div id='calendar'></div> </body> </html> おわり 今回は3px 2重線 #333にしていますが、お好みで。 calender.jsのslotMinTimeを変更することで開始時間を調整できます。 実装のコードは実用しているものから公開できるように簡易化したものです。 主題の内容以外は取り除かれているので、実装コードだけでは完成イメージにはなりません。 ローカライゼーションなどは公式サイトなど見てください。 再利用などはご自由に。本家のライセンスは守ってくださいね。 大変使いやすくてありがたいのですが、ちょっとカスタマイズしようとすると、検索がなかなか大変です。 特に商用では有料の機能については、日本語の情報はなかなか見つからないので試行錯誤の毎日です。 意見やもっとこうすればいいよがればコメントいただければ。 参考文献 How can I show separation between days in a FullCalendar ResourceTimeline? / stack overflow datesSet / FullCalender Docs

【CSSの基本】そのmarginはどの要素が持っているのか 複数人数でコーディング作業していると、「あれ？CSSのmarginの当て方が自分のやり方と違ってて…ちょっと気持ち悪い」って思うことがありませんか？ marginの付け方に強制的なルールはないのですが、何となく一方向に向かってmarginを当てている人が多いと思います。 具体的には要素の下に付けていくタイプ（margin-bottom派）と上に付けていくタイプ（margin-top派）です。 margin-bottom派？margin-top派？それとも？ 「マージンをどっち向きに付けるか問題」は結構古くからネット上の話題に上っています。 結局、強制的なルールがない以上、結論は出ないのですが、だいたい大きく分けて margin-bottom派 margin-top派 ミックス派 の3つの派閥に分かれているみたいです。 ～シンプルに考えて～margin-bottom派の意見 HTML＋CSSでコーディングをはじめてすぐはmargin-bottom派が多いのではないかと思います。 要素の間を開けるのに最も直感的に記述できるからでしょう。 私もコーディングを始めたころはmargin-bottomで要素間のスペースを開けていました。 ～スマートなCSSを目指して～margin-top派の意見 margin-bottomで作業を進めると最後の要素の下にもmarginが開いてしまう時があります。（<ul>や<ol>の<li>タグなど） 解消するためには 疑似要素:last-child で最後の要素を別途修正するのですが、それがなんだか煩わしいとか。 また、上の要素と下の要素があったとして、下の要素が現れるまでは上の要素にmarginは必要ないのだから、下の要素がmarginを伴って表示されるべきというロジックがあります。 ～そうは言っても…～ミックス派の意見 margin-top も margin-bottom もあるんだから、都合に合わせて融通したらいいじゃない？ とはいえ、それだと冒頭の複数人数で作業する場合、marginのポリシーが決まっていないと対応がバラバラになってしまい、CSSの汎用性が損なわれる可能性もあります。 なんらかのルールが欲しいところです。 親分子分派の旗揚げ 勝手に変な名前の派閥を立ち上げた感じですが、私はこんな考えでmarginルールを決めています。 基本的にはmargin-top派の「次の要素が余白を伴って表示される」という考えをベースにしています。 ただサイトの更新などでHTMLに変更があった場合、CSSもそれに伴い修正を余儀なくされるのですが、なるべく手間を減らしたいので、 要素に優先順位をつけて最も重要な要素を「親分」とし、付随する要素を「子分」として余白を持って追加されるようにします。 例えばこんなHTMLがあったとします。 .postクラスの中に記事タイトル、概要文、詳細リンクがあります。 <div class="post"> <h3><a href="#">記事タイトル</a></h3> <p>概要文テキスト概要文テキスト概要文テキスト</p> <a href="#" class="button">詳細リンク</a> </div> 単純なmargin-top派だと、marginの方向は以下のようになると思います。 <div class="post"> <h3><a href="#">記事タイトル</a></h3> ↑↑↑ <p>概要文テキスト概要文テキスト概要文テキスト</p> ↑↑↑ <a href="#" class="button">詳細リンク</a> </div> 概要文の<p>タグが記事タイトルである<h3>タグとの間にmarginを持ち、さらにその下に詳細リンクの<a>タグが<p>タグとの間にmarginを持つ形です。 ある時、記事タイトルの上にタイムスタンプを追加して、その代わり概要文を削除する修正が入ったとします。 <div class="post"> <time>2021.11.11</time> <h3><a href="#">記事タイトル</a></h3> <a href="#" class="button">詳細リンク</a> </div> これまでのmargin-top方式だとこうなりますが、<time>タグを追加し、<h3>タグにmargin-topを与えないといけないです。 <div class="post"> <time>2021.11.11</time> ↑↑↑ <h3><a href="#">記事タイトル</a></h3> ↑↑↑ <a href="#" class="button">詳細リンク</a> </div> これでも問題ないのですが、<h3>タグは.postクラスの中では必ず表示される最も重要な要素（親分）だと思われるので、ここを何度も修正したくありません。 そこで、、<h3>タグを中心にそのほかの要素がmarginを持つようにしてみます。 <div class="post"> <time>2021.11.11</time> ↓↓↓ <h3><a href="#">記事タイトル</a></h3> ↑↑↑ <a href="#" class="button">詳細リンク</a> </div> なーんだ、<time>タグにmargin-bottomをつけて、<h3>タグには何もつけないようにしただけじゃないか！ 確かにそうなんですが、.postクラスの中心である<h3>タグは、今後の更新でもほぼなくならない要素です。 <h3>タグを中心にすることで、CSSの修正は他の要素に絞られます。 追加・削除する要素のみ修正することができるようになります。 （もっとも、デザインがより複雑化すると、こんなに単純ではないですが。） ともあれ、タグの持つ意味や文章構造を重要視するならば、HTML5的にもよい考えなのかなと思っています。