無料で使えるかわいい8bitデザインのファミコン風CSSフレームワーク「NES.css」
ファミコン風デザインのウェブサイトを簡単に作れる無料CSSフレームワークが「NES.css」です。NES.cssはさくらインターネットのダーシノ氏が開発を行っており、ボタンや入力フォームといった基本的な要素から、SNSやキャラクターのアイコンまで用意されています。 NES.css - NES-style CSS Framework https://nostalgic-css.github.io/NES.css/# nostalgic-css/NES.css: NES-style CSS Framework | ファミコン風CSSフレームワーク https://github.com/nostalgic-css/NES.css ファミコン風CSSフレームワーク「NES.css」をリリースしました | Black Everyday Company https://kuroeveryday.blo
アセットパイプライン - Railsガイド
1 アセットパイプラインについて アセットパイプライン（asset pipeline）は、JavaScriptとCSSアセットの配信を処理するためのフレームワークを提供します。これは、HTTP/2のような技術や、アセットの連結や最小化といった技術を活用することによって行われます。アプリケーションは、最終的に他のgemのアセットと自動的に結合できるようになります。 アセットパイプラインは importmap-rails gem、sprockets gem、sprockets-rails gem によって実装されており、デフォルトで有効になっています。新しいアプリケーションを作成する際に、以下のように--skip-asset-pipelineオプションを渡すとアセットパイプラインを無効にできます。 本ガイドでは、CSSの処理にsprocketsを、JavaScriptの処理にimportmap
【レスポンシブ対応】CSSのみでの多階層ドロップダウンメニューを作成
javascript 無しでナビゲーションメニューを作る 弊社のホームページはナビゲーションメニューとしてドロップダウンメニューを採用している． 当初は drawer.js を使用して作成されていた． しかし，このレスポンシブメニューを CSS だけで実現したいと思い，デザインはそのままにスクリプトを書き替えることにした． つまり，javascript や jQuery は使わないでスタイルシートのみでパソコン，スマホ両方に対応する，つまりレスポンシブ対応のナビメニューを実現した． 横幅の広い時，つまりパソコンで見ている時はドロップダウンメニューが表示され，横幅が狭い時，つまりスマートフォンで見ている時はハンバーガーメニューに切り替わるようになっている． このメニューはスクロールしても上部に固定された状態になるので，どこまでスクロールしたとしても，いつでもメニューを呼び出すことが出来る．
ドロップダウンメニューとは？HTML＋CSSだけで簡単に作る方法 [ホームページ作成] All About
ドロップダウンメニューとは ドロップダウンメニューとは、主にメインメニューが横方向に広がっており、メニュー項目の上にマウスを載せると、隠れていたサブメニューが下側に展開するようなメニューのことです。多数のウェブサイトで主要なナビゲーション機能として使われており、HTML＋CSSだけで簡単に作成できます。 たいていのウェブサイトには何らかのメニューUI(ユーザ・インターフェイス)があるでしょう。横いっぱいに広がった領域内でメニュー項目を横方向に並べたUIをメニューバーと呼びます。そのメニュー項目から下方向にサブメニューが展開するUIのことを特にドロップダウンメニューと呼び、プルダウンメニューと呼ばれていることもあります。 ウェブサイト上で提供するナビゲーション機能として、メニューはとても基本的なUIです。ぜひ何らかのメニューを用意しておきましょう。その方法の1つとして、本記事ではメニューバー
![ドロップダウンメニューとは？HTML＋CSSだけで簡単に作る方法 [ホームページ作成] All About](https://cdn-ak-scissors.b.st-hatena.com/image/square/391cf8b3a0a84ef4a8ab329f8ab56ad3ad519102/height=288;version=1;width=512/https%3A%2F%2Fimgcp.aacdn.jp%2Fimg-a%2F1200%2F900%2Faa%2Fgm%2Farticle%2F2%2F3%2F9%2F1%2F1%2F201704181214%2Ftopimg_original.png)
BEM を使うべき5つの理由（なぜ BEM が G.R.E.A.T といえるのか） - Frasco
CSS は、比較的簡単に使いこなすことができます。しかし、それを使い続け綺麗な状態を長期的に保つこととは全く別の話です。知らず知らずのうちに乱雑になっていきます。ありがちですよね？そんな時、命名規則の出番です。様々な選択肢がある中で私が選んだのが BEM なのです。 BEM とは何か BEM とは、命名規則の一種で、モジュラーでメンテナンス可能なスタイルを書くことができます。 BEM は、Block-Element-Modifier の略語で、クラス名は3つ[^1]のパートから成ります。実際の表記は block__element--modifier となり、Block から始まり、次に Element（アンダースコアが2つ）、そして最後に Modifier が続きます（ダッシュが2つ）。 画像1：BEM で命名されたコンポーネントの例 Block（ブロック） Block は、独立しており再
BEMによるフロントエンドの設計 | 第1回 基本概念とルール
BEMによるフロントエンドの設計 第1回 基本概念とルール この記事ではフロントエンドの設計方法「BEM」を紹介します。第1回目はBEMのもっとも基本となるBlock、Element、Modifierの概念と、class名の命名ルールを解説しています。 はじめに 最近フロントエンド界隈で、『BEM』という言葉を見かけることが増えてきました。BEMとは、Block、Element、Modifierの略語です。Webサイトのコンポーネント化のためのフロントエンド設計方法のひとつで、厳格なclass名の命名ルールが特徴的な手法です。 第1回は、BEMをまったく知らない方向けの入門編です。 なぜBEMが必要なのか 私たちはHTMLとCSSを使うことでしか、Webサイトを作ることができませんが、HTMLとCSSにはプログラム的な機能が備わっていません。そのために、フロントエンドエンジニアは次のような
W3Schools.com
W3Schools offers a wide range of services and products for beginners and professionals, helping millions of people everyday to learn and master new skills. Free Tutorials Enjoy our free tutorials like millions of other internet users since 1999
うわっ、私のサイトBootstrapくさすぎ!? たった数文字変えるだけでBootstrapのくさみが抜ける7つのCSSテクニック。
なんか、このサイトBootstrapくさい。そう感じることはありませんか? その理由はズバリ、欧文ベースでつくられたフレームワークを文字構造の違う日本語で適用した際に不都合が出てしまっているからです。 それらが醸し出す違和感を放っておくと、Bootstrapくささを生み出す大きな原因になってしまいます。 そもそもの問題として、欧文と比較して和文は文字の要素が多く、文字自体のリズムも少ないため、どうしても複雑で単調に見えてしまいます。 しかし、和文だからといってあきらめることはありません。BootstrapのCSSを少しだけ変えるだけでグッと見た目がよくなる隠し味をご紹介します。 1. line-heightで行間にゆとりを。明朝やゴシックなど、フォントの種類が言葉の印象を表すように、文字の行間は読みやすさ、文章全体の雰囲気を左右します。 欧文をベースに設計されたBootstrapをそのまま
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
