プレーンテキストにタグをつけて、機械（コンピュータ）にも情報を理解出来るようにすること。変な形の場合は、「不思議マークアップ」と呼ばれる（ことがある）。
こんにちは、こんにちは。フロントエンドと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(左)らしい
上下位置が動かない件 原因 要素の縦タイズを指定していなかった。 気づけば当たり前の話、要素のサイズが指定されていなければ、要素内の位置も指定できない。 <div class="vh-100 d-flex align-items-center">...</div> 気づかなかった原因 divで囲うと要素の横のサイズは横一杯になるため、横はサイズ指定をしなくても位置指定が適応されていた。
上下位置が動かない…… どこのサイトを見ても、下記の記述なのに、自分の環境では上下に動いてくれない。何故だ…… <div class="d-flex align-items-center">...</div>
HTMLの区切りタグを復習したのでアウトプットをしていきます。 HTMLの区切りを表すタグの種類 header: 導入的なコンテンツ fotter: コンテンツの締めくくりとして使われる。著作権情報などが入る nav: ページ内のナビゲーションに使われる。メニューのリンクなど asaide: 本文とは関連性が薄いコンテンツに使われる article: 記事や独立したコンテンツに使われる main: 本文の主要なコンテンツを使う処理 section: 汎用的に使えるタグ 人によって文書の解釈方法は色々なので、人によってマークアップした結果が違うことも...。 迷ったらHTML: HyperTex…
今日は拡張ライブラリ date の Time と DateTime の変換時の暦の考慮の修正や拡張ライブラリ psych と rurbygems/bundler の更新などがありました。 [289d219758] Nobuyoshi Nakada 2022-08-08 12:13:52 UTC doc/date/calendars.rdoc のグレゴリオ歴とユリウス歴の間の変換についてのドキュメント修正。 [1cb77f2304] Jean Boussier 2022-08-08 09:14:05 UTC IO::Buffer についてのベンチマークのメソッド名の変更追随と prelude を…
ＢＢ戦士No.231の「ザクⅡ Ｓ型」を作りました。 製品名には「Ｓ型」としか書いていませんが、いわゆるシャア専用ザクです。 基本的には前に作った「BB戦士No.218 ザクⅡ Ｆ型」の成型色違いで、さらに指揮官機のツノと武器が追加されています。 目次 キット・キャラクター概要 パッケージ・ランナー等 『ザクⅡ Ｓ型（シャア専用）』 写真 キット・キャラクター概要 【基本情報】 名前 ：ザクⅡ Ｓ型 ＢＢ戦士番号：２３１ 登場作品 ：機動戦士ガンダム 型式番号 ：MS-06S ジオン公国軍の傑作量産型ＭＳであるザクⅡ Ｆ型の性能を総合的に向上させた機体。主に指揮官向けに配備された。本機は赤く塗…
今日は主に rdoc の Markdown 記法の footnotes の記法の変更やドキュメントの修正がありました。 [23a84d53c6] Burdette Lamar 2022-08-07 12:07:12 UTC lib/rdoc/markup.rb から doc/rdoc/markup_reference.rb に rdoc のドキュメント記述のマークアップについての記述を移動しています。また古い記述を削っているみたいです。 [5beb75ce8d] Nobuyoshi Nakada 2022-08-07 15:32:37 UTC rdoc の Markdown 記法で footn…
ＢＢ戦士No.218の「ザクⅡ Ｆ型」を作りました。 目次 キット・キャラクター概要 パッケージ・ランナー等 『ザクⅡ Ｆ型』 写真 キット・キャラクター概要 【基本情報】 名前 ：ザクⅡ Ｆ型 ＢＢ戦士番号：２１８ 登場作品 ：機動戦士ガンダム 型式番号 ：MS-06F ジオン公国軍の傑作量産型ＭＳ。一年戦争前半・中盤におけるジオン軍の主力ＭＳであり、様々なバリエーション機・専用機・発展期を生んだ名機。 パッケージ・ランナー等パッケージアート。 ジージェネＦのロゴも書かれています。 正面から。 スペースコロニーの上を思わせるボックスアート。コロニー落そうとしてる？ 横から。 説明書。 ランナ…
皆さん、こんにちは！ ソリューションコンサルタントの滝元です！ 本記事では、インフラジスティックスが提供していますローコードツール App Builder についてご紹介します。 どういうツールなのか、どういう人におすすめか、どういう場面で使うと最大限の効果を発揮できるのか、など解説していきます。
エビスコムさんの「作って学ぶ Next.js/React Web サイト構築」を購入して、7章の途中まで読んだので感想など。 物理本きた pic.twitter.com/MpPLallWA7 — わみ🕊 (@nishirohatoo) 2022年8月3日 参考までに私の技術レベルは以下のとおり。 コーダー/マークアップエンジニア3年目。JavaScriptとアクセシビリティまわり勉強中。 Reactの本を一冊やって簡単なアプリを制作したものの、Hooksまわりなどはまだ習得できていない Next.jsでマークアップとスタイル追加ができる(現在の仕事では全くReactもNext.jsも使っていな…
2021年度にTwitterで発信した６年生の小学校外国語科の実践をまとめました。 教科書NEW HORIZON Elementary6 UNIT4～UNIT6の内容に沿ってまとめています。 しかし、ここで紹介しているやり方が最善というわけではありませんし、ツイートしているのは単元デザインのほんの一部の要素でしかありません。 授業を考えるちょっとしたきっかけになればと思います。 Unit4 "My Summer Vacation" 導入：Teacher's Talk 活動：空想英作文（Jamboard） 単元末の言語活動：絵日記風スライド Unit5 "We all live on the e…
こんにちは！ フリーランスで webページ作成をしている マサキです！ 最近、 「プログラミングを始めたいけど、 種類が多すぎてどうすればいいの？」 と思ったことはありませんか？ しかし、すべて習得に 時間がかかるわけではありません！ 選ぶ言語によっては、 より簡単に、より早く プログラミングできるようになります！ ということで今回は、 プログラムの中で おすすめの言語と 勉強の仕方を説明していきます！ プログラムには２種類あります。 「プログラミング言語」と、 「マークアップ言語」です！ 誤解を恐れずに簡単に言うと、 プログラミング言語は 「パソコンを動かせるけど、 数学などの深い知識が必要…
こんにちは！きくのすけ（Kikunosuke）です！ 今回は 「ブロガー初心者向けのブログ用語集（記事作成編）」 という内容で記事をお届けします。 ブログを書き始めた皆様、 ブログを始めてから知らない単語が出てきているのではないでしょうか⁉ 「HTML」 「メタディスクリプション」 等々、私自身、はてなブログを2022年2月から始めましたが、 ブログを始めてから、初めて目にする単語が多すぎて、 調べたり内容を理解したりすることが大変でした。 また「同じくブログを始めた人で単語調べる人がいるだろうな」と思いましたが、 意外とブログに関する用語をまとめたサイトが少ないことに気が付きました。 そこで…
書誌事項 人文学のためのテキストデータ構築入門 : TEIガイドラインに準拠した取り組みにむけて / 人文情報学研究所監修, 石田友梨, 大向一輝, 小風綾乃, 永崎研宣, 宮川創, 渡邉要一郞編 東京 : 文学通信, 2022.07 [424]p ; 26cm ISBN: 9784909658845 解題 人文学研究におけるテキストデータの効果的な蓄積・共有・継承のための、TEI（Text Encoding Initiative）ガイドラインによるテキストデータ構築の入門書。日本語文化圏初のハンドブック。TEIガイドラインを詳しく知るための概説編、実際にテキストデータ構築をおこなうための実践…
.NET 6 がリリースされ、Blazor がC#の開発者にシングルページアプリケーションを書くためのWebフレームワークとして注目される中、"Blazor と Razor の違いは何か ？"という疑問が出てきました。 Blazor と Razor は直接比較できるものではありませんが、Blazor コンポーネントと Razor コンポーネントという用語が広く使われています。 この記事では、Blazor と Razor の違いを明確にするとともに、Ignite UI for Blazorでそれぞれをどのように使うかを紹介します。 また、Ignite UI の Card View コンポーネント…
こちらの記事では、JR九州管内の駅に設置されている自動券売機について私自身が訪問したり、SNSユーザーの皆様からハッシュタグ付きでいただいたりした情報を、路線ごとにまとめています。 下記のもくじより、確認したい路線の項目までジャンプすることができますのでぜひご活用ください。もくじ 更新情報(過去3ヶ月分) 2022年8月 2022年7月 2022年6月 2022年5月 閲覧上の注意点 お知らせ 記事に掲載する内容を大幅追加予定！ そのほかのお知らせ 情報提供に関する注意点 執筆者が最近訪問した駅 券売機新情報 ☆NEW!☆訪問予定駅 ☆NEW!☆情報募集駅 券売機 福岡県 佐賀県 長崎県 熊本…
商品の売上と利益の管理に関する記述として、最も適切なものはどれか。ただし、仕入れた商品をすべて売り切ることを前提に答えよ。 一定の利益幅を仕入原価に上乗せして販売価格を設定する方法をマークアップ法という。 最初の販売価格で売れ残った商品を当初の値入率より低い値引き率で特売すると粗利益額がマイナスになることがある。 仕入れた商品を販売したときの粗利益額は、仕入時に設定した値入額を上回ることが多い。 値入率が異なる複数商品の販売計画を立てる場合、仕入数量が決まらなくても全体の値入率を計算することができる。 解答・解説 (adsbygoogle = window.adsbygoogle || [])…
SEOより読者の行動（求められている情報を記載する） SEO対策よりも、読んでくださる人の気持ちを大切にした文章を書く（コンテンツを作る）。 試行錯誤しながら継続する ローマは一日にして成らず。 大きな成果を出すには、長い時間がかかる。簡単にラクに達成できる結果だったら、価値がない。継続するためには、自分がすでに知っているジャンルの発信が望ましい。そして、少しずつ習慣化してくためにも毎日1分でいいから、とりあえずやること。そうすれば1分なんて、あっという間に過ぎてるから。 先に結論からシンプルに述べる 読者様の時間を必要以上に消費させることは良くない。いかに短時間で、問題を解決してもらえるか考…
https://bungaku-report.com/blog/2022/07/tei1.html 初めての日本語によるTEIガイドラインの入門書が刊行されました。『人文学のためのテキストデータ構築入門』[1]というタイトルで、株式会社文学通信によるものです。TEI ガイドラインは、人文学のためのテキストデータ構築におけるデファクト標準として国際的に普及しており、とくに欧米先進国ではこれに準拠したテキストデータの膨大な蓄積があるが、日本語文化圏においては諸般の事情により普及が進んでいなかったものです。日本語文化圏でも、TEI ガイドラインに取り組むにあたっては Web に様々な情報が各所に蓄積…
design.kayac.com
www.html5-memo.com
coliss.com
design.kayac.com
atmarkit.itmedia.co.jp
ascii.jp
kachibito.net
ohp.jp
codezine.jp
