You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
概要 Bootstrap 4 のソースコードをいじらずに、変数を変更してカスタマイズする方法のメモ。 Bootstrap 4を使うならSassを使って3倍幸せになろう で説明されているように、スタイルの上書きでカスタマイズするのは保守性がよろしくないので、Bootstrap4の変数を変更することで気持ちよくカスタマイズする。 また、Bootstrapのソースコードを変更すると、Bootstrapパッケージをアップデートすると変更が消えてしまうので、変更内容は分離する。 とは言え、特に難しいことをするわけではなく、これこそが公式ドキュメントで説明されている方法でもある。 下ごしらえ まず、自分のSCSSファイルを作成する。名前は何でもいいが、ここではcustom.scssとする。 中身は、Bootstarpのscssファイルへのパスを指定した@importだけ。 npmで入れた場合は ../
アクセシビリティを意識した CSS に関するいくつかの tips です。 スクリーンリーダー用のテキスト テキストを視覚的には隠したいけどスクリーンリーダーには伝えたい、デザイン上にタイトルはないけどマークアップで見出しを入れて構造化したい要件などを実現するために、要素を隠すような CSS を書きます。 たとえば、Apple の ホーム にアクセスしてみると、次のような CSS で隠された h1 を見つけることができます。 .visuallyhidden { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); -webkit-clip-path: inset(0px 0px 99.9% 99.9%); clip-path: ins
Screenreaders Screenreaders(スクリーンリーダー)を除くすべてのデバイスの要素を非表示にします。 .sr-only でスクリーンリーダーを除くすべてのデバイスで要素を非表示できます。.sr-only と .sr-only-focusable を組み合わせると, 要素がフォーカスされているときに再表示します(例:キーボードのみのユーザーなど)。mixinとしても使用可能です。 <a class="sr-only sr-only-focusable" href="#content">Skip to main content</a> // Usage as a mixin .skip-navigation { @include sr-only; @include sr-only-focusable; }
<div class="input-group mb-3"> <div class="input-group-prepend"> <span class="input-group-text" id="basic-addon1">@</span> </div> <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1"> </div> <div class="input-group mb-3"> <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-
上記の例にあるように、<fieldset> 要素は HTML フォームの一部をグループ化し、内側の <legend> 要素で <fieldset> のキャプションを提供します。いくつかの属性を取りますが、特に重要なものとして form は、同じページの <form> の id を含むことができ、<fieldset> が <form> の中になくてもその一部として扱うことができたり、disabled は、<fieldset> およびその中身を一度に無効にすることができたりします。 この要素にはグローバル属性があります。 disabled この論理属性が設定されている場合、<fieldset> の子孫要素として配置したフォームコントロールはすべて無効になり、つまり編集したり <form> と一緒に送信したりすることができなくなります。マウスクリックやフォーカス関連のイベントのような閲覧イベント
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 の基本的な理解度 評価課題: 素敵なレターヘッドの便箋の作成 評価課題: かっこいいボック
Bootstrapのドキュメントcontainerのサンプルコードに、divのサイズにrem単位を使うらしい。 MDNを調べると、 remは、 ルート要素(html)のfont-size と説明しているが、外国語の資料によると、ルート要素を基準値にした相対単位だそうだ。 html要素のfont-sizeは10pxとすれば、 1rem=10px 2.5rem=25px 3rem=30px <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../jquery-3.2.1.min.js"></script> <link href="../css/bootstrap.min.css" rel="stylesheet"> <script src="../js
2021年12月18日 CSS, ダウンロード FlexboxとはFlexible Box Layout Moduleのことで、その名の通りフレキシブルで簡単にレイアウトが組めちゃう素敵ボックスです。現在ほとんどすべての最新ブラウザーでFlexboxをサポートしており、Flexboxを使ったレイアウト組みが今後のWebデザインのスタンダードとなるでしょう。Webクリエイターボックスでは以前からFlexboxの使い方について紹介してきたのですが、最近Flexboxが浸透してきたこともあってか各プロパティの使い方について質問される機会が増えてきたので、チートシートとしてまとめてみました。この記事ではなるべく画像メインでプロパティーの使い方を紹介したいと思います! ↑私が10年以上利用している会計ソフト! 動画で学ぶCSS Flexbox この記事はYouTube動画でも解説しています。動画派の
サブリソース完全性 (Subresource Integrity, SRI) は、 (CDN などから) 取得したリソースが意図せず改ざんされていないかをブラウザーが検証するセキュリティ機能です。 SRI を利用する際には、取得したリソースのハッシュ値と一致すべきハッシュ値を指定します。 メモ: サブリソース完全性の検証において、サブリソースが埋め込まれる文書のオリジン以外から提供されたリソースについては、ブラウザーはオリジン間リソース共有 (CORS) を使用してリソースに追加のチェックを行い、オリジンがリソースがリクエストしたオリジンに共有されることを許可しているかどうかを確認します。 複数のサイトで使われるスクリプトやスタイルシートなどのファイルをコンテンツ配信ネットワーク (CDN) にホストすることにより、読み込みに必要な時間や通信帯域を減らすことができます。しかし、 CDN は
はじめに Sassの@mixinはメンテナブルなCSS設計にも役立つ強力な機能です。 一方でゆるくも書けてしまうため、気をつけないと不格好なCSSが簡単に出力されてしまいます。 そこで@mixinを自作するにあたって、知っておきたい(おきたかった)基本知識をまとめました。何かの参考にでもなれば幸いです。 前提条件 ソースコードは.scss形式で記述しています Sass 3.4.4で動作を確認しています 使用しているModifierという単語は以下の通りです BEMと呼ばれる命名規則で使われる、基本的なスタイル(セレクタ・class)に追加する形で装飾を調整するclassのこと 目次 @mixinのおさらい 基本的な使い方 @contentの使い方 Modifierに無駄なスタイルを適用させたくない... @contentを使ってみる 制御用の引数を用意してみる 引数に配列(リスト)を使って
おばちゃん的にはCSSプリプロセッサの“CSS”に親しみがわいたので、CSSプリプロセッサから勉強を始めてみることにします。 それでは、Googleで「CSSプリプロセッサ, wiki」を検索してみます。おばちゃんの場合、検索結果1番目はウィキペディアの「LESS」ページが表示されました。ふむふむ。これはCSSプリプロセッサの一種みたいですね。一応、おばちゃんはCSSは書いたことがあるので、LESSの書き方とやらは(何となく)理解できます。 LESSを調べているとSass(とかいうの)と比較する記事がたくさん出てきます。SassがLESSの対抗馬なのでしょうか? 今度は、Googleで期間を1年以内に限定して「CSSプリプロセッサ」を検索してみます。昨今はLESSとSassどっちがイケてるかを知って、勉強するCSSプリプロセッサを選ぼうと思ったわけです。 いや、ちょっと待ってください。 今
今回はサイトの華である、メインイメージを配置してみましょう。画面の横幅いっぱいに画像が表示され、キャッチコピー的なテキストが乗ってるアレですね。Bootstrapでは「jumbotron(ジャンボトロン)」というクラスで実現できます。 このように、横幅いっぱいの画像を表示するまでが今回の内容となります。 画像に重なったキャッチコピー、ボタンの配置に関しては、次回解説予定です。 「jumbotron」クラスを使ってみよう! それでは早速、実践していきましょう。 前回作成したindex.htmlファイルを引き続き使用します。念の為、index.htmlと同じ階層に画像が準備されているか、確認してくださいね。画像は前回の記事からダウンロードできます。 HTMLソースをコピペする index.htmlを開き、前回貼り付けたLOGO画像部分の下(※)に以下のHTMLをコピペしてください。 ※「<!–
事前にデータを埋め込んだ静的HTMLを生成することで、配信するWebアプリケーションと、コンテンツを管理するCMSなどを完全に分離したアーキテクチャをJamstackといいます。静的HTMLでも、完全に分離したサービスやシステムのAPIを通じて、ブラウザで実行するJavaScriptで動的コンテンツを扱えます。 Jamstackでは静的HTMLがベースなので、CDNベースのホスティングサービスに配信を任せることができ、Webサーバーの管理や運用をなくせます。大量のアクセスに強く、高速に配信でき、セキュリティ面とコスト面でも有利です。 コンテンツを管理するCMS、ユーザー認証、支払いシステムが完全に別のサービスやシステムに分離されるため、既存の優れたサービスより自由に選択し、それらをAPIで繋ぐことで、必要な仕組みごとに適切なサービスを組み合わせられます。より少ない開発コストで高度な仕組みを
はじめに SMACSSとは、Scalable and Modular Architecture for CSSの略語で、「スマックス」と読みます。 SMACSSはCSSの設計手法のひとつで、CSSのルールを5種類にカテゴライズした上で、それぞれの考え方や記述ルールが取り決められているのが特徴的な手法です。 SMACSSの考え方 CSSのカテゴライズ SMACSSでは、CSSのルールを次の5つのカテゴリに分類しています。 ベース:要素そのもののデフォルトスタイル レイアウト:ページをエリアごとに分割 モジュール:再利用可能なパーツ 状態(ステート):レイアウトやモジュールの特定の状態を示す テーマ:サイトのルック&フィールを定義 それぞれの具体的な解説は、以降で行います。 SMACSSで設計する目的 書籍『Scalable and Modular Architecture for CSS(日
1. はじめに 以前こんな記事書きいた者です(ありがたいことに数十に及ぶいいね(LGTM)頂いてます感謝) Qiita執筆記事:CSS設計手法「FLOCSS」を適用して出てきた疑問を自分なりに考えて進めた結果と得た知見と失敗と で、書いた上にある程度LGTM等頂いた責任として言わねばならぬことがあり本記事を記すこととした。まずは一言 「CSS設計素人がFLOCSSに手を出すのはおすすめできない」 (私が書いた記事でFLOCSS使ってみようと思った初心者がいたら本当に申し訳ない) FLOCSSのObject層のルールが柔軟であるが故、使用者が方針を固める必要がある(と思っている)ので、方針を固めるための知見がない素人が使いこなすには難易度が高いと考えるからである。 ※過去素人(私)が手を出した結果、上記記事のような悲惨な結果に陥った。別要因もあるが開発物は開発中断。 挫折を経て、CSS設計を
このページは 「Bootstrap 3」について説明しています。Bootstrap 4 については、「Bootstrap 4入門」を参照してください。 Bootstrap は、スマートフォンなどのモバイル端末にも対応し、レスポンシブデザインを採用した HTML, CSS, JavaScript フレームワークです。 Twitter 社で開発され、最初は「Twitter Bootstrap」と呼ばれていましたが、現在は「Bootstrap」となりました。 ライセンスは MIT License で、商用利用も可能です。 現時点(2018年5月6日)の最新バージョンは 4.1.1 です。 Bootstrap 2 と Bootstrap 3 以降では一部互換性の無い機能があります。 2018年1月に Bootstrap 4 も正式リリースされました。
BEMとは BEMは命名規則など、CSS設計の考え方のアイデアのことです。(構成案) BEMはBlock, Element, Modifierの頭文字をとったものです。 BEM 公式サイトの文章を引用します。 BEM Quick start BEM (Block, Element, Modifier) is a component-based approach to web development. The idea behind it is to divide the user interface into independent blocks. This makes interface development easy and fast even with a complex UI, and it allows reuse of existing code without copyin
Manage your CSS with prefixes. <header class="ly_header">...</header> <!-- layout --> <main class="ly_cont"> <div class="bl_jumbotron"> <!-- block module --> <h2 class="bl_jumbotron_ttl">PRECSS</h2> <p class="bl_jumbotron_txt hp_mb20">CSS with prefixes.</p> <!-- helper --> </div> </main> <aside class="ly_side"> <a href="#" class="el_btn">Try PRECSS</a> <!-- element module --> <a href="#" class
知っておきたいCSS設計法 第1回 OOCSSの基本 HTMLテンプレートを設計する上で、基礎と考えられる概念のひとつOOCSSを取り上げます。オプジェクト指向のCSSとは何か? 今回はその考え方の基本をまずおさえましょう。 はじめに このシリーズでは、OOCSS(オーオーシーエスエス)、BEM(ベム)、SMACSS(スマックス)という3つのCSS設計概念の概要を解説します。HTMLとCSSをどのように書いていけばよいかは、過去に「CSSの設計」シリーズにまとめました。今回のシリーズは、その2014年度版とでもいうような内容になっています。 というのも、CSSの設計を書いた頃と比較すると、さまざまな設計概念が広く知られるようになったものと思います。今回紹介するBEMやSMACSSが、その代表です。また、CSSのプリプロセッサSassのバージョンアップでは、BEMを意識したような機能なども追
先取り、Shadow DOM 第1回 Shadow DOMが生まれた理由 このシリーズではShadow DOMのコンセプトから実装例まで解説します。第1回目は、なぜShadow DOMという考え方が必要になってきたのか?という背景と、Shadow DOMの概念を解説します。 はじめに Shadow DOMとは、複雑化していくWebアプリケーション開発への取り組みを助けるためにGoogleから提案されているWeb Componentsと呼ばれる一連のコンセプトに繋がる仕様の一つです。 この記事を書いている2012年9月現在、まだW3C草案として公開されている段階であるため、随時更新されるか、他の仕様に置き換えられてしまうこともあるかもしれません。ですが、とても興味深い仕組みなので、現時点での情報を元に、ここで紹介をしてみたいと思います。 現状の問題点 Shadow DOMの概念をあれこれ説明
急速にトレンド化したNFT(Non-Fungible Token、ノン・ファンジブル・トークン)。長く弁護士としてNFTに関わってきた身として、情報をまとめていこうと思い立ちました。 【NFT関連書籍 出版のおしらせ】 編著『NFTの教科書』まえがき・目次公開中 監修『NFTビジネス見るだけノート』 2021年4月6日 暫定公開2021年4月11日 「III. NFTアートと著作権」項目追加により大幅更新2021年4月18日 上記「III.」の、主にライセンス構成部分を大幅追記2021年4月20日 令和2年著作権法改正を踏まえた一部訂正を追記2021年5月18日 「IV. 実質的に取引されているものは何か」項目追加により大幅更新2021年8月27日 関連記事「NFTと著作権 – アートNFTのケーススタディ」公表情報発信履歴は随時更新中です。 【目次】クリック・タップでジャンプできます I
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く