マークアップのわかり方
この記事は、2022年10月28日に開催されたDIST.37「マークアップな夜」での発表「マークアップのわかり方」をもとにしたものです。当日は話せなかった内容も大幅に追加しています。 現代における「マークアップ」とはどのような行為なのか。いかにそれと向き合っていけばいいのか。そういったことについて考えてみます。 マークアップの議論においては、「マークアップには正解がない」という意見が決まって出ます。正解がないと言うならば、たいていなんであってもそうです。たとえばCSSやJavaScriptの書き方には「正解」があるのかと考えてみると、必ずしもそうではありません。 しかし、ことさらマークアップにおいてこれがよく言われる理由としては、妥当性を判断する基準がわからない、ということでしょう。 というのも、CSSなら望む通りの見た目になればとりあえずOKだし、JavaScriptでも意図した通りの振
【HTML5】マリオのコインの音をブラウザで出そう【ファミコン】 - Qiita
で、上記の通り「矩形波、三角波」って見たらアラフォー以上の人は「ファミコンじゃん」ってなったり、むしろ、コナミ矩形波倶楽部を思い出す方も多いかもしれません。 技術的なこと まぁ、ソースを見て貰えば特に難しいことはしていない（いつものように殴り書きだし…）のでコインであれば「♪シミー」という音を鳴らせばできるわけです。 const AudioContext = window.AudioContext || window.webkitAudioContext const audioContext = new AudioContext() const gainNode = audioContext.createGain() gainNode.connect(audioContext.destination) gainNode.gain.value = 0.1 const oscillator =
日本語対応！CSS Flexboxのチートシートを作ったので配布します | Webクリエイターボックス
2021年12月18日 CSS, ダウンロード FlexboxとはFlexible Box Layout Moduleのことで、その名の通りフレキシブルで簡単にレイアウトが組めちゃう素敵ボックスです。現在ほとんどすべての最新ブラウザーでFlexboxをサポートしており、Flexboxを使ったレイアウト組みが今後のWebデザインのスタンダードとなるでしょう。Webクリエイターボックスでは以前からFlexboxの使い方について紹介してきたのですが、最近Flexboxが浸透してきたこともあってか各プロパティの使い方について質問される機会が増えてきたので、チートシートとしてまとめてみました。この記事ではなるべく画像メインでプロパティーの使い方を紹介したいと思います！ ↑私が10年以上利用している会計ソフト！ 動画で学ぶCSS Flexbox この記事はYouTube動画でも解説しています。動画派の
HTMLテーブルのヘッダを「行列固定」する方法（FixedMidashi）
業務系のシステムでは、扱っているデータが多いため、一覧表が巨大になることがよくあります。WEBベースで開発している場合は、一覧表をHTMLテーブルで作ることが多いかと思いますが、表が巨大だと上下左右にぐりぐりスクロールして閲覧することになり、行や列のヘッダ(見出し)が見えなくなってしまいます。エクセルのウインドウ枠(行列)の固定のように出来ればいいのですが、HTMLではこれが簡単にはできません。そこで今回は、HTMLテーブルのヘッダを行列固定する方法を調べてみました。 jQueryプラグインやCSSでの実装、自前でテーブルを分割して擬似的に行列固定など、色々試してみましたが、巨大な表ではなかなかうまくいかず、最終的に行き着いたのは FixedMidashi でした。現時点(2016年3月17日)でおそらく最強の HTMLテーブルヘッダ固定ツールです。 FixedMidash のサンプル F
簡単にガントチャートとかクラス図とか書けるやつ - Qiita
mermaidは、Web上で簡単にフローチャートやシーケンス図などのUMLが描けるライブラリです。 d3.jsの機能特化型というかんじで、d3ほど様々なことはできませんが、そのかわりに対応してる図形なら非常に簡単に描くことが可能です。 なお、ヘルプはGitGraphやクラス図が載ってないなど未完成で、いまいち頼れません。 ごたくはいい、実物を見せろ こんなかんじ →支払い忘れてサーバが死んだので代替(誰かが書いたやつに勝手にリンク) できること 以下の図が描ける。 ・フローチャート ・シーケンス図 ・ガントチャート ・クラス図 ・gitグラフ 最後だけ異質だ。 インストール CDNを使えばいいだけだが、自分のところに置きたい場合はyarnで引っ張ってこれる。 <!DOCTYPE html> <html lang="ja"> <head> <link rel="stylesheet" hre
target="_blank" のセキュリティリスク(デモ動画あり)
HTMLを勉強する際に最初に覚えるものの1つにa要素(タグ)があります。HTMLのアイデンティティと言っても過言ではない、ハイパーリンクを実現する大事な要素です。 href属性に設定されたリンク先のURLをどのウィンドウ等に表示するかを決めるtarget属性というものがあります。任意の値を設定してウィンドウに名前を付ける事で、複数のa要素から同じウィンドウへリンク先URLを表示する事もできますし、常に新しいウィンドウを開く_blankのような、あらかじめ挙動が設定されている値もあります。 target="_blank" のセキュリティリスク リンクの開き方を決定するtarget要素ですが、この挙動を利用してリンク先からリンク元のウィンドウを操作できるというセキュリティリスクが公開されています。 Target="_blank" - the most underestimated vulner
PHPでPDFを作成するときはphpwkhtmltopdfで戦え [2016年度版] - Qiita
PDFは相変わらずつらい ブラウザの印刷機能にPDF変換が実装されて久しい、西暦2016年。 今もまだ色々なしがらみに押し負けたPHPerたちの不毛な戦いは続いています。 もう年の瀬ですが来年もPDFと戦っていくための情報をお届けします。 wkhtmltopdfとphpwkhtmltopdfで幸せになろう http://wkhtmltopdf.org/ HTMLをWebkitで解釈してPDFに変換するGoogle謹製のツールです。 HTML5 も CSS3 も難なく解釈します。 2016年12月の時点での最新バージョンは0.12.4です。 mikehaertl/phpwkhtmltopdf https://packagist.org/packages/mikehaertl/phpwkhtmltopdf wkhtmltopdfをPHPで扱うためのラッパークラスです。 packagistで配布
![PHPでPDFを作成するときはphpwkhtmltopdfで戦え [2016年度版] - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/8eb9e05757cc26f1c8d1e58475d95a9406175331/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9UEhQJUUzJTgxJUE3UERGJUUzJTgyJTkyJUU0JUJEJTlDJUU2JTg4JTkwJUUzJTgxJTk5JUUzJTgyJThCJUUzJTgxJUE4JUUzJTgxJThEJUUzJTgxJUFGcGhwd2todG1sdG9wZGYlRTMlODElQTclRTYlODglQTYlRTMlODElODglMjAlNUIyMDE2JUU1JUI5JUI0JUU1JUJBJUE2JUU3JTg5JTg4JTVEJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmcz1kMzUwNjRkYWMzNjkxZTRjNGVlYmRiZDhhMDVmZWYzMQ%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBtb3Jpc3VrZSZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9OWMyOWVjM2NkYzIzMmU5NzVhMzFmZmQxMGU3MzAwNzY%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3D93a227fa567a24e54f5a21c5cbbe17f9)
【HTML】入力欄が1つだけのフォームはEnterキー押下でsubmitされる。submitボタンがなくても。 at softelメモ
【HTML】入力欄が1つだけのフォームはEnterキー押下でsubmitされる。submitボタンがなくても。 問題 フォームがEnterキー押下でsubmitしてくれたり、くれなかったりするのですが、何かルールがあるのですか。 特に、サブミットボタンがないフォームについて。 特に、入力欄が1つのときと、2つのときの違いについて。 例1 form内にinput[type=”text”]が1つだけ <form method="post" action="?"> <input type="text" name="test"> </form> Enter押下でSubmitします（だいたいのブラウザで） 例2 form内にinput[type=”text”]が2つある <form method="post" action="?"> <input type="text" name="test"> <
30分で出来る、JavaScript (Electron) でデスクトップアプリを作って配布するまで - Qiita
概要 Electronとは、JavaScriptでデスクトップアプリケーションが作成できるツールです。 MITライセンスなので無料で使える上に商用利用も可能です。 最近ではAtomやSlackのアプリもElectronで作られたとのこと。 今かなりノっているツールの1つです。 以下、簡単な特徴。 Node.js + HTML + CSS という、WEBの技術でアプリが作れる。 Chromiumブラウザ(Chromeのオープンソース版)を内蔵しているので、普段の書き味と変わらない これ1つで Windows, Mac, Linux 向けのアプリが作れる 超簡単 ここではElectronのインストールからアプリの配布までを紹介します。 以下、「Hello World」を出すだけのアプリですが、ゼロからはじめて30分でここまで出来ます。 インストール まずは必要なものをインストール。 nodeの
Webデザインの勉強を始める人が幸せになれるツール＆サービス
2015年7月7日 便利ツール 先日超初心者さん向けにHTML・CSSを使ってWebページを作る講座を開いたのですが、予想通りやはり「これから勉強したい！」という人は、何から勉強すればいいのかがわからない事が多いです。また情報が多すぎて必要なツールもどれを選んだらいいかわからないケースもよく耳にします。そこで今回はその時教えたツールやサービスを中心に「これだけはそろえておこう！」というものを紹介します。あまりたくさん挙げても使い切れないかなーと思ったので、かなり絞っています。まずはこれらをとっかかりにし、自分好みのものを探していってくださいね！ ↑私が10年以上利用している会計ソフト！ 環境を整えよう まずはWebサイト制作をするための環境を整えましょう。 テキストエディター テキストエディターは、HTMLやCSSなどを使ってWebページを作成する際に使うツールです。Windowsに最初か
Web作成の定形作業を自動化できるJavaScriptタスク実行環境Grunt
はじめに HTML／JavaScript開発に限らず、一般にプログラミングの作業ではコンパイルや自動テスト、デプロイなど、開発の本質にあまり関係のない定形作業が発生します。これらの定形作業を自動化できれば、プログラマは処理内容の検討やコーディングなどの本質的な作業に集中でき、作業効率のアップが期待できます。また定形作業を手動で行うことによるケアレスミスの低減も期待できます。 プログラムのビルドに使われるMakeやJava環境で利用されるAntのように、定形作業を自動化するツールは様々な開発言語や環境で提供されています。本記事ではタスクをJavaScriptで記述するタスク実行環境Gruntを紹介します。Gruntを使うとHTML／JavaScript開発で必要となる、以下のような定形作業を自動化できます。 ファイル操作（移動、コピー、削除、名称変更、結合） ネットワーク通信（FTP、SSH
IE=edgeが効かない場合の対処法 | USEFuL NOTES
ウェブサイトを運営するものにとって、Internet Explorerの動作保証は大きな課題。複数のver、そして互換モードの存在により検証も一苦労です。特にHTML 5、CSS3、最新のスクリプトで組み上げたページはver.によって再現しなかったり、表示崩れが起きたり運用者をひやひやさせます。 そこで普及してきたのがIE8以降のverでレンダリングモードを指定するmeta要素の記述。このmetaの中で最新のレンダリングモードを指定するようにしておけば、互換表示モードに設定していてもmetaの記述を優先してレンダリングされるので、IE7を意識して作る必要がありません。 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> この記述を入れると、IEで閲覧時にGoogle Chrome Frameで表示し、Google
DEFGHI1977のWEB技術まとめ・ツール等
written by DEFGHI1977 [重要] auonenetホームページ公開代理サービス終了に伴い、公開済みの各種ドキュメントをxdomainサーバーに移行しました. 旧アドレスへのアクセスは本ページにリダイレクトされます. お手数ですがブックマークやリンクなどのURL参照先の更新・変更をお願いいたします. You were redirected from old "dion(auonenet)" page which had been out of service. Please update URL settings of your bookmarks, links or more. Thank you. 突貫工事で作ったため, 抜けがあるかもしれません. ゲームツール等(game tools) 悪魔城ドラキュラHoD(Castlevania HoD)・アイテム早見表(Cas
JavaScript フレームワーク - ペパボテックブログ
フロントエンド周りの技術は驚異的なスピードで進化し、また多様化しています。それらを全てマスターするのは途方もなく大変なので、ペパボでは、社内のエンジニア・デザイナが「最低限これだけはおさえておこう」というスタンダードを文書化することにいたしました。社内向けを想定した文書ではありますが、社内のみに留めず多くの方に役立てたいと考えたため公開します。 この項目の担当 @hadashiA どうしてフレームワークを使う？ (1) ドメインロジックとプレゼンテーションの分離 (2) SPA（シングルページアプリケーション） 流行り廃り (1) MVC (2) MVVM (3) Virtual DOM どれを使う？ どうしてフレームワークを使う？ (1) ドメインロジックとプレゼンテーションの分離 まずこちらの画面を見てください。 ©任天堂 スーパーマリオワールド スーパーマリオが右にダッシュすると、マ
Webディレクターも知っておきたいデジタルサイネージ
デジタルサイネージとは、大型のディスプレイに映像や画像などのさまざまなデジタルコンテンツを表示した電子看板のこと。ディスプレイごと、あるいは時間帯によって表示する内容を変えられるのが特徴で、交通広告のデジタルポスターや、商業施設の広告・案内メディアとして設置数が増えています。設置場所や用途はバラエティに富んでいますが、基本的なシステム構成とデータの作成方法はほぼ同様です。 デジタルサイネージの基本構成と利用法 デジタルサイネージのシステムは、メーカーに関わらず、コンテンツを表示する大型ディスプレイ（プラズマディスプレイパネル／液晶ディスプレイ）、コンテンツを再生するセットトップボックス（STB）、STB用のプレーヤーソフト、コンテンツの配信を管理するサーバーソフト（サイネージシステム）によって構成されています。管理者は、サイネージシステムにコンテンツを登録し、再生スケジュールを作成します。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML to JSX
無料コーディング練習所 | 未経験からWebデザイナーへ！【2024年版】
GitHub - thephpleague/html-to-markdown: Convert HTML to Markdown with PHP
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
http://blog.1000k.net/2015/01/16/close-popup-window-on-chrome/