Tailwind CSS Templates - Tailwind UI
By the makers of Tailwind CSSModern website templates, crafted with Tailwind CSS. Visually-stunning, easy to customize site templates built with React and Next.js. The perfect starting point for your next project and the ultimate resource for learning how experts build real websites with Tailwind CSS.
track要素で字幕を表示する-サンプル：ほんっとにはじめてのHTML5とCSS3
この動画は NHKクリエイティブ・ライブラリー素材サイトからダウンロードして使用しています。 ＊音声ファイルは「音の素材集 - ©OVER RISE」のCD-ROMから使用しています。 ＊この音声の著作権は、OVER RISEにあります。 track要素で、<video>に字幕などを表示する <video>要素内に入れて、字幕を表示したサンプルです。 HTMLはこちら ↓ <video controls poster="img/vid_img.jpg" preload="auto" width="640" height="360"> <source src="video/uchiage.webmsd.webm" type="video/webm"> <source src="video/uchiage.mp4" type="video/mp4"> <track src="track.vtt
覚えておくと便利！「Emmetで快適爆速コーディングライフのすすめ」 | それからデザイン スタッフブログ
こんにちは。それからデザインの長島です。 みなさま、GWはいかがお過ごしでしたか。私はとある写真展を見に京都に行ってまいりました。楽しかったです。 前回の記事で、私は「Emmet」を使用するといかにHTMLを記述するのが楽になるのかということを書きましたが、「Emmet」はHTMLだけでなくCSSにも使用できます。 前回の記事 それでは、早速CSSの例を見ていきましょう！ width border 複雑な記述 このように、CSSもHTML同様圧倒的にコーディングの工程を減らすことができるのです。 それでは次に、「Emmet」を使用したCSSコーディングの基本的なルールをご紹介します。 「Emmet」の入力規則（CSS編） 「Emmet」の使い方は、ご使用のコーディング環境(DreamweaverやBrackets、sublime等のtextエディター)に「Emmet」を導入後、ルールに基づ
MDN Web Docs
Resources for Developers, by DevelopersDocumenting web technologies, including CSS, HTML, and JavaScript, since 2005. //////////// //////////// //////////// //////////// //////////// //////////// //////////// ++++++ ++++++ ++++++ ++++++ ++++++ ++++++ ++++++{{{{ }}}} {{{{ }}}} {{{{ }}}} {{{{ }}}} {{{{ }}}} {{{{ }}}} ../../ ../../ ../../ ../../ ../../ ../..
Bulma (CSS フレームワーク) のサンプルページを作りました - ラボラジアン
概要 Bulma というCSSフレームワークを使ったサンプルページを作りました。 Bulma は、以下の特徴を持つ CSSフレームワークです。 Flexbox をフルに活用している。 シンプルなグリッドシステム 学習が容易 カスタマイズが簡単 JavaScript は含まれていない。 Flexbox をフルに活用している Flexbox というのは、今まで難しかった「要素を横に並べる」機能を簡単に実現するための新しい CSS の仕様です。（参考：CSS Flexible Box Layout Module Level 1） このサイトでも CSS Flexible Box Layout Module のサンプルページを作りました というページで取り上げています。 Bulma はこの新しい CSS の仕様をフルに活用しているフレームワークです。 シンプルなグリッドシステム Bulma には
Vue.jsでBulmaのレスポンシブ状態を判定する | WriteIfElse
iPhoneで Grafanaの グラフを 参照できる アプリ Grafanizerを 作ってます。 詳しくは こちらへ。 はじめに これは Vue.js #4 Advent Calendar 2017 用に作成したポストです。 最近新しいサービスを作るときは、 Vue.js と Bulma を組み合わせて作っています。どちらも直感的に開発することができるので、かなり開発効率が高いです。 Vue.js と Bulma は非常に相性が良く、互いに扱う領域が別れているため通常のHTMLであれば何も考えることなく利用できます。 しかし、現在主流なレスポンシブ対応ページではブレークポイント毎に違ったコンテンツになる場合が少なくありません。場合によってはHTMLがかなり冗長になってしまいます。 そんなとき、例えばJS側でブラウザのウィンドウサイズを検出して処理を分けるということも考えられますが、今回
CSSフレームワーク BULMA チュートリアル① - Qiita
はじめに BULMAは、CSSフレームワークで、2016年5月に勧告候補になり各ブラウザへの対応も進んでいる「Flexbox」を最大限に利用しています。またJavaScriptを必要としないことも特徴で、BULMAが用意したCSSファイルを一つ、Webページに組み込むだけで手軽に使えるようになるのも良いところかと思います。 本記事では、BULMAの簡単な使い方を紹介するために、まずは基礎的な使い方を説明し、そのあとはWebページを１ページ作成するチュートリアルを行う予定です。 BULMAの導入 BULMAを導入するには三つの手段があると公式ドキュメントに紹介されています。「NPMコマンドでインストール」、「公式サイトからダウンロード」、「CDNを利用」の三つです。本記事では主に「CDNを利用」を使う予定です。 下記のサンプルコードはCDNをつかってBULMAを導入している例です。BULMA
Bootstrap Editor
Bootstrap Editor Webページを爆速で作成 「ログインもインストールも不要」です。(全76テンプレート) Bootstrap Editorはブラウザがあればいつでも使えます！ [ 2018-02-02 ] Bootstrap Editor に名前を戻しました。 [ 2018-05-12 ] Bootstrap4.1バージョンアップによる不具合を修正 [ テンプレート ] Bootstrap4 34枚 [ テンプレート ] Materialize 2枚 [ テンプレート ] Foundation 8枚 [ テンプレート ] AMP 9枚 [ テンプレート ] JavaScript/GoogleMap/vew.js 23枚 2018年1月15日 Coliss掲載（http://coliss.com/） 1. Code エディター：3色から選択（Emmet） 2. Templat
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Home Page - Bulma Themes and Templates
Free Bulma templates
Webデザイン入門：HTMLとCSSの書き方をゼロから学ぼう
What will you build?
Extensions
SLOBSERVER - L'actualité de Second Life
Free Bulma templates
Bulma: Free, open source, and modern CSS framework based on Flexbox
CODEPREP | はじめてのSass
blog
CSSで面倒なコード、HTML5の新要素やスニペット、FacebookのOGPやTwiterカードなどのコードを生成できるオンラインツール