スタイルシートで使われるプロパティと値の読み方 property and value of Cascading Style Sheets スタイルシートで使われているプロパティ、値・ファンクションの読み方をご紹介します。 ほとんどは英単語の読みですが、間違えて覚えてしまう人もいるため、掲載してみました。 すべてのプロパティ、値・ファンクションをご紹介しているわけではありませんので予めご了承ください。

バイト先で「新ゆとり世代」と言われました。れこです。 HTML、CSSを省略して書けるZen-Codingの後見、 Emmetについて書こうと思います。 やれCoffeeだTypeScriptだSassだ〜と手をつける前に、 もっと簡単に、デメリット無く作業効率をあげられます。 CoffeeScriptやSassなどのプリプロセッサ系とは違い、 CoffeeやSassの知識を開発メンバー全員が持ってないとならず、 結局自由が効かなくなる、ということはありません。 個人から使えて、チームで使ってもなお良し。 さらに、展開後のカーソルの位置がいい感じだったりと、 細かい気配りまで完璧です。 そんなEmmetを 僕が頻繁に使っている機能に焦点を当てて、紹介したいと思います。 Emmetの導入 Emmetは各種エディタ・IDEのプラグイン形式で配布されています。 お値段は無料です。 Web系の人が

「建築の中に楽しさを」 機能や美しさを超えた楽しさがある建築を作リたいと考えています。ご要望や敷地や法規をいかに適切に解いた計画であっても、どんなに美しくデザインされていてもそれだけでは良い建築になりません。人を包み込む器には微笑ましい楽しさが潜んでいることが大切だと考えています。 そのために・・・・・ ●まずは聞き耳をたてる 建主のお話、敷地を訪れた時に感じること、法規などの様々な規制、設計のヒントはどこにあるかわかりません。小さなことも見逃さないように聞き耳を立てます。 ●次に建主の気持ちで素直に考える 感じ方考え方は人それぞれ。まずは毎回異なる建主の感じ方考え方を理解するように努めます。建主の気持ちを想像しながら素直に与件を解くことを考えます。 ●そして要望を超えたご提案がないか考える 素直に解くだけでなく与件を見直しすことで、新たなご提案ができることがあります。たとえ小さくとも要望

はじめに 今回はCSSだけでタブ切り替えを作る方法をご紹介します。 最近はCSSの使い方次第でできることが非常に多くなっているので、タブ切り替えなどちょっと動きがあるものでもJavaScriptを使わず作ることが可能です。 今回作成していくもの まずは、今回作成していくデモをご紹介します。 今回作成していくデモはこちらです。 See the Pen CSS tabs by Ayaka Sasaki (@ayausaspirit) on CodePen. HTML解説 では、中身のソースコードを見て行きましょう。 まず、今回の全体のHTMLはこのようになっています。 <div class="tabs"> <input id="all" type="radio" name="tab_item" checked> <label class="tab_item" for="all">総合</lab

CSSだけでタブの切替を実装する方法のメモ 基本仕様 CSSのみでタブの切替を実装する方法は3種類あります。 target属性を使う フラグメント識別子を使う inputタグを使う いろいろやり方はありますが、target属性やフラグメント識別子を使うとページ遷移が発生してしまい、前のページに戻るのがめんどくさくなってしまうので個人的に好きじゃないです。 なので今回はinputタグを使って実装します。 inputタグとlabelタグを使ってタブを作ります。 inputのidとlabelのfor属性が対応しており、labelをクリックするとそれに対応したinputにchecked属性がつきます。 inputのchecked属性で要素の表示/非表示を切り替えます。 <!-- TAB CONTROLLERS --> <input id="panel-1-ctrl" class="panel-ra

A CCO project maintained by the Simple Icons contributors. Use GitHub for requests, corrections and contributions. Kindly supported by your donations at Open Collective.

皆さん、師走をいかがお過ごしですか？ 今回は前々から試してみたかったSVGについての記事です。 基本予備知識0から色々触ってみて、SVGはどんなことができるのかとSVGの面白いなーと思った点等をまとめてみました！「これからSVG試してみようかな？」と思ってる方(特にWEBデザイナーさん)の参考になれば幸いです。 それではどうぞー！！ SVGとは その前にSVGについて簡単な説明しておきます。 SVGとはScalable Vector Graphics（スケーラブル・ベクター・グラフィックス)の略で、JPEGやPNGのような画像(ビットマップデータ)ではなくイラストレーターで扱うベクターデータです。 その始まりは1998年と意外に古いのですが、ブラウザ対応が追いついておらず、長い間陽の目を見ることがなかったかわいそうなやつです。 SVGのいいとこ SVGがJPEG等の画像と比べていいなーと思