BracketsでEmmetを使うときの覚え書き - Hatsuka
フィルター 「|」 をつけると、フィルター機能が使えます。 コメントをつける（c） <!--サンプル--> .entry>h1|c <!--展開--> <div class="entry"> <h1></h1> </div> <!-- /.entry --> エンティティ化(e) <!--サンプル--> .entry>h1|e <!--展開--> <div class="entry"> <h1></h1> </div> 1行で書く(s) <!--サンプル--> .entry>h1|s <!--展開--> <div class="entry"><h1></h1></div> BEMで書く（bem） <!--サンプル--> .block>.-element+.-element>._modifier|bem <!--展開--> <div class
たった数行のCSSでパララックス風表現ができる「position: sticky」の使い方
短いCSSを書くだけで要素を特定の位置に固定できるCSSの「position: sticky」。ちょっとした工夫で実現できるおもしろい使い方をデモで解説します。 スクロールに応じてページ要素を固定表示できるposition: stickyが便利で面白い使い方ができそうなので実験してみました。仕様がまだ草案（Working Draft）の段階で、将来、細かい部分に変更がないとは言い切れませんが、Edgeを含めた最新のブラウザで、ほぼサポートされています。 position: stickyの仕様 ブラウザ・サポート状況（Can I use…） フィーチャー・クエリ（@supports） と一緒に使えば、position: stickyに対応していないブラウザにも考慮した実装が可能なので、注意は必要ですがちょっとしたエンハンスメントとして使うのに良さそうです。 まずは「こんなのが簡単にできちゃい
WebデザイナーのためのVue.js事始め
2018年4月18日 JavaScript, Vue.js Vue.jsはサクッと小さく始められるJavaScriptのフレームワークです。「びゅー」と読みます ;) これまでWebデザイナーがjQueryで作成したような動きもVue.jsでも加えられるのですが、jQueryとは違ってHTMLに条件文を加えたり、アニメーションをCSSで設定することで、JavaScript自体のコードをあまり書かなくても実装できちゃいます。jQueryからの乗り換えを考えている方はぜひ検討してみてくださいね！ ↑私が10年以上利用している会計ソフト！ Vue.jsの使い方 Vue.jsは公式のドキュメントが日本語に対応しており、こちらを読むだけで基本的な使い方は理解できるはず。じっくり読んで、ご自身でもコードを書いて動作を確認し、身につけていくといいでしょう。 最初の一歩目の例として「JavaScriptで
ウェブ制作で感じたデザイン以外の“手間と煩雑さ”--「STUDIO」で狙う課題解決
STUDIOは4月2日、コードを書かずにウェブサイト制作ならびに公開、運用を行うことができるデザインツール「STUDIO」の正式サービスを開始した。 STUDIOの特徴は主に3つ。まずウェブ上で容易に行えるデザイン機能。画像や文字は、ドラック＆ドロップで好きな位置に配置ができ、プロのデザイナーが作成したデザインテンプレートも活用可能。また作成したデザインは、モバイルなどのさまざまなデバイスサイズに対応した、レスポンシブデザインになっている。 そして作成したデザインをウェブサイトとして公開できるパブリッシュ機能。専門的なプログラミングコードを書く必要はなく、ボタン一つで即座に公開できる。オリジナルのドメインを接続することも可能としている。 また、公開したウェブサイトを、チームで運営することかできるグロース機能も搭載。複数名のウェブ運用チームメンバーが、それぞれのアカウントを持ち、自由に更新す
絶対つまずかないGulp入門。インストールからSassのコンパイルまで – ICS MEDIA
ウェブサイト制作には煩雑な処理を自動化する「タスクランナー」や「ビルドシステム」というツールがあります。この記事では、タスクランナー「Gulp.jsガルプ」の導入手順を解説します。 導入は簡単で、本記事の手順では5分程度でセットアップできます。Gulpはコマンドラインで使うのが一般的ですが苦手な人でも安心して学べるよう、ビデオでも解説します。 この記事で学べること イマドキのGulpの導入手順 Gulp 4に対応した書き方 Sassサスの導入手順 GulpやSassの導入や使い方にはいろんな方法がありますが、この記事では現場で使われている方法を紹介します。Gulpの入門記事は他のサイトにもありますが、対象バージョンが古くて使えなかったりします。本記事は最新版に対応させているので、安心して読み進めてください。 ※この記事では、Node.js v18とv19で動作検証をしています。 ※Sass
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Cheat Sheet
Chrome デベロッパーツールの隠し機能が便利！CSSのセレクタ・プロパティ・値を1クリックで見つける方法