HTMLやCSSやJavaScriptなどのコードをかっこよく魅せるために使用できる無料ツールのまとめ
HTMLやCSSやJavaScriptなどのコードをかっこよく魅力的に見せるために使用できるツールを紹介します。 プレゼンなどでコードを人に見せる時をはじめ、TwitterやFacebookやInstagram用にコードの画像を最適化して見せることもできます。 6 Awesome Ways To Present Your Code 🔥 by Niharika Singh ⛓ 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに Carbon Codeimg.io Pastie Rust Playground Silicon Polacode はじめに Web制作者はいつか、コードを発表する時がくるかもしれません。プレゼン、ツイート、ブログ、あるいはスニペットを人に見せる時です。 あなたのコードを素敵に見せるために使用できる
CSSやHTML、JavaScript等で、似たような挙動をするタグや方法で何が違うのかを解説する・「this vs that」 - かちびと.net
this vs thatはCSSやHTML、JavaScript等で、似たような挙動をするタグや方法で何が違うのかを解説するWebサイトです。 ちょっと何言ってるか分からない、という方もいらっしゃると思いますが、僕の説明が下手で語彙も乏しいためです、すみません。 例えばdisplay:noneとhiddenはどう違うのか、style="width:***"とwidth="***"はどう違うのか等、結果として同じように見えるけど実際は何が違うのかを解説する、といったものになります。 フロントエンドのスペシャリストは復習に、学び中の方は勉強の一環として如何でしょうか。尚、書いてあることの全てが正しいかどうか確認してないので誤った事が書かれていたらごめんなさい。 this vs that
jQueryに頼らず、JavaScriptとCSSアニメーションでスクロールエフェクトを実装する方法
素のJavaScriptとCSSでスクロールアニメーションを実装する方法 ステップ1. HTMLのマークアップ HTMLでは、アニメーション表示したい箇所に.animateを追加します。 <div class="animate"> スクロールアニメーション要素 </div> <ul class="list"> <li class="animate">スクロールアニメーション要素1</li> <li class="animate animate2">スクロールアニメーション要素2</li> <li class="animate animate3">スクロールアニメーション要素3</li> </ul> .animate2と.animate3は、タイミングをずらして表示するためのクラスです。.animate→.animate2→.animate3の順番で表示するようにCSSで指定します。 ステッ
Expressでcssとjavascriptを読み込む方法 - Qiita
1. ディレクトリ構成 Expressでプロジェクトを作成するとディレクトリは以下のような構成になります。 詳細は今後に書くとして、cssとjavascriptをテンプレートエンジンへ適用させたい時は以下の手順を行ってください。 2. css作成 publicフォルダ直下のstylesheetsフォルダにcssファイルを作成してください。 3. javascript作成 publicフォルダ直下のjavascriptsフォルダにjsファイルを作成してください。 javascriptの場合はAPIの作成だったりルーティングの兼ね合いがありますので、 その点を考慮した実装としておいてください。 4.適用 viewsフォルダに作成した(プロジェクト作成時は1ファイルのみ作成されている)テンプレートエンジンのファイルに読み込みをさせていきます。 4-1. cssの場合 おなじみ、linkタグを使い
JavaScriptライブラリやフレームワークを使わずHTML5、CSS、バニラなJSだけで作られたプロジェクト集・「Web Projects With Vanilla JavaScript 」 - かちびと.net
Web Projects With Vanilla JavaScriptはフレームワークやライブラリ等を使わずに純粋なHTML5+CSS+VannilaなJSで作られたWebアプリ等のミニプロジェクトを集めたWebサイトです もともとオンラインの学習アプリの教材みたいで、これらのアプリの作成法を教えてくれるクーポンも発行してくれているようです 20以上のミニプロジェクトが公開されており、全てGithubにてソースコードが公開されています。どれも割と実用的なので勉強になりそうです Web Projects With Vanilla JavaScript
Atomic CSS-in-JS
With utility/atomic CSS, we acknowledge it’s ok to couple the structure and presentation layers: when we need to change the button color, we modify the HTML, not the CSS. This tight coupling is also acknowledged in modern CSS-in-JS React codebases, but it seems the CSS world figured out first that the “separation of concern” of the web didn’t feel right. Specificity is also less a problem, as we u
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
WordPressで特定の固定ページにCSSやJSを追加できるプラグイン - Qiita