親セレクタを参照する & や + のやつ Sassを書く上でたまに忘れてしまってパニックになるので、メモ程度に。 cssにコンパイルされた後、どうなるのかも一緒に記載しておきます。 セレクタの前に記述する
【Sass】親セレクタを参照する&や+の使い方 - Qiita
親セレクタを参照する & や + のやつ Sassを書く上でたまに忘れてしまってパニックになるので、メモ程度に。 cssにコンパイルされた後、どうなるのかも一緒に記載しておきます。 セレクタの前に記述する
SublimeText（Windows、Mac）をSassで使いやすい設定にする | Web制作者のためのSassの教科書 - 公式サポートサイト
ここでは、Win,Macともに最近ユーザーが激増している「Sublime Text」でSassを快適に使えるようにするための、設定例を紹介します。 この設定は、著者の森田がSassのコーディングをする時に使っている設定（2013年8月現在）になりますので、あくまでも一つの参考として読んで頂き、使いづらいと感じる部分は、自分なりにカスタマイズしてより使いやすいエディタにしましょう。 キャプチャーはMacで撮っておりますが、Windowsも同じやり方で設定できます。 Sass用の設定を追加 まずは、SublimeTextを起動します。 SublimeTextを起動した状態 まず、機能を拡張するためにパッケージコントロールをインストールします。「Sublime Package Control」のサイトへアクセスしましょう。Installationページに記載されているソースをコピーします。 バー
SASS/SCSSで基本カラーを設定して効率よくカラーバリエーションを作成する
共通のSCSSファイルを作成する カラー設定は他のSCSSファイルから共通して使用すると効率が良いです。 なのでカラー設定用のSCSSファイルを最初に作成します。 共通の変数は「_variables.scss」というファイル名にします。 「_」で始まるファイルはコンパイルされません。 _variables.scss $base-color: #536A97; とりあえず「$baseColor」という変数を一つ作成しました。 変数を使用する さきほどカラー設定した変数を使用してみましょう。 base.scss @import "_variables.scss"; h1 { color: $base-color; } 適当なファイル（base.scss）を作成したら、カラー設定した「_variables.scss」をインポートします。 あとは使いたい場所に「$baseColor」を記述するだけ
last-child は親要素からみて最後の子要素
（そのままではないか） たとえば以下のようなHTMLがあるとして、 <div class="entries"> <article>foo</article> <article>bar</article> <article>baz</article> <article>qux</article> <ul> <li><a href="#">next</a></li> </ul> </div> article要素の最後の子要素に枠線を入れたいとして、下記のようにCSSを入れるとする。でもこれだとうまくいかない。どこにもborderはつかないことになる。 article:last-child{ border:1px solid #ddd; } 仕様を参照すると、下記のように書かれている（:last-childは:nth-last-child(1)と同義なので、そちらの仕様）。 6.6.5.3. :
background-size - 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 の基本的な理解度 評価課題: 素敵なレターヘッドの便箋の作成 評価課題: かっこいいボック
Sass Guidelines
An opinionated styleguide for writing sane, maintainable and scalable Sass. The Sass Guidelines project has been translated into several languages by generous contributors. Open the options panel to switch. About the authorMy name is Kitty Giraudel, I am a French front-end developer, based in Berlin (Germany) since 2015, currently working at Cofenster. I have been writing Sass for several years no
【jQuery】フッターの位置で固定するページトップへ戻る
今回作成したページ 今回作成したページはこのようなページです。 demo download このような動きをしています。 ページをスクロールするとページトップへ戻るリンクがフェードイン・アウトする。 ページトップへ戻るリンクをクリックするとスムーズにスクロールする。 ページトップへ戻るリンクはコンテンツ部分の右下で固定表示される。 フッターのところまでスクロールするとページトップへ戻るリンクがフッターに貼り付く。 動作がややこしいですね…。私のようにjQueryが苦手な方のために1つずつ解説していきます。 1.jQuery本体を読み込む jQueryを使用するには以下のファイルを読み込みます。 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js
CSS3のFlexboxを基本から理解して、使い方をマスターしよう！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、王です。デザイナーやってます。 今回は「Flexboxを基本から理解して、使い方をマスターしよう！」ということで、初耳の方でもざっとFlexboxで何ができるか分かるように短い動画を用意しました。 動画の中で使ってたデモをアップしたので、確認してみたい方は以下のリンクをどうぞ！ デモ 昨今では、当然ながらデジタルデバイスサイズの多様化でレスポンシブデザインとやらが流行っています。 同じサイトをさまざまなスクリーンサイズに応じたデザインをしなければならない上に、コーディングにも手間がかかります。制作側からしたら何かと厄介ですよね。 「なるべく手間をかけずに作りたい！」という世界中のデザイナーの声に応えて、「Twitter Bootstrap」をはじめとした数多くのフレームワークが徐々に脚光を浴びはじめて久しくなります。 ただ、これらはあくまで古い技術の組み合わせで、革新的な技術で
railsはどこでcssを指定するのか？ - QA@IT
平素よりQA＠ITをご利用いただき、誠にありがとうございます。 QA＠ITは「質問や回答を『共有』し『編集』していくことでベストなQAを蓄積できる、ITエンジニアのための問題解決コミュニティー」として約7年間運営をしてきました。これまでサービスを続けることができたのは、QA＠ITのコンセプトに共感をいただき、適切な質問や回答をお寄せいただいた皆さまのご支援があったからこそと考えております。重ねて御礼申し上げます。 しかしながら、エンジニアの情報入手方法の多様化やQAサービス市場の状況、＠ITの今後のメディア運営方針などを検討した結果、2020年2月28日（金）15:00をもちましてQA＠ITのサービスを終了することにしました。 これまでご利用をいただきました皆さまには残念なお知らせとなり、誠に心苦しく思っております。何とぞ、ご理解をいただけますと幸いです。 QA＠ITの7年間で皆さまの知識
よく見かけるblockquoteの左上と右下にダブルクォートつけるやつをCSSだけで作ってみる – bl6.jp
blockquoteのデザインって色んなパターンがあって面白いですよね。比較的よく見られるパターンの一つとしては、左上と右下にダブルクォーテーションをつけているのなんかが結構あります。で、画像とか作るのが面倒くさかったりしちゃう人はCSSだけでそれなりのものを作ってみるっていうのもアリなのかなと思ったりもします。なので、今回はそれを作ってみました。 [ads_center] CSSでblockquoteをデザイン ダブルクォーテーションは疑似要素の :before、:afterを使用してcontentで挿入しています。配置に関してはpositionやline-heightで調整していけばなんとか目的の場所に収まるんじゃないかなーと思います。以下サンプルです。 サンプル sampletext sampletext sampletext sampletext sampletext sample
CSSの「疑似要素」の書き方 再入門（CSS3対応版） [ホームページ作成] All About
疑似要素は、要素の一部分に対してだけスタイルを適用できる、CSSの仕様の1つです。例えば先頭の1文字だけを装飾対象にする :first-letter疑似要素を使うと、右図のように各段落の先頭文字だけを大きくするようなデザインが作れます。 そのほか、要素の前後に任意の文字列や画像を加えられる :before疑似要素・ :after疑似要素は、HTMLを編集することなくCSS側だけで文字や画像を追加できて便利です。 疑似要素の書き方 疑似要素を使う際のCSSソースの書き方は、CSS2までは、前回ご紹介した「疑似クラス」と同じでした。以下のように、要素名などに続けて半角コロン記号「:」を1つ加え、疑似要素名（下記では「before」疑似要素）を記述します。 ■疑似要素の書き方（従来の仕様）： 要素名:before { プロパティ: 値; } CSS3では、「疑似クラス」と「疑似要素」を区別するた
![CSSの「疑似要素」の書き方 再入門（CSS3対応版） [ホームページ作成] All About](https://cdn-ak-scissors.b.st-hatena.com/image/square/8f530daf3cb408d6b6a0ba6f38ed7ccece36cffc/height=288;version=1;width=512/https%3A%2F%2Fimg.aacdn.jp%2Faa%2Fcommon%2Fogp300_300.png)
CSSを整形してくれるオンラインツール csscomb.com - web制作学習用ブログ｜Web制作科07/01~
http://csscomb.com/online/ CSSを整形してくれるオンラインツール。 before header { margin: 0 auto 12px; width: 1024px; height: auto; background: #F93; } .header_text { float: left; margin:12px 0; width: 280px; height: 90px; background: #999; }after header { width: 1024px; height: auto; margin: 0 auto 12px; background: #F93; } .header_text { width: 280px; height: 90px; margin:12px 0; background: #999; float: left; }見
cssとは？使い方と学び方の基礎まとめ - プログラミング学習の窓口
プログラミングの基礎であるhtmlを勉強していると、必ず出てくる言葉がcss。 現代のwebサービスにおいて、htmlとcssはいわば兄弟のようなもので切っても切れない関係と言えるでしょう。 では、cssとはいったいどういうものなのでしょうか。 簡単に言うと、Webページの文字の色や大きさ、背景、配置といった見た目を設定する言語の一種です。 静的ページも動的ページも見た目の部分の多くはこのcssで制御されています。 もしcssを詳しく学ぶなら、独学もいいですがプログラミングスクールがおすすめです。費用は当然かかりますが、アドバイスがもらえることと、学習スケジュールが管理されるので、強制的に頑張れる仕組みが作れるのもメリットと言えるでしょう。 The post cssとは？使い方と学び方の基礎まとめ first appeared on プログラミング学習の窓口.
positionの『static』『absolute』『relative』でハマっていた。 - rderaログ
cssでpositionの設定を行っていた。 しかし、思う通りにページが表示してくれなかった。 『思う通り』！＝『書いた通り』という状況に陥っていて、 完全にハマっていた。 でも、ググって以下ページの解説記事を読んだら、解決した。 CSS : positionの「absolute」「relative」「fixed」のリファレンス | CSS Lecture MIYAさん、ありがとうございます。 未来にハマる可能性が高いと思うので、 今回、学習したことをアウトプットしておく。 基本 static 配置を指定できない。使う必要はないかも。 relative 相対位置。本来、表示される位置を基準として位置を指定できる。 absolute 絶対位置。親ボックスかウィンドウの左上を基準として位置を指定できる。 fixed absoluteと同様。ただ、画面をスクロールしても位置が固定。 で、今回、ハ
CSSのfont-family指定はこれで決まり！（2013冬） - 遠近法ノート
追記：最初、うっかり「2013冬」って書いてしまったんですけど、ほんとは「春」と書かなきゃいけませんでした（汗）*1 とりあえず今、CSSのfont-familyでフォントを指定するならば、これで決まり（一番下の追記も参照で）。 font-family:'Lucida Grande', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif;CSSのfont-family指定、「あえてフォントを指定しない」っていうやり方もアリですが、いろいろな事情でそうも言ってられません。とりあえず今現在の最適font-family指定を考えてみたところ、上のようになりました。 指定順序、入れたフォント、入れてないフォント、すべてに意味があります。 以下説明。 ヒラギノはProではなくProN。 OS Xの和文標準フォ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
前方, 後方, 部分一致セレクタ - Qiita
CSSのletter-spacingでHTMLの文字間隔を調整する方法
oukasei.com
https://coliss.com/articles/build-websites/operation/css/css-vertical-align-anything-by-sebastian.html
[M]5秒でCSSを整形するツール「CSS Beautify」で、ソース見られても恥ずかしくないCSSに！ | miMemo(ミメモ)![[M]5秒でCSSを整形するツール「CSS Beautify」で、ソース見られても恥ずかしくないCSSに！ | miMemo(ミメモ)](https://cdn-ak-scissors.b.st-hatena.com/image/square/652179394e62742f0f3e87b843ac3a9ae9abc8c2/height=288;version=1;width=512/https%3A%2F%2Fweb-mimemo.com%2Fwp-content%2Fuploads%2F2013%2F10%2Fcssbeauty_00.png)
