プレーンテキストにタグをつけて、機械（コンピュータ）にも情報を理解出来るようにすること。変な形の場合は、「不思議マークアップ」と呼ばれる（ことがある）。
HTML学習、 本格的に、わからなくなってきた・・・ 課題で、マークアップしろと言われても、 タイトルと段落しかできない。 全く情けない。 聞いてる時はわかるけど、実際始まると、頭真っ白。 これ、できるようになるの？？
マークアップってご存じですか？ ここで述べているマークアップは、FXブローカーが提供している配信レートにIBさんが希望する追加スプレッドを付与することを言います。つまり、ブローカーは、ブローカーのオリジナルのスプレッド（BidとAskの差）にIBさんが希望するスプレッド分を上乗せして、そのIBさんが集客したお客様に対して、上乗せされたスプレッドの配信レートを提供します。 お客様からすると、スプレッドが拡がるわけですから、その分トレードコストがアップしてしまいます。では、なぜこのようなことをするのでしょうか？ マークアップするIBさんのほとんどが、お客様に対して、EA（自動売買ソフト）を無償提供…
Webページを作るために開発された特別な言語がHTML(HyperText Markup Languageハイパーテキスト・マークアップランゲッジのイニシャルを取ったもの)です。 HTMLには、ハイパーリンクを通じて別々のウェブページを行き来できるという特徴があります。 Webページは様々な要素で構成されています。例えば、見出し、箇条書きリスト、段落、リンク、画像などです。テキストにHTMLのタグで目印をつけることで、コンピューターに「ここからここまでが〇〇という要素です」という情報をつたえることが出来ます。マークアップしておくと ブラウザ側でそれぞれの要素がどこにあるのかを読み取り、見出しは…
flexコンテナの子要素の高さをそろえることはcssのflexレイアウトでデフォルトで可能すが、テキストエリアなどの孫要素の高さは対応をしなければ以下の様にバラバラになってしまいます。 .flex-card_bara .flex-img .flex-text texttext .flex-btn .flex-card_bara .flex-img .flex-text texttexttext .flex-btn .flex-card_bara .flex-img .flex-text text .flex-btn height.jsなどjsを使用することで対応できますが動作が重くなりパフォー…
SVGモーフィングとはベクターデータで作成された複数の図形を流動的に変化させるアニメーションです。 webデザインで使用すると背景アニメーションやローディングアニメーション、内容強調などで効果的に表現できます。 しかも実装はcssやjsを使用せずタグ内でアニメーションの設定をするだけです。 アニメーションするSVG画像を作成するSVGを動かしてみるサンプル アニメーションするSVG画像を作成する まずアニメーションするベクターデータを作成します。今回はわかりやすくSVG1とSVG2として流体シェイプ を2種類作って2点間をモーフィングさせます。 ※流体シェイプはillustratorで正円のア…
こんにちは、こんにちは。フロントエンドとWebの可能性を信じる@yamanokuです。 最近気になっている W3C Working Draft はCSS Nesting Moduleです。*1 現在クラウドワークスのプロダクトで導入されているフロントエンドのlintツールはeslint、stylelintで、これらの規約に違反しているコードはCIによるチェックを通じて指摘されるようになってます。 今回このlintツールの中に新たに「markuplint」を追加した話をしようと思います。 *1:継続的ドキュメンテーション: Github DiscussionsとADRのすすめ - LIFULL …
CSSで文字の上に強調のドットを付与したかったので、それを設定した時のメモ。 ゴール 特定の文字の上にのみドットを付与して強調する 文言はiZooのテーマソングから。 環境 Windows Chrome iPhone Chrome 対応 次のCSSを設定すると、文字の上にドットを付与できます。 padding-top: .7em; // 文字とドットの距離 background-position: top left -2px; // ドットの位置微調整 background-repeat: repeat-x; // ドットをどの方向に設定するか background-size: 1em 1em…
よく使うけど、毎回忘れるので。 環境 Chrome ゴール 表示領域を超えていれば文言を省略する 1行 複数行 アイコン + 文言の表示領域でも正しく省略する 1行で表示領域を超えていれば文言を省略する <div style="width:150px;border: 10px solid red"> <div class="wrap-text"> ルイズ・フランソワーズ・ル・ブラン・ド・ラ・ヴァリエール </div> </div> .wrap-text{ white-space: nowrap; // 折り返さないようにする(1行にする) overflow: hidden; // 表示領域を超…
ヘッダ画像等をスマートフォン、タブレット、PC等で表示分けをしたい、というユースケースで使える技。 環境 HTML 対応 sourceタグのmedia属性に目的の端末のウィンドウサイズを指定することで、端末ごとに画像を表示分けできます。 詳しいことは、MDN Web Docsに記載されていますので、そちらを参考にした方が詳しく勉強できます。 <picture> <source srcset="スマートフォン用画像" media="(max-width: 800px)"> <source srcset="タブレット用画像" media="(min-width: 801px) and (max-w…
Bootstrapのバージョンによって、記述に若干の差異がある。 多分()は古いバージョンと思われる。 上側のマージン .mt-0 右側のマージン .me-0(mr) 下側のマージン .mb-0 左側のマージン .ms-0(ml) 左右のマージン .mx-0 上下のマージン .my-0 全方向のマージン .m-0 r,l：right,leftなら覚えやすいが、今は変わってしまった模様。 e,s：end(右),start(左)らしい
こちらの記事は、JR九州管内の駅に設置されている自動券売機について私自身が訪問したり、SNSユーザーの皆さまからハッシュタグ付きでいただいたりした情報を、路線ごとにまとめています。 下記のもくじより、確認したい路線の項目までジャンプすることができますのでぜひご活用ください。もくじ 更新情報(過去3ヶ月分) 2024年12月 2024年11月 2024年10月 2024年9月 閲覧上の注意点 お知らせ 券売機駅別まとめ記事のリニューアルを延期します そのほかのお知らせ 情報提供に関する注意点 ☆NEW!☆執筆者が最近訪問した駅 ☆NEW!☆券売機新情報 ◎ICカードに対応したULCV券売機が設置…
HTMLの歴史を徹底解説！ウェブの基盤が築かれた軌跡 この記事でわかること HTMLの基本概要 HTMLの誕生と初期の開発 HTML4とウェブ標準の確立 XHTMLへの移行と課題 HTML5の登場と新機能 HTMLの進化と現代のウェブ HTMLの将来展望 まとめ：HTMLがもたらしたウェブの未来 現代のインターネット社会において、HTML（HyperText Markup Language）は、ウェブページの基盤となる重要な技術です。 ウェブサイトやアプリケーションの構築に欠かせないこの言語は、どのような経緯で発展してきたのでしょうか。 本記事では、HTMLの歴史を通じて、その進化とウェブの発…
概要 年の瀬なのでなんとなく2024年をふりかえってみます。 大きな変化 お手伝いをした個人開発のサービスがリリースした お仕事としてフロントエンドの開発に携わった GASの積極使用 アドカレでたくさん記事投稿 久々に社外の勉強会に参加 ＋ LT発表 子犬を飼い始めた iPhone12からiPhone16 Plusに買い替えた ベースの練習を学生のころぶりに再開 2024年はどんな年だったかまとめ 一言で表すと「気づき」が多い年でした。 「こうやって関係性を深めればいいんだ〜」とか「最初が一番しんどいだけで継続努力は思ったよりすぐに結果がついてくる。とりあえず転がし始めちゃえばこっちのもの」と…
結論 ※Tailwind CSSの場合 親要素に「relative」、子要素に「absolute inset-0」 で親要素全体にフィットした形のリンクになります。 (通常のCSSの場合、親要素「position: relative」、子要素「position: absolute; inset: 0px;」) Next.jsの例 以下は、子要素のLinkタグを親要素いっぱいに広げて要素全体をリンクにするマークアップ例です。 <div className="grid sm:grid-cols-2 gap-10"> { posts.map((post) => ( {/* 親要素「relative」…
DBテーブルカラム削除に関する注意点 NanoKVMによる完全リモートPC構築レビュー ソフトウェア設計書『Tidy First?』書評 エンジニア向け生産性向上チートシート集 DMM Bitcoinビットコイン不正流出事件 Rustによる業務システム開発の落とし穴と対策 JALシステムへのサイバー攻撃と運航への影響 三菱UFJ銀行ネットバンキングシステム障害 エンジニアの事業理解の必要性に関する考察 BS/CS 2K放送へのHEVC圧縮導入に関する改正案 ASUS PCのクリスマス表示に関する話題 シェルスクリプト終了処理の確実な実行方法 はてブとBlueskyのコメントを閲覧できるChro…
今日は modular GC のビルドプロセスまわりの修正などがありました。 [99d5e6ab7a] Nobuyoshi Nakada 2024-12-19 16:09:15 UTC rubyspec で拡張ライブラリ win32ole のテストで deprecated になった定数の参照で出る警告を抑制するための $VERBOSE の一時的設定をしています。 [626037e143] Nobuyoshi Nakada 2024-09-30 02:24:22 UTC Modular GC による GC 実装の共有ライブラリ化と LOAD_RELATIVE の有効化を同時にした時の GC 実装…
「HTML|入門ガイド」では、ウェブページ制作の基礎であるHTMLを包括的に学ぶことを目指します。 まず、HTMLの定義、歴史、重要性について説明します。次に、チュートリアルを通じて基本的なタグや属性を学び、重要なポイントを整理します。また、効果的な学習方法や公式ドキュメントの紹介、チートシートを活用した効率的なコーディングも提案します。 さらに、HTMLとCSSやJavaScriptの連携についても触れ、ウェブページにスタイルや動きを加える方法を学びます。最後に、次のステップとしてさらなるスキルアップへの道筋を示します。このガイドを通じて、HTMLの基礎を身につけましょう。 HTMLの基本概…
このエントリは、SmartHR Advent Calendar 2024 シリーズ1の20日目の記事です。 こんにちは、SmartHR の @chanMisa です。 今年も SmartHR UI の振り返りの時期がやってきました。SmartHR UI は OSS として公開されているコンポーネントライブラリで、主に社内のコアメンバーによって運営されています。今まで SmartHR UI がどのように成長してきたか毎年振り返りをしています。 SmartHR UIの現在地 ~2023年12月編~ プロダクト体験の「インフラ」となったUIコンポーネントSmartHR UIの現在とこれから 「プロダ…
HTMLは、ウェブページの構造を定義するための基本的なマークアップ言語であり、その理解は現代のウェブ開発において不可欠です。本記事では、HTMLに関する公式ドキュメントとリファレンスを紹介し、各要素や属性の詳細な解説を通じて、開発者がHTMLを効果的に活用できるための情報を提供することを目的とします。これにより、ウェブサイトの設計や実装における知識の深化を図ります。 公式ドキュメント WHATWG HTML Living Standard リファレンス MDN Web Docs その他の参考サイト とほほのHTML入門 W3Schools まとめ その他の記事 公式ドキュメント 公式ドキュメン…
こちらの記事は カケハシ Advent Calendar 2024 の 20日目の記事になります。 adventar.org こんにちは、カケハシのAI在庫管理チームでフロントエンドエンジニアをしている Nokogiri です。 AI在庫では薬局で利用する伝票のPDFをフロントエンドで出力していたのですが、バックエンドに移行しました。今回はその背景や取り組み内容について紹介します。 はじめに:なぜフロントエンドからバックエンドへPDF生成を移行するのか PDFをフロントエンドで出力するといくつかの問題があります。 サービスとしてユーザーに発行したPDFを保存しているべきだがフロントエンドでPD…
この記事は JMDC Advent Calendar 2024 20日目の記事です。 qiita.com まえがき プロダクト開発部に所属する八杉です。フロントエンドのイネイブリングチームとして社内のさまざまなプロダクトのフロントエンド開発をサポートする仕事をしています。今年取り組んだ仕事の中から、この記事では <dialog> 要素を React のプロダクトに取り入れた話を紹介します。実装の要点や <dialog> を利用する上での注意点を解説していますので、参考にしていただけたら幸いです。ただし、あくまで 2024 年現在の情報に基づいた内容になっていますから、その点はご留意ください。 …
事件の概要と最新状況 逮捕までの経緯と新事実 地域の不安と市の対応 子どもたちを守るために必要な対策 専門家が指摘する危険のサイン 具体的な防犯対策のポイント 保護者ができる具体的な安全対策 子どもと一緒に確認したい防犯ルール 心のケアと相談窓口の活用法 まとめ：安全な地域づくりに向けて 「もう同じようなことが起きないでほしい」北九州市で起きた中学生殺傷事件。1歳の子を持つ母親のこの言葉に、多くの人が共感しているのではないでしょうか。 北九州市で起きた中学生殺傷事件 12月14日、塾帰りの中学生が被害に遭ったこの事件。私たちができる対策とは何なのか、地域の声と具体的な防犯対策をまとめました。 …
HTMLを効果的に学ぶための重要なポイントをご紹介します。HTMLの基礎を押さえるには、主に以下の点に注目しながら学習を進めることが大切です。 タグの理解 属性と値の理解 セマンティックHTMLを意識する 実践的な学習 トライアンドエラー まとめ その他の記事 タグの理解 HTMLの基本はタグです。タグはウェブページの構造を定義し、ブラウザがコンテンツをどのように表示するかを指示します。タグを使いこなすことで、基本的なウェブページを構築できるようになります。 属性と値の理解 HTMLタグには属性を追加することで、要素の特性や動作を指定できます。属性は通常、タグの開始部分に記述され、名前と値のペ…
今日は主に ARM64 Windows 版のビルドのサポートや NEWS の default gems や bundled gems の前回リリース以降の gem のバージョンのリストアップなどがありました。 [36c36d0486] Nobuyoshi Nakada 2024-11-13 05:44:56 UTC Windows 版の win32/Makefile.sub で arm64 アーキテクチャを許容するようにしています。 [5a7a1a4a13] Nobuyoshi Nakada 2024-11-13 05:45:49 UTC rbimpl_size_mul_overflow() …
ねこざわと申します。 この度「英物アドベントカレンダーを作ろう」企画に参加させて頂くことになりました。 どうぞよろしくお願い申し上げます。 が、いかんせん文章を書くのがアレですので、代わりにクリスマス仕様のゆるイラストを数点ご用意致しました！ DLして個人利用の範囲でご自由にお使い下さいませ。 ①A4サイズ（jpg） A4サイズで作成しています。インクジェット用シール用紙などにプリントアウトすればシールとしてもご利用頂けます。（発色がブラウザと多少異なります） ②1000pxサイズ（png） pngデータで作成していますので、デジタルステッカーとしてご利用頂けます。（まれにキャラの白色の部分も…
