サルワカくん 知っておきたい「暮らしの雑学」や「インターネットの知識」を分かりやすく解説していきます。
サルワカ | サルでも分かる図解説明マガジン
サルワカくん 知っておきたい「暮らしの雑学」や「インターネットの知識」を分かりやすく解説していきます。
Appleの商品ページに使用されているスクロールに合わせて動画を再生するエフェクトを実装するスクリプト -Scrolleo
/* Scrolleo - make your video scroll with inertia * MIT License - by Mark Teater */ (function(window, document, undefined) { "use strict"; var _Scrolleo = function(opts) { // Defaults this.acceleration = 0.08; //1 is fastest, 0 is slowest, 0.08 is default this.secondsPerScreen = null; //Set this to the length of the video. "1" is 1 second. this.additionalOffset = 0; //Add or subtract pixels to whe
いくつ知ってる？HTML/CSSの便利な小技・テクニックまとめ | Web Design Trends
HTMLやCSSはブラウザのアップデートによって使えるものが増えたり、より簡単に機能を実装できるようになることがあります。 少し前まではJavaScriptで行わなければならなかったことが、HTMLとCSSだけで行えるようになったりするので、最新情報にキャッチアップすることでより効率的にコーディングを行えるようになります。 今回は、HTMLとCSSの小技やテクニックをご紹介したいと思います。 1. ダークモードの時にスタイルを変える 最近のOSでは、通常のカラースキームと別に「ダークモード」が搭載されるようになりました。 prefers-color-scheme: darkを指定することでダークモードが設定されている場合のスタイルを別で記述することができます。
CSSのクラス名を決めるときに使うリストをつくりました
CSSは設計手法も大事ですが、どういう単語で名前をつけていくかも大事だと思っています。 個人個人でばらつきが出るところでもありますし、「単語名 英語」で検索をして探した単語を使ったけど若干意味合いが違ったといったこともあると思います。 クラス名を決めるためのリストを見かけることもありますが、英単語の読みは書かれていても意味合いが書かれていることは少ないように思います。 自分の確認用と、チームで製作するさいの基準になるようなものを作りたいと思い、単語とその意味を短くまとめてGitHubにあげています。 CSS クラス名リスト | GitHub 以下投稿時の内容です。 名前をつけることは難しいですが、とても重要なことです。 CSSには設計思想が必要ですが、実践するにあたり、名前と機能の意味がとおり、名前のつけ方にブレがないようにするべきです。 このドキュメントでは、CSSでよく使われる単語を分
2018年人気だったすごいHTMLスニペットベスト100選【Codepen編】
CodePen は、ブラウザ上でコーディング、プレビュー確認ができ、ソースコードの共有を行うことができる、世界でも人気のウェブサービスです。 今回は、Codepenで2018年に人気の高かったHTMLスニペットベスト100選「The Most Hearted of 2018」が公開されていたので、その中でも特に印象に残った作品をまとめてご紹介します。あっと驚くようなエフェクトやテクニックを、今後のウェブデザイン制作にいかしてみましょう。 2018年人気だったすごいHTMLスニペットベスト【Codepen編】 #99 Animated CSS Seasons CSSのみでスタイリングされたイラストアニメーションで、四季をぞれぞれ表現しています。 See the Pen Animated CSS Seasons by agathaco (@agathaco) on CodePen. #97 A
表示領域にピタッと移動！CSSでスクロールスナップを実装しよう
2019年1月11日 CSS 画面領域いっぱいに広がるフルスクリーンレイアウト。近年ではよく目にしますね。スクロールした時に画面にピタッと各エリアを表示させたい時に使えるのが「CSSスクロールスナップ」です。JavaScriptなしでスクロール位置を調整してくれますよ！ ↑私が10年以上利用している会計ソフト！ スクロールスナップの基本 See the Pen scroll-snap basic demo by Mana (@manabox) on CodePen. スクロールすると、各エリアの中途半端な位置で停止せず、エリアがすべて見える位置でピタッと止まりますね！このデモの構成を見ていきましょう： HTML ピタッと移動させたい各要素を親要素で囲みます。この例では親要素に「container」、子要素に「area」というクラスをつけました。 <div class="container"
HTMLのinputタグ[type=file]のブラウザごとの挙動について調べてみた - Qiita
はじめに みなさんHTMLタグの一つであるinputタグはご存知だと思います。 その中でもtype="file"についてぼくはこんな疑問を持ちました。 選択したファイルはどこのファイル？コピーとかされているの？ これみなさん知っていますか？ ちょこっと調べたんですがなかなか情報がなかったので いろいろ自分で調査してみました。 （本音は調査が面白そうだったのでそんなに本気で調べてないだけです 仮説を立てる まずは仮説をいくつか立ててそれぞれを検証していきます A. ブラウザはファイル参照だけ持っている B. ファイル選択時にTemp領域へコピーしている C. メモリ上に抱えている たぶんこれらのどれかじゃないかなと思っており、 個人的にはBが濃厚だと勝手に考えています。 調査開始 ファイルアップロード機能が必要なので 簡単にファイルをアップロードするだけのアプリを自前で作りました。 http
![HTMLのinputタグ[type=file]のブラウザごとの挙動について調べてみた - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/25b21d397939f0d7235132405e4e3d079e25f683/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Fadvent-calendar-ogp-background-f625e957b80c4bd8dd47b724be996090.jpg%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9SFRNTCVFMyU4MSVBRWlucHV0JUUzJTgyJUJGJUUzJTgyJUIwJTVCdHlwZSUzRGZpbGUlNUQlRTMlODElQUUlRTMlODMlOTYlRTMlODMlQTklRTMlODIlQTYlRTMlODIlQjYlRTMlODElOTQlRTMlODElQTglRTMlODElQUUlRTYlOEMlOTklRTUlOEIlOTUlRTMlODElQUIlRTMlODElQTQlRTMlODElODQlRTMlODElQTYlRTglQUElQkYlRTMlODElQjklRTMlODElQTYlRTMlODElQkYlRTMlODElOUYmdHh0LWNvbG9yPSUyMzNBM0MzQyZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZ0eHQtY2xpcD1lbGxpcHNpcyZ0eHQtYWxpZ249bGVmdCUyQ21pZGRsZSZzPWI1ODJlZjU4ZjZiYTRkMDc1OWRkOWI5ZTU3MWUyNmM4%26mark-x%3D142%26mark-y%3D151%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwdGFxbSZ0eHQtY29sb3I9JTIzM0EzQzNDJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9YTg1YjQ4NmExMDFkMTk0NzA5YzgwOTE4NjgxNGIyNjI%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3D508d85eb5f1b0c24123e22a78b678e51)
ウェブサイトをもっと面白く！コピペ可能なHTML/CSSスニペット75個まとめ 2018年7月度
ウェブ制作で差がつくテクニックをつかった、コピー&ペーストで利用できる HTML/CSS スニペットをまとめてご紹介します。2018年を代表するグラフィックデザインのトレンドでもある、グラデーションやグリッチエフェクト、ちょっとした動きが魅力的なマイクロインタラクション、CSS Gridプロパティの実践的な使い方など、今後のウェブサイト制作で参考にしたい作品を中心に揃えています。 「Run Pen」をクリックすることで読み込みが開始されます。右下に表示された「Return」で再読み込みし、左上のHTML/CSS/JSタブを切り替えることで、それぞれのスタイリングを確認できます。実際にカスタマイズしたいときは、右上の「Edit on Codepen」をクリックしましょう。これらのスニペットを利用することで、他とは一味違うユニークなウェブサイトを制作してみましょう。 Webサイトを使いやすく！
URLを入力するだけでOGPタグを生成してくれるWEBサービス「HEY META」 | TechMemo
HEY METAは、サイトのURLを入力するだけで、OGPタグを自動生成してくれるWEBサービスです。 HEY METAの使い方 HEY METAにアクセスして、URLを入力します。ブログの場合は、記事ページのURLを入力してください。 解析が完了すると、下記の項目が表示されますので、変更したい箇所があれば修正します。 Social Card Preview Title Description Image Website Address [Generate]をクリックすると、OGPタグが生成されます。 今回試しに生成してみたタグは、以下の通りです。 <!-- HTML Meta Tags --> <title>HTML・CSS・JavaScriptのコードを綺麗に整形することができるWEBサービス「DirtyMarkup Formatter」</title> <meta name="des
レスポンス向上のため、PageSpeed Insightsを利用してみた | doop
前回の続き。 現在作っているWebアプリの問題として、レスポンスが悪かったようなので、 どの辺があかんのか、PageSpeed Insightsを使って調べてみた。 けど、Bootstrapのsampleをベースに作っていたので、そんなにたくさんの指摘はなかったんだよね。 主な指摘は以下の通り。 ・文字セットを指定する ・重複するリソースは 1 つの URL から提供する ・圧縮を有効にする ・ブラウザのキャッシュを活用する ・JavaScript を縮小する このうち、「文字セットを指定する」は指定してあるんだけど、PageSpeedのバグなのか表示が消えなかったので気にしない事に。 また、「JavaScript を縮小する」はソースコード量が少なくて、あまり効果がなさそうなのでパス。 「重複するリソースは・・」は諸事情により致し方ないのでパス。 と、言うわけで他の2つを実施。 圧縮を有
ガイドラインチェッカー - Webサイトの品質をチェックし、問題点を報告します -
制作ガイドライン違反を一括チェック！ 調査したいWebサイトのトップのURLを入力するだけで、 そこからリンクを辿り（クロールし）、ページ情報を取得し、 サイト全体の品質をまとめて報告いたします。
CSSの設計 – FLOCSSをベースにしたファイルの構成と命名規則を考える ｜ Tips Note by TAM
「どうやってコーディングをして組み立てていこうか？」 いくつもの案件を経験しても、いつも悩んでしまうのがCSSの書き方です。「それなら自分なりの考えをまとめてルールを作ってしまおう」と考え、CSS設計に関する情報から自分なりにコーディングルールを作りました。 今回の内容は社内勉強会で発表した「CSSのファイル構成と命名規則」の資料を再編したものです。 すべての案件内容で最適な方法ではないこともあると思いますので、1つの考え方だと捉えていただけるとありがたいです。 詳しいコードやルールはGitHub（個人のアカウント）を参照してください。「使用しているテンプレート」リンク先のstyle.scssで実際の全体の構成が確認できます。 使用しているテンプレート CSSコーディングルール CSSは影響範囲の管理が難しい CSSで難しいことのひとつは「影響範囲」を管理することだと思います。 クラスを追
コーディングガイドライン(の例) [HTML] [SCSS] - Qiita
はじめに 社内で使いたいと思っているフロントエンドのコーディングガイドラインの草案を載せてみました。 「ここはこうあるべきじゃない？」などいろんな人からツッコミもらえたら嬉しいです。 アウトラインはこんな感じです。 基本仕様 HTML ディレクトリとファイル 画像 CSS/Sass フロントエンドコーディングガイドライン 基本仕様 HTML5(Last Call WD) CSS3/CSS2.1 Javascript 基本ルール 要素の終了タグは省略しない 空要素のスラッシュ付けない および終了タグが不要なタグ(ex. input meta img )の末尾スラッシュは付けない コーディングフォーマットは Google HTML/CSS Style Guide に従う。 Google HTML/CSS Style Guide http://google-styleguide.googleco
![コーディングガイドライン(の例) [HTML] [SCSS] - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/63dc40591d7daa2594c8be691270084bdbc2568d/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-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9JUUzJTgyJUIzJUUzJTgzJUJDJUUzJTgzJTg3JUUzJTgyJUEzJUUzJTgzJUIzJUUzJTgyJUIwJUUzJTgyJUFDJUUzJTgyJUE0JUUzJTgzJTg5JUUzJTgzJUE5JUUzJTgyJUE0JUUzJTgzJUIzJTI4JUUzJTgxJUFFJUU0JUJFJThCJTI5JTIwJTVCSFRNTCU1RCUyMCU1QlNDU1MlNUQmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZ0eHQtY2xpcD1lbGxpcHNpcyZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTU3MTVjZjVkODNkYTdkMTdhYmJiNjRlMmM1YjljNDBk%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwc2t3YnImdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTQxNGRiNzZjNjcwMGI4MGEwMmVhNzQwYWQ2YTZhM2M2%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3D9c2eef14f78bcf27a743003d103cdce9)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Chromeで文字コード確認・変更ができない！？ そんな時の解決方法！ | ヤビブロ
吉本式BEM設計（BEM設計ベース）
http://rakuten-tips.com/htmlcss/page-border/
Online HTML editor
Another HTML Lint
2016年版 フロントエンド開発フォーマット
新着記事
