いざという時に使える13のHTML&CSS Tips集 | BUILD Journal
いざという時に使える13のHTML&CSS Tips集Update2023.05.12Release2023.04.13Coding HatenaにシェアするTwitterにツイートするPocketにストックするFeedlyに登録する いざという時のために覚えておくと便利なHTML＆CSSのTipsを13個紹介します。何かで困った時に読み返してみてください。何かでお役にたてると思います。 テキストの円形回り込み See the Pen shape-outside by Kobayashi (@Pulp_Kobayashi) on CodePen. 円形の画像の縁に沿ってテキストを回り込ませるCSS Tips。実際には画像の縁を判定して回り込んでいるのではなく、shape-outsideプロパティを使用し、circle(50%)を指定することで、要素の回り込みの形状を円形にしています。 CS
ユーザー操作の一括無効化で役立つ！ HTMLのinert属性の紹介 - ICS MEDIA
HTMLやCSSには、ユーザーインタラクション（ユーザー操作）を無効化するための方法がいくつか存在します。たとえば、マウスやタッチ操作を無効化したいときはCSSでpointer-events: noneを要素に指定するなど、制御したいユーザー操作によってさまざまです。 カルーセルやモーダルなユーザーインターフェイス（UI）では、非アクティブな要素が操作されないように「画面には表示されているが、あらゆるユーザー操作を受け付けない状態」にしたい場合があります。具体的には、以下のユーザー操作を無効化します。 マウスやタッチ操作を無効化したい テキスト選択を無効化したい キーボードフォーカスをあえて無効化したい 音声読み上げをあえて無効化したい 必要なプロパティや属性を複数指定することが考えられますが、そのようなときに役立つのがinertイナートと呼ばれるHTMLのグローバル属性です。 inert
【2023年】Web制作で使えるVSCodeオススメ拡張機能17選！ - PENGIN BLOG
この記事を書いた人 だいちPENGIN BLOGメディア編集長。Web業界とは異業種の仕事をしながら、独学でWeb制作の世界に。副業でHP制作やコーディング代行、個人ブログの運営などに取り組み、現在はPENGINにてWebライティングやディレクションをしつつ、メディア運営全般を担当しています。（個人運営ブログ：https://daib-log.com/ ） 今回はVSCodeで使っている拡張機能を紹介します。 他記事では利用シーンや用途分けがされてないことも多く、とりあえず入れてみたもののどんな機能だったのか忘れた、、、なんてこともよくあると思うので、この記事ではザックリと用途別にカテゴリ分けしています。 基本的には紹介する拡張機能全て入れてしまってもいいとは思うんですが、個人的な優先度を星マークでつけています。導入する順番の参考にしてみてください！
縦書きHTMLにおける文字の向きはどのように定まるか - ドワンゴ教育サービス開発者ブログ
ドワンゴ教育事業Webフロントエンドチームの berlysia です*1。 はじめに この記事では、日本語の縦書きHTMLにおいて、「ある1文字が縦組みのなかで違和感なく縦書きとして表示される」とはどのように成り立っているのか、意図しない表記になりやすい文字とその理由について紹介します。 最後まで読むと、縦書き時の文字の縦横に関する問題をたちどころに分解できるようになるはずです。とりあえずフォントのせいだろうかと疑う日々には、これでおさらばしましょう*2。 はじめに N予備校における日本語縦書きHTML CSS の関連仕様 日本語の一般的な縦書きに設定する うまくいかないことが起こりやすい文字たち うまくいかない文字がうまくいかない理由を理解する 縦書きを考慮した文字の周りの方向の定義 CSS における縦書きでの文字の縦横 upright typesetting sideways type
Webページやアプリの実装に、知っておくと便利なHTMLの属性のまとめ
Webページやアプリの実装に役立つ、知っておくと便利なHTMLの属性を紹介します。すでに使用されているものあると思いますが、いくつはこんな属性もあったのか、と発見があるかもしれません。 24 Lesser-Known HTML Attributes You May Want to Use ✨📚 by Madza (@madzadev) 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 私は少し前に、HTMLのタグについての記事を公開しました。今回はその続編として、知っておくと便利なHTMLの属性を紹介したいと思います。 この記事で紹介する属性はすべて簡単に使用でき、外部ライブラリを使用しなければできないようなタスクを実現するのに役立ちます。 HTMLで特に便利な各属性の使用例と構文を理解しやすいように、コードスニペット
Visual Studio Codeのhtmlフォーマッターのメモ - Qiita
概要 Visual Studio Code(以降VSCodeと記述)のデフォルトのhtmlフォーマッターをカスタマイズしたときのメモです。 VSCodeのhtmlフォーマッターはjs-beautifyというパッケージをベースにしており、拡張機能を追加することなくhtmlファイルのフォーマットを行うことができます。 （なお、Beautifyという拡張機能がありますが、これがインストールされている訳ではないようです。） htmlファイルをフォーマットするには、フォーマットしたい範囲を選択状態にしてCtrl + K Ctrl + Fを押します。 環境 Windows 10 Professional VSCode 1.24.1 参考 HTML programming in VS Code 設定のデフォルト値 Ctrl + ,を押して設定画面を開きます。検索フィールドで"html.format"と入
"HTML5ゲーム重い問題"をいかに解決するか？ CPU負荷を改善する方法
2019年10月9日、『神姫PROJECT』などソーシャルゲームの企画・開発を手がける株式会社テクロスが主催するイベント「TECH x GAME COLLEGE」が開催されました。第27回となる今回のテーマは「HTML5で『重い』問題をクリアしてリッチなゲームを作る」。株式会社ノックノート執行役員の岡山知弘氏が、話題のHTML5ゲームを作るにあたって、いかにJavaScriptでリッチなゲームを作りながら重い問題を解決していくかを語りました。前半パートとなる今回は、負荷改善における前提とCPUの問題についてレクチャーしました。 HTML5で「重い」問題 岡山知弘氏：それでは、30分ほどお時間をみなさんにいただいて、HTML5で重たい問題は、みなさんがHTML5を触られている方であれば、まさに直面しているかなとは思うんですけど、そこで弊社でどういうふうにアプローチしたのかをお伝えさせていただ
ブラウザレンダリングの仕組み - Qiita
概要 webサービスを公開するにあたって必ず使われることになるのがブラウザです。ブラウザがユーザーにwebページを表示する仕組みを理解することで、フロントエンド開発に役立てたり、ページ表示までのレスポンスの改善などに役立てていきたいと思い、今回ブラウザのレンダリングの仕組みの基本事項についてまとめました。 レンダリングの流れ ユーザーがwebブラウザにURLを入力すると、ブラウザはURLを元に指定のサーバーにTCP/IPプロトコルに基づいてリクエストを送ります。その後サーバはクライアントに対してレスポンスします。以降のレスポンスとして受け取るHTML,CSS,Javascriptをどう処理して画面に表示するのかをレンダリングと定義して、その処理の流れについてみていきます。(この工程はcritical rendering pathと呼ばれています) ブラウザがWebページをレンダリングする仕
2023年時点で僕のVSCode(Visual Studio Code）に入ってるプラグインや設定を紹介します - Shibajuku
こんにちは、実は久しぶりの投稿の、どうもしばおです。 さて、僕(フロントエンドよりのWebデザイナー)は普段からメインのテキストエディターにVSCodeを使っているのですが、今日は僕のVSCodeに入っている、プラグインや設定を公開したいと思います。 （2023年7月3日更新） 僕のオンラインサロンでも、VSCodeを結構使ってて、サロンメンバーには、僕が使ってるおすすめのプラグインや、僕なりの最強設定を共有しています。 そもそも、VSCode（Visual Studio Code）って？ VSCode（Visual Studio Code）はMicrosoft社が開発したオープンソースのテキストエディタです。 最近様々な高機能テキストエディタが登場していますが、その中でもこのVS Codeはかなり便利な機能がデフォルトで付いていて、かつ軽量なので、インストールするだけでも結構使えます。
CrossStorage - クロスドメインで使えるlocalStorage
HTML5で追加されたAPIの一つにlocalStorageがあります。特定のサイト内で使える簡易的なストレージですが、一つのサイトでしか使えないのが難点です。時に別なサイトでも使いたいと思うことがあるでしょう（特にサブドメイン）。 そこで使ってみたいのがCrossStorageです。クロスドメインで使えるストレージです。 CrossStorageの使い方 使っているところです。外部ドメインにあるlocalStorageを使えます。 別なドメインからも。 CrossStorageではハブになるドメインが一つ必要です。そこではアクセスできるドメインを指定し、さらにパーミッションを設定できます。そして外部ドメインからはiframeを使ってメッセージを交換する仕組みになっています。原理はシンプルですが面白い仕組みです。 CrossStorageはJavaScript製のオープンソース・ソフトウェ
とあるLPの制作現場 - Qiita
やりたいことはWebpackだけでも実現できますが、今後ページが増えていくことを考えるとgulpを使用したほうがスッキリ書けそうなので、gulpとWebpackを併用しました。最近gulpの名前をめっきり聞かなくなりましたが、元気にしているだろうか。 Webpackとgulpの使い分け、あるいは共存 Webpack webpack is a static module bundler for modern JavaScript applications. https://webpack.js.org/concepts/ 色々なファイルをまとめて、モリモリなJSファイルを出力してくれる。BabelやSassなどのローダーを設定するだけで、いい感じに変換してくれる。プラグインを使えばHTMLやCSSなどのファイル出力もできます。 gulp gulp is a toolkit for autom
中国HTML5ゲームはなぜ巨大市場になったのか -微信小游戏前夜と微信小游戏後-｜Gaoqiao（ガオチャオ）
大家好。Gaoqiao（ガオチャオ）です。 中国では春節の休みが終わったばかりですが、まだまだ正月ムード。なんならクリスマスの飾りもまだ残ったままです。 私はというと春節はずっと中国で過ごしていたものの、遠隔で仕事をしつつ日本で某メーカーと協業で作っていたHTML5ゲームのプラットフォームが先週ローンチして一息ついています。 私の会社では2015年に日本のYahoo!かんたんゲームプラスという広告マネタイズ主体のゲームプラットフォームにHTML5ゲームをリリースして以来、継続的にHTML5ゲームの開発に取り組んでいます。 HTML5ゲームとはどういうものかというと、例えば下記のようなWebブラウザで起動してプレイできるゲームのことです。 ひっぱりマッピー大作戦 - Yahoo!ゲーム http://yahoo-jp.portal.connectedgamestore.com/game?ga
TOAST UI Editor - WYSIWYGとMarkdown両方をサポートしたWebエディタ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 開発者にとってMarkdownは便利な記法ですが、それ以外の人たちにとってはルールを覚えなければならず、面倒に感じられてしまいます。かといってWYSIWYGなツールバーを設けると開発者が邪魔に感じてしまうでしょう。 そこで使ってみたいのがTOAST UI Editorです。MarkdownとWYSIWYGを切り替えられるエディタです。 TOAST UI Editorの使い方 エディタです。上部にツールバーがついています。 日本語も問題なく入力できます。 テーブルをセル数をグラフィカルに決められるのは便利です。 Markdownの表示に切り替えることもできます。 プレビューの表示もできます。 反映はリアルタイムに行われます。 機能拡張によってグラフを追加したりできます。 TOAST
WebAssemblyの基礎から最新動向まで、@chikoskiに聞いてきた！
WebAssemblyの基礎から最新動向まで、@chikoskiに聞いてきた！ 白石 俊平（HTML5 Experts.jp編集長） こんにちは、編集長の白石です。 この記事は、9月24日に開催されたHTML5 Conference 2017に登壇したエキスパートに、お話されたセッションのトピックを中心に、様々なお話を伺おうというものです。セッションの内容をより深く理解する手助けになるだけでなく、本記事単体でも面白く読んでいただけることを目指しています。 今回お話を伺ったのは、WebAssemblyコミュニティを率いてらっしゃる清水 智公さん（@chikoski）です。清水さんのセッションは「WebAssembly MVPまとめと、今の議論の内容からいくつか」でした。 ※スライド資料はこちらで公開されています。 WebAssemblyとは何か？ 白石: 今日はよろしくお願いします。まずは自
XSound - Web Audio API Library for Synthesizer, Effects, Visualization, Recording ... -
XSound - Web Audio API Library for Synthesizer, Effects, Visualization, Recording ... - NEW !! XSound 2.0 がリリースされました. 以下の変更が加えられています. ES5 から ES2015 ~ へコードの書き換え const, let アロー関数式 class 構文 ES Modules ... etc ESLint によるコード検証 webpack によるビルド環境 つまり, 内部が変わっただけで, 外部, すなわち, API は 1.x と同じです. コードリーディングしやすくなったことで, issue をたてたり PR を送ったりする敷居を低くしました. XSound とは ? Web Audio API のライブラリの1つで, サウンドの生成 ワンショットオーディオの再生 楽曲
Web Audio APIでコインの音を作る - Qiita
Web Audio APIを使えばブラウザでも簡単に音楽プログラミングができる！と思いたいのですが、どうやらAPIがあるだけでは不十分で少しばかりは音楽プログラミングの知識が必要そうです。ということで、この記事では世界で最も有名な効果音「コインの音」を題材に楽譜のパラメータ化とWeb Audio APIでの実装をできるだけ丁寧に解説します。 楽譜 楽譜を手軽に探すには「coin sheet music」などで画像検索します。コインの音は商標出願されていますので、今回はそれを参考にします。（画像は商標プラットフォームのスクリーンショットです。） この楽譜からは次の点が読み取れます。 テンポが180 最初の音が十六分音符の「シ」で次の音は「ミ」 全体の長さは四分音符が3つぶん 楽譜がまったく読めないという場合は、音階（ドレミファソラシド）と音長（四分音符とか）が読める程度に覚えれば良いと思いま
そろそろ真面目に、HTMLで帳票を描く話をしようか - Qiita
帳票といえばPDFとして生成するのが一般的でしょうか? でも、2015年の今、あえてHTMLで描くのがホットです(個人的に)。ミリ単位で設定された高度な帳票も、CSSを駆使して簡単に作ることができます。業務システムでもモダンブラウザを選択することが増え、@pageなども積極的に使えるようになったこと、SPA(Single Page Application)の台頭、いろいろと条件が揃ってきました。 書いてたら結構長くなっちゃったので、さくっとコードだけ見たい方は、Paper CSSリポジトリをどうぞ。 はじめに HTML帳票のメリット 2015年現在、HTML帳票を選択する幾つかのメリットがあります。 ライブリロードで、リアルタイムなスタイル調整 バックエンドではなくフロントエンドで生成できる 前者は、gulpやGruntの普及で、CSSにしろHTMLにしろ、リアルタイムにプレビューできる環
管理画面を作る：AdminLTE 基本編 - Qiita
管理画面を作るのは大変なので、なるべく手間を省きたい。Bootstrapでもいいが、意外としょぼくなるのと、何よりメニュ周りの制御が今ひとつな感じがする。そこで、管理画面作成に特化したCSSフレームワークを使ってみる。 いくつか選択肢はあるが、ここではAdminLTEを利用してみる。 bootstrapベースとはなっているが、いろいろと独自の癖があり、「bootstrapだと動くのに・・・」みたいなことがままある。 最初に注意 まじめに、TOPメニューから作って見たが、Dropdown等、基本的な機能がうまく動作しないことがあった。どうやら、他の要素に依存しているので、header(class="main-header")だけでなく、サイドバー(class="main-sidebar")や、コンテンツ(class="content-wrapper")、フッター(class="main-fo
Web Quick Editor - Google Driveに保存するサーバレスなメモ帳
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました メモをしようと思った時にエディタを開いたり、ファイルを新規作成してメモして保存…などというのはとても面倒です。簡単に呼び出して内容を記述して閉じて終わり、というくらいの素早さが必要です。 そこで使ってみたいのがWeb Quick Editorです。Google Driveチームが作ったサンプルテキストエディタです。 Web Quick Editorの使い方 メイン画面です。まさにテキストを書くことしかできません。 メモした内容はGoogle Drive上に保存されます。Web Quick Editor自体はGitHub.io上に置かれていて、サーバサイドのGoogle Driveにお任せです。ローカルに配置すれば、HTMLだけで使えるクラウドメモ帳になるでしょう。 機能は決して多く
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
アシアル、AngularJSやAngular 2、React、Vue.js、Meteorに対応するHTML5モバイルアプリ用UIフレームワーク「Onsen UI 2」を公開
