My current HTML boilerplate posted on 09.04.2021 Every element I use for the basic structure of a HTML document, with explanations why. Traducción a Español by www.ibidemgroup.com. Usually when I start a new project, I either copy the HTML structure of the last site I built or I head over to HTML5 Boilerplate and copy their boilerplate. Recently I didn’t start a new project, but I had to document
こんにちは。BASE で Design Group に所属している三佐和です。主に ネットショップ作成サービス「BASE」 のフロントエンドを担当しています。 背景 BASE のデザインチームはここ最近で人数が急激に増え、活動が活発になってきており、その中のプロジェクトの一つとして、現在スタイルガイドの刷新に取り組んでいます。 しかし、人数が増えていく一方で、コーディングのルールの統一をコードレビューや個人の裁量に任せていたり、マークアップからリリースするまでに時間がかかってしまうことが問題になってきていました。 そこで、新しいスタイルガイドでは、デザイナーやエンジニアの作業工数を短縮し、より効率よく開発を進めるために、コーディングルールの整備とリグレッションテストを導入することにしました！ やったこと stylelint を使ってコーディングルールを管理 BackstopJS でテストを
個人的に押さえておいたほうがいいと思う情報や最近動向が気になっている情報をまとめました。 短時間調べた程度でザックリ書いてますので、掲載している情報に間違いなどありましたら、 ご指摘いただけると助かります。 現時点でWorking Draft,Editor's Draftの情報もありますし、ブラウザ側でほとんど実装されてないプロパティ（業務ではあまり使えない系）も積極的に載せていっているので、対応状況についてはCan I useやMDNで調べてください。 途中まで載せてたけど多すぎてあきらめた... HTML Resource Hints(dns-prefetch, preconnect, prefetch, prerender) 指定しておくことで、ページ遷移時に名前解決・接続・リソースの取得・レンダリングを早めることができる。 Link types - HTML | MDN Prelo
日本らしさを表現！CSSで文字の縦書きに挑戦！日本の書籍は元々上から下、右から左という縦書きで書かれてきました。しかしWebサイトでは横書きが基本なので、縦書きを取り入れることで日本らしさやWebサイトの個性を引き立てられます。かつてのWebサイト制作では縦書きが難しく、多くの場合画像を使って表示されてきましたが、CSSでも縦書きが実装できるようになりました！今回はそんな縦書き表現に注目したいと思います！ 縦書きにするには縦書きを設定するのはとっても簡単！縦書きにしたい箇所に CSS で writing-mode: vertical-rl; を記述します。この「vertical」が縦、「rl」が右から左（Right to Left）という意味です。 また、IE 用には別の書き方になります。 -ms- というベンダープレフィックスを付け、tb-rl（上から下、右から左＝ Top to Bot
特定のCSSを読み込み、適応したい要素にclass指定をするだけで簡単に装飾されたボタンを実装できるボタンライブラリを5つ紹介します。 カラーやサイズ指定をはじめ、中には20種類以上のデザインが用意されているものもあります。 そのまま利用させてもらうのはもちろん、特に中規模〜大規模サイトではボタンを共通コンポーネントのひとつとして用意することも多いと思うので、その際の参考にすることもできます。 Buttons 指定時の共通接頭辞は「button」 カラーは6色、サイズは6サイズ分用意されており、3D・ロングシャドウ・グローといったデザインタイプや角丸指定もできるようになっているボタンライブラリで、通常の見栄えだけでなくホバー時やクリック時の見栄えもカバーされています。 基本的には必要なCSSを読んで、適用したい要素に対して特定のclassを付与するだけですが、ドロップダウン使用時はjQue
普段からユーザーが何気なく利用しているホバーエフェクトやマウスクリックを、CSSアニメーションを使ってより魅力的に表現してみませんか。動きに目が奪われるアニメーションエフェクトは、デザイン的な見た目だけでなく、画像やハイパーリンクのクリックしやすさなど、ユーザビリティや操作性を大幅に改善することができます。 今回は、ユーザーの印象に残る効果的なホバーエフェクト用HTML/CSSスニペットをまとめてご紹介します。 HTML/CSSのみでスタイリングされたスニペットも多く、自由にカスタマイズできるだけでなく、コピペでサイトに利用することも可能です。ユーザーのハートをがっちり掴むエフェクトを、今後のプロジェクトに活かしてみてはいかがでしょう。 コピペ可ですぐに役立つ！マテリアルデザインを極めるHTML/CSSスニペット30個まとめ コピペで利用可！思わず押したくなるボタンエフェクト用HTMLスニ
ヘッダに配置されたハンバーガーメニュー。 まぁ、ハンバーガーメニューでなくてもいいのですが、スクロールするとヘッダから流体のようにちゅるんと分離するアニメーションを紹介します。 実装しても気付かれにくいですが、見つけたら嬉しくなりますよね。
1行追加でOK！CSSだけで画像をトリミングできる「object-fit」プロパティー画像の一覧を表示する時などは、画像のサイズが統一されていると並べて表示させてもすっきりキレイに整って見えますが、必ずしもサイズが同じとは限りません。かといってPhotoshopを使ってすべての画像をリサイズできない…ということもあるでしょう。そんな時はCSSでトリミングすると楽です！今回は「object-fit」というプロパティーを使って、画像の縦横比を保ちつつトリミングする方法を紹介します。 画像を中央の位置でトリミングするまずはこの縦長の画像、横長の画像を並べ、縦横 250px の正方形の形で表示させてみましょう。 img { width: 250px; height: 250px; } CSS でこのように画像に対してサイズを指定すると… こんな感じでグチャッとつぶれて表示されちゃいます…。 そこで
最近新しく追加された position の新しい値 sticky が場合によってはすごく便利なので記事を書いてみます。 対応ブラウザがまだあまり多くないので実用性は乏しいかもしれませんが、今まで JavaScript の力を借りなきゃ出来なかったことがたったの2行の CSS で出来てしまう魔法みたいな position の値です。 position: stickyMDN が説明が詳しいので貼っておきます。 参考：position - CSS｜MDN 簡単に言うと「スクロールでその位置まで来たらそれ以降は fixed する」みたいな感じです。 サンプルこの記事内で「position: sticky」や「サンプル」など h2 要素に position: sticky をかけています。対応ブラウザであれば h2 要素が fixed しているはずです。 HTML<h2 class="h2-stic
clearfixが登場してから早10年が過ぎ、お世話になった人もたくさんいると思います。 そんなclearfixさんの必要性がなくなる新しいCSSのプロパティが、2017年1月25日にW3Cのワーキングドラフトで定義されました。まだ一部のブラウザにしか対応していませんが、たった一つの指定でフロートを簡単にクリアできます。
フロントエンドの開発は何を書いているだろうか。今回はCSSにフォーカスしてみよう。SaccやStylus、LessなどいろんなCSSのツールが出ていてそれぞれググればいろんな情報が簡単に手に入る。 自分はSassをずっと使っていて、BASEでもSassを導入している。だが最近は『PostCSS』というツールの名前をよく聞くようになった。PostCSSがどのようなツールなのか、簡単な書き方と概要をまとめた。 この記事を読む前にこのスライドがとてもわかりやすいので、オススメ。 PostCSS とは何か PostCSSとは PostCSSのGithubは こちら 。 READMEには PostCSS is a tool for transforming styles with JS plugins. These plugins can lint your CSS, support variab
CSSはずっとSassを使っていて、gulp-sassでコンパイルする感じの僕でしたがPostCSSに移行してみたのでそのときの工程をメモとして残しておきます。 PostCSSとは何か なぜSassからPostCSSに移行したのか むしゃくしゃしてやった。 ほんとは ただ単にSassを使っているということに飽きたってのが1点。 あとはSassの機能において僕はmixinとかextendとか正直必要ないなって考えていて、変数であるとかネストであるとかimportであるとか(CSSのimportじゃない方の)が使えればそれで良いってのがあって、そうなるとPostCSSの必要な機能だけ読み込んで使うっていうスタンスは良いなっていうのが2点目。 あと結局Sass使ってそのあとにautoprefixerとminifyは確実にやるのでそこでSass以外のツールでCSSのことをあれこれしちゃってるのでそ
2016/9/8 ※cssnextに含まれる機能についての記事を書きました。 cssnextから学ぶ次世代CSS PostCSSを知っていますか？ 筆者はどこかで聞いたことあるぐらいで 次のCSS？ またSassみたいなやつ作ったのか もうSassで終わりにしようぜ（覚えるの辛い） といった負のイメージから勉強してみたのですが、だいぶ想像と違いました。 Sassの代替というよりかはCSSのエコシステムを構築するための共通基盤、といったところでしょうか。 本記事はタイトルにもあるようにPostCSSを使ってCSSをモダン化する流れで書きました。 「Sassすら使っていない」「このCSS界隈のライブラリよくわからない」という方こそ是非読んでみてください。 PostCSSとは 2015年4月頃以前はこんな感じ SassやLESSを筆頭にプリプロセッサとPostCSSを内部的につかっていたcssn
Transition Effect with CSS Masks | Codrops CSSマスクを使った次世代の画面切り替えエフェクト集 今まで見たことの無いようなページ変更のアニメーションエフェクトが豊富に収録されています。 もっとも全てのブラウザで対応しているわけではない実験的な物ですが、最近はブラウザの移り変わりも激しいのですぐに一般的なものになりそう 関連エントリ タイプライター風エフェクトを実現するJS「TYPEWRITING」 複数レイヤーから構成されるページの画面切り替えエフェクト集 壊れたテレビ風のグリッチエフェクトを全ての要素にかけられるjQueryプラグイン CSSホバーエフェクトの30のネタ帳
日本のウェブサイトにおけるスマートフォン・タブレットユーザーのシェアは約47%であり、ウェブデザインはレスポンシブ対応しモバイルを意識した設計が必須です（参照「StatCounter」)。 HTMLの「レスポンシブイメージ」を使えば、HTMLのタグだけで表示端末にあわせた画像を配信できます。 本記事では、サンプルを通してレスポンシブイメージの特徴と使い方について解説します。 この記事で学べること img要素のsrcset属性とsizes属性の使い方 picture要素の使い方 レスポンシブイメージとは一体何か？ レスポンシブイメージとは、レスポンシブなウェブサイトにおける画像の取り扱い方を定めたHTMLの技術。2016年勧告のHTML 5.1に追加された仕様です（現在のHTMLの仕様書）。主な特徴は次の通りです。 CSSやJavaScriptを使わず、HTMLのみでレスポンシブな画像を取り
画像は使用せずにCSSのみを使って実装したハンバーガーメニューアイコンの見栄えやクリック・ホバー時のエフェクトサンプルなど全10種類です。 以前にもハンバーガーメニューをクリックした時のエフェクトを紹介しましたが、あれからまた備忘録として残しておきたいものが幾つか出てきたのでシェアします。 共通のHTML・CSS サンプルで使用しているHTMLとCSSは下記をベースとして使用しています。 スタイルの中には幅や高さを指定している部分やラインの色を指定している部分などあるので、紹介しているものを使用する場合はこれらを自身の環境に合わせて調整してください。 <button class="menu-trigger"> <span></span> <span></span> <span></span> </button> .menu-trigger, .menu-trigger span { dis
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
