最近の実装に合わせたHTMLテンプレート、基本のコードとすべての要素の役割も解説
最近の実装に合わせた、Webページ用のHTMLテンプレートを紹介します。 レスポンシブ用のHTML、ソーシャルメディア用のHTMLをはじめ、高速表示に欠かせないrel="preload"なども含まれています。IEなどの古いブラウザはプログレッシブエンハンスメントで対応しています。 HTMLテンプレートはすべての要素の役割を各行ごとに解説しているので、自分に不必要なものを削除したり加えたりすることもできます。 My current HTML boilerplate by Manuel Matuzović 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに HTMLのテンプレート（最終形） HTMLのテンプレートを1行ずつ解説 ページのタイトルと説明文、外部ファイル ソーシャルメディア用のHTML アイコンとアドレスバー もう
CSSの単位remの正しい使い方 - Qiita
CSS Advent Calendar 201918日目に空きがあったので埋めます。 最終日も私です。 QiitaやGoogleでremと検索すると、間違った使い方をしている記事がたくさん出てきます。 remはroot emの略！ って分かってるならRootを潰すな！ rootはユーザー設定により変動するかもしれないものです。 ユーザビリティを考えるなら、きちんとユーザーの設定に対応出来るようにしましょう。 よく見る間違った使い方 間違った使い方の言い分 モダンブラウザの初期値は16pxです。 だからrootを62.5%（10px）にすれば1rem = 10pxで分かりやすいです。 15pxは1.5remと書きましょう！ [疑問] 全部pxじゃだめなの？ 1rem = 10pxより全部pxで書くほう分かりやすい。 15pxと書いたほうが楽だし。 なぜこんな変な書き方が流行ったのでしょうか？
Webはここまで進化中！コピペもできるHTML／CSS参考スニペット84個まとめ
この記事では、Webサイトやモバイルアプリにあっと驚くエフェクトを、コピー&ペーストで実装できる最新 HTML/CSS スニペットをまとめてご紹介します。 スニペット（英: Snippet）とは、一般的に「切れ端、断片」といった意味で、ウェブサイトなどのプログラミングで簡単に切り貼り、再利用できる部品を指します。 これらのスニペットを利用すれば、他のサイトではあまり見かけない差のつくデザインエフェクトを実現できます。今後のウェブ制作に活用してみてはいかがでしょう。 ここでは、カテゴリー別に分けて新しいオンラインツールをまとめています。 コンテンツ目次 1. イメージスライダー系 2. テキストエフェクト系 3. テキストエフェクト系スニペット 4. ページレイアウト系 5. ナビゲーションメニュー系 6. ローディングアニメーション系 7. SVGアニメーション系 8. 便利、面白系スニペ
CSSで実装したレイアウトの構造や階層を簡単に確認できる、私のお気に入りのCSSハック -My favorite CSS hack
flexboxで実装したレイアウトはもちろん、floatでもgridでもCSSで実装したレイアウトの構造や階層を確認できるスタイルシートを紹介します。 ページ上の各要素のサイズ・マージン・パディングなどに不整合がないか簡単に確認でき、スニペットやブックマークレットに登録しておくと便利です。 My favorite CSS hack by Gajus Kuizinas 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 5年もの間、私がコピペして利用してきたCSSのスニペットを紹介します。 * {background-color: rgba(255,0,0,.2)} * * {background-color：rgba(0,255,0、.2)} * * * {background-color：rgba(0,0,255、.2)} * *
コピペで実装できる！最新WebテクHTML/CSSコードスニペット66個まとめ
思わずクリックしてコンテンツを読み続けたくなるような、コピー&ペーストで利用できる最新 HTML/CSS スニペットをまとめてご紹介します。 新しいテクニックを利用した、ますます進化するWebの可能性を感じさせてくる作品ばかりで、今後のデザイン制作に活用してみてはいかがでしょう。 「Run Pen」をクリックすることで読み込みが開始されます。右下に表示された「Return」で再読み込みし、左上のHTML/CSS/JSタブを切り替えることで、それぞれのスタイリングを確認できます。実際にカスタマイズしたいときは、右上の「Edit on Codepen」をクリックしましょう。 2018年人気だったすごいHTMLスニペットベスト100選【Codepen編】 コピペで実装できる、最新WebテクHTML/CSSコードスニペットまとめ Turbulence font – SVG マウスの動きに合わせて、
超便利！2019年に注目したい最新CSSツール、リソースガイド100個まとめ
2019年がスタートし、ここ数年で急速な進歩を続けているCSSは、さまざまなオープンソースのツールがリリースされています。 CSSライブラリやフレームワーク、オンラインツールを利用することで、サイト制作の時間を節約、短縮できるだけでなく、新しいテクニックやプロパティなどに関しては、学習用ガイドラインも多数公開されています。 今回は、2019年に注目したい100種類のCSSライブラリ、フレームワーク、リソース、便利ツールをまとめてご紹介します。これからCSSを本格的に学ぶひとも、日常の業務などで普段使いしているひとも、一度は確認しておきたい内容となっています。 1. 新作CSSライブラリ 2. お役立ちCSSユーティリティ 3. CSS画像エフェクトツール 4. CSSレイアウトフレームワーク 5. CSS Flexbox フレームワーク 6. オンラインCSSツール&生成ツール 7. CS
CSSの「calc()関数」を使うとすごく便利に！レスポンシブ対応のレイアウトで高さを最適化するテクニック | コリス
レスポンシブ対応のレイアウトを実装する際に手間なのは、ブレイクポイントの定義です。ここ1,2年でもたくさんのデバイスがリリースされ、それに伴いスクリーンサイズの種類も増えてきました。 そんな時に便利なのがCSSの「calc()関数」を使ったテクニック。 calc()を使用して、デスクトップやタブレットやスマホのそれぞれに最適なレイアウトを実装するテクニックを紹介します。 Use calc() to Change the Height of a Hero Component 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 calc()を使ったフォントサイズの可変 paddingとline-heightの場合 ヒーローコンポーネントの場合 calc()を使ったヒーローコンポーネントの実装 calc()のサポートブラウザ 最後に ca
プログラマーから見た、SCSSの正しい(かもしれない)使いかた - Qiita
SCSSとは SCSSというのは、CSSのアレなところを何とかしようという目的で作成されたメタ言語です。詳細は省略します。 なにそれ？ ってかたは、コチラなどがわかりやすいのではないかと思います。 CSSのメタ言語Sass(SCSS)、LESSの完全入門 でですね。 ここで大事なのは、こいつは要するにCSS周りの技術ですので、つまるところは基本「デザイナーさんが使う」ものである、というところです。 彼らは概して、非常におおらかで、健康的で、寛容です。私たちサーバーサイドエンジニアのように、細かいことで「こんな仕様は許されんな！」「なんだよこの仕様設計したヤツって○○じゃねーの？」などとイラついたりしません。 なので、あんな欠点だらけのクソ規格であるCSSにも、特に気にしたりしないらしいのです。 ところがやはり、中には「CSSのそーゆーところって、やっぱ問題だよねー」って思う人々もいたらしく
Sass(SCSS)のmixinを使って、Media Queries（メディアクエリ）を使いやすくするスニペット - NxWorld
ブレイクポイントや使用回数が増えるに連れてどんどん管理などが面倒になってくるMedia Queries（メディアクエリ）を、Sassのmixinを使って利用しやすく且つ管理もしやすいようにしたスニペットを紹介します。 ここで紹介する以外にも方法はあるとは思いますが、個人的に過去に使っていたとか普段から使っているものを3パターン紹介します。 条件分岐を使う ひとつ目は条件分岐を使ってひとつずつブレイクポイントを指定したものです。 ブレイクポイントの追加をしたい場合は同じように条件分岐を追記し、逆に不要なものがあれば該当の条件分岐を消せば変更できます。 また、各ブレイクポイントは数値での指定ではなく「small」や「large」という形でそれぞれ用意しており、使用時はこれらを引数に指定します。 こうしておくことで後で数値を変更することになった場合でも、mixin内で記述している数値部分のみ変更
1行追加でOK！CSSだけで画像をトリミングできる「object-fit」プロパティー
2024年8月19日 CSS 画像の一覧を表示する時などは、画像のサイズが統一されていると並べて表示させてもすっきりキレイに整って見えますが、必ずしもサイズが同じとは限りません。かといってPhotoshopを使ってすべての画像をリサイズできない…ということもあるでしょう。そんな時はCSSでトリミングすると楽です！今回は「object-fit」というプロパティーを使って、画像の縦横比を保ちつつトリミングする方法を紹介します。 ↑私が10年以上利用している会計ソフト！ 画像を中央の位置でトリミングする まずはこの縦長の画像、横長の画像を並べ、縦横250pxの正方形の形で表示させてみましょう。 img { width: 250px; height: 250px; } CSSでこのように画像に対してサイズを指定すると… こんな感じでグチャッとつぶれて表示されちゃいます…。 そこで画像に対して ob
モバイルWebのUIを速くする基本テクニックがわかる──Google I/O 2016 High Performance Web UI
モバイルWebのUIを速くする基本テクニックがわかる──Google I/O 2016 High Performance Web UI 川田寛（ピクシブ株式会社） こんにちは、ふろしきです！ 私はHTML5 Experts.jpで、過去2年ほどGoogle I/Oの情報を発信し、Web技術の変化についてお伝えしてきました。振り返るとGoogleは、2014年にモバイルWebの提唱と技術要素の拡大を図り、2015年からは「RAIL（モバイルWebが目指すべきパフォーマンス指標）」や「Progressive Web Apps（アプリのように振る舞うWeb）」といった、モバイルとの親和性が高いWebを作り出すための”考え方”を推し進めました。今年2016年は、さらにそれを踏み込んでいったという感じがします。 今回のI/Oで取り上げるのもそのひとつ。毎度お馴染みGoogle Developer A
するするさせたい：サイボウズ採用情報のアニメーション（その1） - fragmentary
サイボウズの採用情報ページを見ていた。 サイボウズ | 採用情報（新卒・キャリア） といっても受けるとかではなく、ただ性格悪いことを思っていただけなんだけど。 Kintoneのセクションでアプリっぽいアイコンたちが右から左へと流れているんだけど、それがガタガタとしている。するするしていない。するするさせたい。 というわけで、何が起こっているのかを調べてみようかと。何回かにわけて書くよ。 その1 ― 何が起こっているのか調べる その2 ― 調べながら直しながらするするさせる その3 ― ちょっとしたことや他のブラウザでもするするさせる アニメーションの実装を調べる あとのことを考えて、Chrome DevToolsを使う。 まず、該当の流れるアイコンのところで右クリックしてinspectする。Elementsパネルで、<div class="icon"> という要素がハイライトされる。div
Dev.Opera — CSS will-changeプロパティについて知っておくべきこと
はじめにWebKit系ブラウザでCSS transformやanimationといったプロパティを使った時に発生する、“例のちらつき”。これに気づいたことのある人ならば、おそらく“ハードウェア・アクセラレーション”という用語をこれまでにも耳にしたことがあるでしょう。 CPU, GPU, ハードウェア・アクセラレーション一言で言うと、ハードウェア・アクセラレーションとは、グラフィックス・プロセッシング・ユニット（GPU）を用いてセントラル・プロセッシング・ユニット（CPU）の処理量を軽減し、ブラウザのレンダリング処理を効率化することです。ハードウェア・アクセラレーターを有効にしてCSS処理を使うと、ページのレンダリングが速くなり、ページ表示が高速化されます。 名前の通り、CPUとGPUはどちらもプロセッシング・ユニットです。CPUはコンピュータのマザーボードに取り付けられている部品で、ほとん
CSSでやりたかったことが数行のコードで実装できるスタイルシートの小技のまとめ -CSS Protips
リスト要素で実装したアイテム間の区切り線の最後だけ取り除く簡単なコード、リストの各アイテムをカンマ区切りで配置させるコード、テキスト表示をすべてのデバイスで最適化するコードなど、サイトやブログに役立つ便利なCSSのテクニックを紹介します。 CSS Protips -GitHub 当記事は、2015/11/4に公開した記事に追加分を加えたものです。 更新: 2016/3/7 13, 14, 15を追加。 更新: 2016/4/13 16, 17を追加。 CSS ProtipsのライセンスはCC0 1.0で、個人でも商用でも無料で利用できます。 スタイルシートの対応ブラウザはChrome, Firefox, Safari, Edge, IE11です。 1. リスト要素の最後だけ区切り線を削除 2. body要素に「line-height」を加える 3. 天地の中央に配置 4. リストをカンマ区
あまり知られていないCSSの12の事実(続編) | POSTD
1年以上前に、私は最初の 12 Little-known CSS Facts（あまり知られていないCSSの12の事実） を発表しました。SitePointで最も人気の高い記事となりました。この記事を書いた後も、私はCSSのアドバイスやちょっとした情報の収集を続けました。だって、大ヒット映画も必ず続編を制作するじゃないですか。 注釈 SitePoint/ Natalia Balska によるイラスト それでは、早速今年も開発のヒントになる12の事実について話しましょう。もちろん、中にはもうすでにご存じのこともあると思いますが、この中で初めて知ったという事実がありましたら、コメントでお知らせください。 1. border-radius プロパティに”スラッシュ”シンタックスを使用できる事実 このプロパティについてはSitePointに4年以上 前に書いた のですが、この機能が存在することを、未
CSS設計をどうやって行うのかまとめてみた - Qiita
CSS設計とは 簡単にいえば破綻しにくいCSSを書こうという問題。 大雑把にいうと共通部分は同じクラスにして使いまわそう、共通化しようというやつです。 今回はCSSを書く前の話(カンプを見るところ)からどういう風にCSSを書くかについて少し書きます。 今回しない話 OOCSSやBEMやSMACSSについて(moduleごとにCSSファイルわけたりとかそういう話含む) 詳しい命名の仕方について ファイル管理(ディレクトリ構成)の方法について 細かいCSSの書き方について こんな方向け 毎回CSSが破綻する人 CSS設計するための◯◯の方法とか読んでもいまいちDRY(Dont Repeat Yourself)に書けないという悩みを持っている人 大事なのはいきなりCSSを書かないこと さてあなたはHTMLとCSSを書くコーダーさんだったりフロントエンドエンジニアさんだったり、あるいはフルスタック
破綻しにくいCSS設計の法則 15 - Qiita
ブラウザスタイルは平坦化しておく リセットCSSはオプトアウト可能にしておく 登場頻度の高い組合せはplaceholderとして登録してから利用する 可能な限り画像はスプライト生成してから利用する それ以上分解不可能なコンポーネントは要素のように扱う コンポーネントは自己完結型のものを使う BEMはDRYになるよう粒度を下げる 可能な限り@extendは利用しない レスポンシブでない場所では、Utilitiesクラスを活用する shame.cssはいつも綺麗にしておく 詳細度または特異性の高いものほど後方に記述する 可能な限り!importantしない 可能な限りハックしない 変数をデザインガイドとして活用する CSSファイルを分割するメリットはほとんどないので一つにまとめる 1. ブラウザスタイルは平坦化しておく 例えば、こういうScrap & Buildは単に通信量のムダ。 * { f
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSWAND
Web制作者が備えておきたい最新版チートシートのまとめ | コリス
CSSが破綻する4つの理由 - Qiita
