CSSのclass名やJavaScriptの関数名を付けるときに役立つ単語リストのまとめ -Classnames
CSSのclass名やJavaScriptの関数名を付けるときに悩んだり、ネタ切れになったことはありませんか？ BEM, OOCSS, SMACSSで命名する場合はそれを使用すればよいのですが、特定のテーマ別にグループ化された単語のリストが必要になるときもあります。そんなときに役立つ単語リストをまとめたClassnamesを紹介します。 Classnames Classnamesは、CSSのclass名やJavaScriptの関数名を付けるときに便利な単語をリスト化したものです。MITライセンスで、商用プロジェクトでも無料で利用できます。
【サンプル10選】コピペで実装できるアコーディオンメニュー | ウィルラボ
【HTML】シンプルなアコーディオンを実装する detailsタグ・summaryタグを使用すると、HTMLのみだけでアコーディオンの開閉を実現することができます。 タグについての詳細は＜ htmlのdetailsタグとsummaryタグでアコーディオンメニューを実装するメリット ＞をご覧ください。 detailsタグにopen属性を指定することで、はじめから開いた状態のアコーディオンを作成することも可能です。 【HTML/CSS】ホバー時・タブフォーカス時のスタイルを変える ホバーやタブフォーカス時のスタイルを変えることで、アコーディオンメニューの開閉状態をより明示的に示すことができます。 ホバー時は「:hover」、タブフォーカス時は「:focus-visible」擬似クラスを使用して、スタイルを変更しました。タブフォーカスはクリック時に動作させたくないので、今回は「:focus-vi
line-heightのハーフ・レディングを打ち消す`calc((1em - 1lh) / 2)`をCSS変数に定義しておくとよい – TAKLOG
lhという単位に見慣れない方もいるかと思われますが、これは現在のline-heightと同じ長さを表す新しく登場した単位です。この例ではline-heightはフォントサイズの1.5倍なので、もし1remが16pxであれば1lhは24pxとなります。 この場合、行の高さと文字の高さの負の差は1em - 1lh、つまり16px - 24pxで-8pxです。それを片方の値を算出するために2で割ると-4pxになります。したがって、margin-block: calc((1em - 1lh) / 2)は、書式のブロック方向（横書き時：上下）にそれぞれハーフ・レディングの大きさ（今回では4px）分のネガティブマージンを設定するということになります。 従来の上下の余白を打ち消す方法との比較lhが登場するまではSassの@mixinなどを使用して以下のような関数を定義し、ハーフ・レディングを打ち消す方法
font-weight - 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 の基本的な理解度 評価課題: 素敵なレターヘッドの便箋の作成 評価課題: かっこいいボック
【CSS】CSSの値と単位が新しくなっていますが、ついていけてますか？ - Qiita
はじめに 最近のCSSのアップデートは目覚ましいものがありますが、 みなさんは、CSSの値と単位がここ1年くらいで大きく変わっていることはご存知ですか？ Dynamic viewport が追加されたり、math 関数が追加されたりなどの大きな変更は、ご存知かもしれないですが、calc()で ネイピア数 e や 円周率 πなどが使えるようになったり、 フォントに相対的な長さ単位が追加されていたりと細かい変更も多くあります。 そのため、この記事では、CSS Values and Units Module Level 3 から CSS Values and Units Module Level 4の変更点を中心に紹介しようと思います。 Viewport単位 CSS Values and Units Module Level 3 から CSS Values and Units Module Le
CSS Stock｜Web制作を楽にするCSSコピペサイト
HTML・CSSの知識は不要。全222種類のパーツから お好みのものをご自身のサイトに取り入れることができます。 CSS Stockは「Web制作を楽にする」をテーマに、HTML・CSSのデザインやパーツをご紹介するサイトです。 お好きなパーツを選び、デザインや色を調整するだけ。あとはHTMLやCSSをコピペすれば、コーディング要らずでサイトに取り入れることができます。新しいスニペットも順次追加しており、色々なパーツを網羅できるよう日々尽力しています。 掲載しているコードについて 当サイトに掲載しているソースコードは全て自由にご自身のWebサイトやブログで使用いただいて構いません。もちろんオリジナルにカスタマイズしてご使用いただいても大丈夫です。 ただし別媒体でソースコード自体を掲載される場合は該当ページへのリンクを記載の上、参照元が当サイトであることを明記してください。 また掲載している
FontAwesome を SVG で使用する【JavaScript なし】
はじめに「FontAwesome を JavaScript なしで使用する方法」または、「FontAwesome の一部のアイコンを使用する方法」です。 JavaScript 無効環境で FontAwesome を使用したページを閲覧すると文字化けしたような表示になるのを目にします。そうなるのを防ぐため、 FontAwesome を JavaScript なしで使用します。または、 FontAwesome は、使用しないアイコンも含めてすべてのアイコンを読み込むため、数個のアイコンのみを使用する場合、不必要なコストが掛かります。それを回避するため、必要なアイコンのみを読み込んで使用します。 FontAwesome は、上記の方法を PNG 画像でも実現できます。ですが今回は、後述する理由により SVG を利用して実現します。 ちなみに、 JavaScript 無効環境だと次のように文字化け
can I use... Support tables for HTML5, CSS3, etc
Test a feature Our partnership with BrowserStack now lets you test your website for compatibility across 2,000+ real browsers and devices. Test on: Did you know? Next If a feature you're looking for is not available on the site, you can vote to have it included. Better yet, if you've done the research you can even submit it yourself! You can import usage data from your Google Analytics account and
ON/OFFスイッチをCSSのみで実装
<div class="switchArea"> <input type="checkbox" id="switch1"> <label for="switch1"><span></span></label> <div id="swImg"></div> </div> <style type="text/css"> /* === ボタンを表示するエリア ============================== */ .switchArea { line-height : 60px; /* 1行の高さ */ letter-spacing : 0; /* 文字間 */ text-align : center; /* 文字位置は中央 */ font-size : 27px; /* 文字サイズ */ position : relative; /* 親要素が基点 */ margin : auto
アイソメトリック研究 番外編｜CSSのtransformプロパティでアイソメできるかな? | yanagi's memo
アイソメトリック図法とは等角投影図とも呼ばれ、立体を斜め上から見た状態の表現方法です。等角というだけあって、ここが全て等しく120°（下図参照）。また座標の軸がともに30°傾いています。建築やテクニカルイラストで使用されていますが、WEBデザインのトレンドになったことでWEB上でもよく見かけるようになりました。アイソメ図と略されていたりします。step1:アイソメトリック図法のガイドとなる升目を作成するまずは作図のためのベース作りです。長方形グリッドツール（直線ツールのあたりにある）を選択した状態でドキュメント... 上記の記事でも触れていますが、アイソメトリック図法とは厳密に言えば図のようにx軸、y軸に30度、30度です。見せるのに適した角度は図とデザインにもよるのですが、実装の目安として丁度良いのでこの角度を目指します。 また、アイソメトリックといえば上面、右面、左面とありますが、まず
RGBとカラーコードの変換ツール : 数値が何色か調べることもできます
ツールの使い方 WEBブラウザ上で動作する、RGB値とHTML・CSSなどの色指定で使用するカラーコードを相互変換するシンプルなツールです。 カラーコードをRGB値に変換したい場合は上の欄にカラーコードを入力してください。 RGB値をカラーコードに変換したい場合は下の欄にRGB値を入力してください。 このツールはカラーコード・RGB値どちらか一方のパラメータを編集すると、その内容にあわせて反対側のパラメータが自動的に書き換えられる仕組みとなっておりますので、即座に変換結果を求めることができます。 上側の入力欄がカラーコード。6桁もしくは3桁の16進数を入力します。 下側の入力欄はRGB値の入力欄です。0から255まで10進数の数字が入ります。 Rが赤色、Gが緑色、Bが青色を表しています。 RGB値は、入力欄の横にあるスクロールバーで調整することもできます。 そして、一番下にあるボックスに現
CSS見出しデザイン21選。現場ですぐ使える見出しデザインをご紹介 | BUILD Journal
CSSで実装できるシンプルな見出しデザインを21パターンご紹介します。汎用性が高くテイストに縛られず現場ですぐ使えるデザインなのでストックしておくと便利に使えます。あなたの現場でぜひご利用ください。 CSSのみで実装するシンプルな見出しデザイン21パターン蛍光ペンのような線をひいたCSS見出しデザイン HTML<h2 class="heading01">ラインを使ったCSS見出し</h2>CSS.heading01 { display: inline; font-size: 26px; background-image: linear-gradient(rgba(0,0,0,0) 70%, rgb(252,81,133) 70%); }蛍光ペンで線を引いたような見出しデザインです。display: inlineで複数行にも対応させています。 2色を重ねた線とCSS見出しデザイン HTML<
一番分かりやすいCSS Grid Layoutの使い方ガイド | Web Design Trends
CSS Grid Layoutは、CSSによるレイアウト手法の1つです。様々なレイアウトをこれ1つで実装することができます。 ただ、覚えなければならないことも多く、初心者の方にとっては少し難しく感じるかもしれません。 そこで、CSS Grid Layoutの重要なポイントに絞って、分かりやすく解説したいと思います。 もう迷わない！CSS Flexboxの使い方を徹底解説 CSS Flexboxは、CSSによるレイアウト作成でよく使われるCSSのレイアウト手法です。 レイアウトを作成する方法は他にもCSS Grid Layoutや、inline-blockを使用する方法... Web Design Trends
CSSで作る！綺麗なWeb用リボンデザイン22選
画像を使わなくても、立派なリボンをWebサイト上に表示することができます。この記事では様々な形のリボンの作り方を使用サンプルとともに紹介していきます。どれもHTMLとCSSのコピペで使うことができます。 はじめに リボンのテキストはサンプルでは「Welocome to My Blog!」や「NEW」などとしていますが、お好みのテキストに変えてご利用ください。ただし、複数行にわたるような長文にするとデザインが崩れてしまうことがあります。なるべく、短めのテキストを入れて頂くのがおすすめです。 また、HTMLコードでは例としてh3タグを使っていますが、この部分をh1~h5やpタグ、div、spanタグに置き換えてそのまま使うことができます。
スマホ用サイト向け：タップしやすくおしゃれなチェックボックス・ラジオボタンをCSSで実現する方法｜CSS｜Webサイト構築｜十字架ラビアンローズ
チェックボックス・ラジオボタンを、CSSだけで、さながらスマホのUIのようなタップしやすくおしゃれなデザインにする方法を、詳細に解説します。 野球 サッカー バスケ テニス 水泳 普段のチェックボックスはこのような感じです。 野球 サッカー バスケ テニス 水泳 それを、このような見栄えで表現する方法を紹介します。 必要最低限のHTML・CSS 以下はチェックボックスを例に解説しますが、ラジオボタンでもやり方は同様になります。 <ul> <li> <input type="checkbox" name="sports" value="野球" id="sports_baseball"> <label for="sports_baseball">野球</label> </li> <li> <input type="checkbox" name="sports" value="サッカー" id=
チェック済のラジオボタンの背景色を変更する【JavaScriptとCSSを比較】 - ウェブつく
CSSでラジオボタンの背景色を変更 CSSでチェック済の選択肢の背景色をつける方法です。 CSSの:checkedの擬似クラスセレクターと、隣接セレクターの+を使います。（≫CSSの「＋（プラス）」とは何？使い方は？） デモ <input type="radio" name="trip" value="hokkaido" id="radio_1"><label for="radio_1">北海道</label> <input type="radio" name="trip" value="okinawa" id="radio_2"><label for="radio_2">沖縄</label> <input type="radio" name="trip" value="tokyo" id="radio_3"><label for="radio_3">東京</label> <p id="t
CSSでチェックボックスがチェックされたら要素表示とかする方法 | PisukeCode - Web開発まとめ
チェックボックスがチェックされた時、 要素をフェードイン表示したり、 逆に要素を非表示にしたり、 文字の色を変えたりとか・・・ そういう動的な処理ってCSSだけでも十分できます。 そこで自分の記憶の整理も兼ね、 ここでは チェックON・OFF時に要素を表示する方法 を紹介！ jQueryとかスクリプトを書かなくても、複雑な処理ができて便利です。 チェック状態は :checked 疑似クラスを使う チェックボックスとかラジオボックスとか・・・チェック可能な要素の場合 チェック状態の時だけCSSを適用できる便利な疑似クラスがあります。 それが :checked 疑似クラスというやつ あんまり目立たないけど、これが意外と便利で使えます。 ▼ 以下MDNリファレンスでの説明 CSS の :checked 疑似クラスセレクターは、ラジオボタン（<input type="radio">）、 チェックボ
CSSでラジオボタンをカスタマイズする方法 – プロエンジニア
1. ラジオボタンカスタマイズの準備をする 1.1. 通常のラジオボタンの作成 [input type="radio"] ラジオボタンのカスタマイズはCSSで行いますが、まずはラジオボタンの標準スタイルを確認してみましょう。 ●ラジオボタン ※HTMLでラジオボタンを作成する詳しい方法については、「HTML入門：ラジオボタンを作成してみよう【<input type="radio">】」で解説していますのでこちらもご参考下さい。 「radio1.html」をPC上の任意の場所に保存して下さい。ファイルの保存形式は「utf-8」にします。 ●radio1.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>CSS入門-ラジオボタンのカスタマイズ</title> </head> <body> <h1
[CSS]カードをぺろっと裏返すエフェクトを実装するスタイルシート
CSS3のアニメーションや回転機能を使用して、カードをぺろっと裏返すエフェクトを実装するスタイルシートを紹介します。
[CSS]コピペで簡単に使える、パネルの表と裏をくるっと水平・垂直にひっくり返すスタイルシート -CSS Flip Boards
パネルをホバーすると、表と裏がくるっとアニメーションで変わるスタイルシートを紹介します。 くるっとなるのは水平だけでなく、垂直にも対応しています。 上：垂直くるっ、下：水平くるっ CSS Flip Boardsの実装 くるっとなるのはスタイルシートのエフェクトで、スクリプトは使用されていません。 Step 1: HTML 表・裏のパネル2枚をそれぞれdiv要素にし、それらを2つのdivで内包します。 垂直にはtop、水平にはleftを指定します。 垂直にくるっ <div class="flip-boards"> <div class="board top"> <div class="front"><h2>パネル：表</h2></div> <div class="flipped"><h2>パネル：裏</h2></div> </div> </div> 水平にくるっ <div class="fl
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
