FN1707007 | Sass: SCSSの基本的な書き方 | HTML5 : テクニカルノート
SassはCSSと完全な互換性をもった拡張言語です。CSSにないさまざまな機能を使って、柔軟かつ効率的にスタイルが定められます。Sassの書き方の基本を公式サイトの「Sass Basics」に沿ってご紹介します。構文をSCSSに絞り、解説はわかりやすく改めて、参考のリンクも加えました。 Sassで書いたファイルは、CSSに変換してHTMLドキュメントに用います。まだ環境を整えていない方は、先に「Sass: 使えるようにするには」をお読みください。 01 変数 変数に納めた値は、スタイルシート全体で使い回せます。変数の値を変えると、変数で与えたプロパティの値もすべて書き替わるのです。Sassの変数は$記号を頭につけて定めます。SassをコンパイルしたCSSからは変数は除かれます。変数を参照したプロパティの値は、CSSでは変数値に書き替えられるのです。サイト全体で使うカラーやレイアウトの尺度な
これからのCSSはmargin禁止！？CSSグリッドレイアウトやコンポーネント指向なCSSについて、矢倉さんに聞いてきた！
これからのCSSはmargin禁止！？CSSグリッドレイアウトやコンポーネント指向なCSSについて、矢倉さんに聞いてきた！ 白石 俊平（HTML5 Experts.jp編集長） こんにちは、編集長の白石です。 この記事は、9月24日に開催されたHTML5 Conference 2017に登壇したエキスパートに、お話されたセッションのトピックを中心に語っていただこうとういものです。セッションの内容をより深く理解する手助けになるだけでなく、本記事単体でも面白く読んでいただけることを目指しています。 今回お話を伺ったのは、ピクセルグリッドの矢倉眞隆さんです。 矢倉さんのセッション「まあまあ最近のCSSとつらくならないための書き方」に関するスライド資料は、こちらで公開されています。 インパクト大！CSSグリッドレイアウト概要 白石: では、まずは簡単に自己紹介をお願いできますか？ 矢倉: 昨年（2
リンクのURLを欄外に配置して印刷する
印刷向けCSSの手法のひとつに、擬似要素とattr()関数を使ってリンクテキストの後ろにURLを挿入する、というものがあります。BootstrapやHTML5 Boilerplateなどでも取り入れられているものです。 a[href]::after { content: " (" attr(href) ")"; } 簡単かつ効果的ではありますが、挿入されるURLによってテキストが分断されてしまうので、どうしても本文が読みにくくなりがちです。URLが長い場合はとくに。 そこで、URLをページの欄外に配置し、番号を振ってリンクテキストと結び付ける、という「傍注」形式にすれば、本文が読みやすく、かつURLも必要に応じて参照できて良いのではないかと思います。 これはカウンターとフロートを利用した簡単なCSSで実現が可能です。main要素内のリンクを対象にする場合のコードのうち、必要最低限の部分
新卒Web編集者が「知っていてよかった」と実感した、HTMLとCSSの基礎 - はてな編集部ブログ「編む庭」
こんにちは、はてな編集部の川原です。大学卒業後、新卒でWebポータルサイトの編集職としてキャリアをスタートさせ、はてなには2016年12月に中途入社しました。現在は、主に企業のオウンドメディア編集に携わっています。 いきなり昔語りとなってしまい恐縮ですが、私自身のWebスキルはというと、「ふみコミュニティ」と「0574 Web Site Ranking」がランキングサイトとして全盛期だったころ（これで大体の年齢がバレる）から、個人でWebサイトを作成している程度。始めた当時は「ふみコミュ」も「0574」も、素材配布サイトや画像加工サイト*1で活気づいていたな……。無料レンタルサーバーが人気すぎて、フリーアドレスだと登録できなかったりする、いい時代でしたね。私は「たださぁば」「忍者ツールズ」「めがね部」あたりを利用し、素材サイトは「フランクなソザイ」などにお世話になってました。 徐々に有料の
CSSslide - CSS と JavaScript で動くウェブプレゼンツール
CSSslide は、Web ブラウザで動くプレゼンツールです。 HTML Slidy や S6 にインスパイアされて作りました。CSS と JavaScript を組み合わせて作れます。実装が単純な反面、CSS を変更するだけで簡単にレイアウトを変更できます。 サンプル サンプル 1 : 黒を基調としたクールなデザイン。 サンプル 2 : 白を基調としたシンプルなデザイン。Firefox なら、メニューの 表示 → スタイルシート で配色を切り替えできます。 実用例 [就活のしかた] : 背景画像や高橋メソッドを設定した例。 ダウンロード バージョン 1.0 CSSslide.html CSSslide.css CSSslide.js 上記の 3 つのファイルをダウンロードし、CSSslide.html を編集することで本文を作成できます。 PC 内でもサーバ上でもどちらでも動作します。
あるwebデザイナーの告白:アルファルファモザイク
編集元：Web制作板より「好きなコ（webデザイナー）に告白した・・・・・」 1 Name_Not_Found :2007/11/07(水) 04:23:46 ID:vdLqx5UT
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML,CSS カラーコード一覧表 ｜ 背景色や文字色の設定
