[B! css] ShineSparkのブックマーク

固定のヘッダーがアンカー先コンテンツを隠してしまう問題

固定のヘッダーがアンカー先コンテンツを隠してしまう、これはしばしば問題になることがあります。この問題にはいくつかの解決策があるので、ここでは5つの解決策を紹介します。実装サイトの参考としてリンクも記載しておきますが、記事を書いた当時のものなので現在の実装とは異なる可能性があることにご注意ください。 1. JavaScript JavaScriptでの実装は説明が不要なのでここでは省略します。画像の高さだったり、考えることもあるのであえてこの方法を使うメリットが思いつかないのであれば、この方法で実装する必要はないはずです。 2. 空のElement を利用する実際のリンク先にIDを付与するのではなく空の別の要素を置いておいて、それを絶対配置で飛ばしておく方法になります。

ShineSpark 2021/03/15

css
html

リンク

Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.

Rapidly build modern websites without ever leaving your HTML.A utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup. <figure class="md:flex bg-slate-100 rounded-xl p-8 md:p-0 dark:bg-slate-800"> <img class="w-24 h-24 md:w-48 md:h-auto md:rounded-none rounded-full mx-auto" src="/sarah-dayan.jpg"

ShineSpark 2021/01/27

design
css

リンク

CSS書きたくなさすぎ問題2017 - DRYな備忘録

css書きたくない。できればjsも書きたくない。js必要なの嫌。軽くやりたい。という個人の日記です。参考 Best CSS Frameworks of 2017 | Three29 10 Free Lightweight CSS Frameworks for a Fast Start 2017年にチェックしておきたい、CSSの軽量フレームワークのまとめ | コリスググれ。 lightweight css framework - Google 検索 Gridだけやりたいやつは除外した。 Bootstrap Materialize mui ︵追記︶UIkit ︵追記︶Semantic UIPure Bulma Skelton Spectre.css Kube Vuetify Fictoan avalanche Beuter Vanilla Milligram InvisCSS Look

ShineSpark 2017/05/31

CSS

リンク

superman00 – Just another WordPress site

Fashion is what you buyStyle is what you do with it Shop Now Showing 1–10 of 39 results 2 Pack Bed Pillows for Sleeping Down Alternative Sleeping Pillows for Side Back Sleepers with Super Soft Plush Fiber Filled Hotel Collection Adjustable Fit and Zipper Removable Pillow $22.00 Add to cart 2-Pack – Queen Size (20×30 inches) Pillow Cases – Satin Pillow Covers with Envelope Closure $22.00 Add to car

ShineSpark 2017/05/30

CSS

リンク

イマドキのコーダー環境構築2016

CSS Nite LP47 Coder's High 2016 http://cssnite.jp/lp/lp47 「イマドキのコーダー環境構築」で発表したスライドです。 ※スライド上のURLリンクは効かないので、下部文字起こしから飛んでください。Read less

ShineSpark 2016/11/01

大体同じような環境使ってるけどこれから始める人向けに綺麗に纏まっててよい。

CSS

リンク

フレックスボックスの基本概念 - CSS: カスケーディングスタイルシート | MDN

CSS チュートリアル CSS の基本 CSS の第一歩 CSS の第一歩の概要 CSS とは何か CSS 入門 CSS の全体像 CSS の働き評価課題: 経歴ページのスタイル設定 CSS の構成要素 CSS の構成要素の概要 CSS セレクター Type, class, and ID selectors Attribute selectors Pseudo-classes and pseudo-elements Combinators カスケードと継承 Cascade layers ボックスモデル背景と境界書字方向の操作内容のはみ出し CSS の値と単位 CSS における大きさの指定画像、メディア、フォームの要素表のスタイル付け CSS のデバッグ CSS の整理評価課題: CSS の基本的な理解度評価課題: 素敵なレターヘッドの便箋の作成評価課題: かっこいいボック

ShineSpark 2016/09/15

リンク

CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説 | コリス

CSS Flexboxとは水平または垂直に要素を配置し、柔軟なレイアウトを実現できるCSSのレイアウトモジュールです。複雑なレイアウトでも今までより少ないコードで、よりシンプルなプロセスで実装することができます。 CSS Flexboxの基礎知識、Flexboxの各プロパティがどのように機能するのか、Flexboxでどのようにレイアウトを実装するかを視覚的に解説します。︻アップデート: 2022年6月16日︼IEがサポート終了したことにあわせて、修正しました。︻アップデート: 2021年8月1日︼ Flexboxの解説を2021年の現状にあわせて、修正しました。︻アップデート: 2020年8月23日︼ Flexboxの解説を2020年の現状にあわせて、修正しました。︻アップデート: 2019年3月27日︼ Flexboxの解説を2019年の現状にあわせて、修正しました。︻アップ

ShineSpark 2016/08/24

CSS

リンク

意外と盲点だったCSS3の役立つ小技まとめ - コムテブログ

TL;DR リニューアルを行った時に、CSS3 で気づいたことや次回もまた使いそうなものなどを備忘録として書いておきます。基本的なものから見慣れないものまで。 CSS3 オートフィルの背景色を解除 chrome にて、テキストボックスのオートコンプリートした際、背景色が黄色になります。これを消したかったのでを追記。色指定の箇所に任意の色を指定できますが、とりあえず白色で。無事消えました。 Coderwall | Change background color for autocompleted inputs in Google Chromeでinputがオートフィルされてると背景色が黄色になるのを回避 – CSS | ごろつきめも backface-visibility で Chrome のチラつきを解決 fadeIn などのアニメーションを取り入れると Chrome でヘッダーやサイ

ShineSpark 2016/07/04

CSS

リンク

Hamburgers

Table of Contents Usage Sass Customization Accessibility Browser Support Usage Using Hamburgers for your site is easy (well, that was my intention anyway). Download and include the CSS in the <head> of your site: <link href="dist/hamburgers.css" rel="stylesheet"> Add the base hamburger markup: <button class="hamburger" type="button"> <span class="hamburger-box"> <span class="hamburger-inner"></spa

ShineSpark 2016/03/04

CSS

リンク

CSSで実装するグローデザインのボタン - NxWorld

少し発光しているような感じに見えるグロー（グローイング）デザインを適用したボタンのサンプルです。このデザイン自体は以前からあったと思うのですが、最近DribbbleやBehanceといったデザインのインスピレーションサイトだったり、綺麗なUIデザインを紹介しているようなサイトでよく見かける感じがして、配置や組み合わせももちろん関係はあると思いますが、見た目が綺麗なものやかっこ良いと思うものが多かったので、幾つか再現してみたり思い付いたりしたものを作ってみました。いずれも面倒な記述などなく簡易的なものばかりですが、もしこのまま使用したいという場合はコピペで実装できると思います。共通のHTML・CSS 以下で紹介しているボタンスタイルは、全て下記のようなHTMLとベースとなるCSSが指定してあります。 .button { display: block; padding: 1em 3.2e

ShineSpark 2016/01/14

CSS

リンク

CSS4 :matches の使い方とブラウザ対応状況 | q-Az

:matches(article, footer, aside) h2 { color: red; }articleと footer と aside を :matches でひとまとめに出来るってことですね。何度も h2 を書く必要がなくなり、CSS の視認性があがり、かつ文字数が減りコンパクトになります。また : ︵コロン︶が付いている通り擬似セレクタ︵ :first-child など︶と同じようにこんな使い方も出来ます。 CSS3までbody.home, body.archives, body.tag { color: red; } body:matches(.home, .archives, .tag) { color: red; }かなり見やすくなって分かりやすいです。子孫セレクタとしても使えるし、body.class のようにくっついてるセレクタにも使えて便利です。ただし、

ShineSpark 2015/11/23

いちょう...

CSS

リンク

una.im | Introducing CSSgram: A CSS Library for Instagram Filters

Introducing CSSgram: A CSS Library for Instagram Filters Published on October 25, 2015

ShineSpark 2015/11/03

CSS

リンク

【複数行にも対応】長過ぎる文字列を省略して末尾を三点リーダー（…）にする方法いろいろ | PSYENCE:MEDIA

ランディングページといったコンテンツもレイアウトも全て決め打ちで成立するようなものはさておき、多くの Web サイトおよびアプリケーションは、いかなる分量のコンテンツであろうと柔軟に受け入れて表示出来るように設計・デザインされなくてはなりません。しかし、全ての文字列を表示するには長過ぎてレイアウトが崩れてしまうといった場合には、何らかの方法で文字列を省略する必要があります。一昔であれば Ruby や PHP、Java などサーバーサイドで文字列を切り捨てるなどの加工をしてからフロントエンドに返すという方法が常套手段として用いられていました。しかし、これでは昨今のワンソースによるレスポンシブデザインといったスクリーンサイズに応じて動的に表示領域が変わるようなデザインに対応しきる事が出来ません。PCサイズの表示領域に適した文字数を返したとしてもモバイルサイズの表示領域がそれと同じとは限りませ

ShineSpark 2014/10/07

CSS

リンク

WebKit CSS JIT Internals - Constellation Scorpius

Recently, I’ve been contributing to WebKit CSS Selector JIT compiler. There’s a nice overview about it written by Benjamin Poulain, he leads the CSS JIT project. Yesterday, I gave a presentation about WebKit CSS Selector Compiler. In this slide, I show the details of CSS JIT, mainly focusing on backtracking and code generation. I hope you like it! P.S. I've heard that CSS JIT is shipped in iOS 8 b

ShineSpark 2014/07/14

ブラウザ先端観測会の時のCSS JITスライド

CSS

リンク

Inline SVG vs Icon Fonts [CAGEMATCH] | CSS-Tricks

UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today. If you’re building an icon system for a site, you have some options. If you know the icons need to be raster images, then you’ll likely be using CSS sprites. If the icons will be vector images (much more common these days), you have some options. Two of those options are usi

ShineSpark 2014/04/23

リンク

WTF, HTML and CSS?

Reasons HTML and CSS might make you say what the fuck. A curated list of commonly frustrating HTML and CSS quandaries, miscues, and dilemmas. Created by @mdo. Contents Declare a doctype Box model math Rem units and Mobile Safari Floats first Floats and clearing Floats and computed height Floated are block level Vertical margins often collapse Styling table rows Firefox and <input> buttons Firefox

ShineSpark 2014/03/24

html
CSS

リンク

より良いWebを作るためのガイド

初学者の方を対象により良いWebを作るためのガイドとしてHTMLやCSSなどのWebサイトを作成するための情報を公開しています。ここに掲載している情報は、作者自身が勉強してきたことを初学者の方たちにとってわかりやすくお伝えできるようにまとめた内容ですので、作者の知識に偏りがちであり、その内容の有用性、安全性等については、いかなる保証を行うものでもありません。正確性には万全を期すよう努力してはおりますが、当サイトの利用者が掲載情報に基づいて下した判断および起こした行動により、いかなる結果が発生した場合においても、作者はその責を負いませんのであらかじめご了承ください。掲載情報が生きた情報なのかどうかは、各ページに記されている更新日時などのステータス情報や記述内容から各自で判断してください。常にクリティカル・シンキング（論理的・構造的に考えているかを批判する）のもとに情報を参照されることをお

ShineSpark 2013/11/26

リンク

:visitedと一緒にbackground-imageとかは使えないようになってるよ。プライバシー保護が理由。（CSS おれおれ Advent Calendar 2012 – 15日目） | Ginpen.com

訪問済みリンクを示すセレクターです。なお未訪問のリンクは:linkで得られます。いずれもリンクを前提としているので、要素aの指定は省略して問題ないでしょう。背景画像を指定するプロパティです。読み込みに時間がかかる場合もあるので、background-colorも一緒に指定しておきましょう。︵してないとこ多いんですよね……。︶ background-positionを使ったCSSスプライトという技術も有名ですね。プライバシー情報漏洩の仕組みさて閑話休題。この二つを組み合わせて悪用すると、﹁︵他サイトへの︶訪問履歴﹂を得る事が出来てしまいます。 background-imageが:visitedと一緒に使える場合を考えます。この時に問題になるのが、﹁画像を読み込む﹂つまり﹁画像をウェブサーバーへ要求する﹂という当たり前の行為です。要求を受け取ったウェブサーバーは、要求している画像の

ShineSpark 2013/11/13

security
css

リンク

ズルいデザインテクニック2013 + セミフラット version

[大阪] プログラマー向けデザイン勉強会で発表させていただきました。 http://connpass.com/event/3086/ --- [あわせて読みたい] KSSで作るパターンライブラリ by @machida https://speakerdeck.com/machida/kssdezuo-rupatanraiburari 【アイコンを200こ描いた振り返り！】アイコンから知るデザインのヒントby @awayuki http://www.slideshare.net/awayukin/awayuki-pmd01-share ビジュアルデザインまでのデザインワーク by @yokotak0527 http://www.slideshare.net/YokotaKenji/ss-26460108