CSS
CSSで変数っぽく使えるインクリメント変数で連番がスマートに！
CSSは基本的に変数は使えませんが、連番を表現するときは動的に順番の「値（数字）」を取得してくれる関数？値？が用意されています。 よくあるのは、ブログとかのランキングで「○位」みたいな指定をするときで…
はにわまん 
Webフォント（Googleフォント）の使い方！WindowsやMacに依存しないサイト制作
Webサイトで表示させるフォントには大きく分けると2つあります。 デバイスフォント ・・・ WindowsやMacなどのデバイスに依存 Webフォント ・・・ ネットワーク上からフォントデータを取得 …
CSSの「calc」と「nth-child」を組み合わせて余白を意識した横並び
レスポンシブサイトでアイテムを横並びにする時のCSSの指定方法です。ウインドウサイズを変更したときに、ガタガタせずにスムーズに均等に縮めたりするには、CSSのcalc関数を使って余白を計算させながらパ…
Sassを使うメリットとよく使う機能を５つだけ厳選！
Sassは、CSSを拡張した言語で、利用する主な目的としては「CSSを管理しやすくするため」です。 平面にベターっと並ぶCSSはとてつもなく見づらく管理しずらい圧倒的なデメリットがあります。CSSが数…
ボタンでアローアイコンをCSSで表現する3つの方法
ボタンでアローアイコンをCSSで表現する3つの方法です。 ボタンでアローアイコンをCSSで表現する3つの方法 ボタンでアローアイコンを表現する3つの方法です。 背景画像 疑似要素 HTMLタグ の3つ…
斜めの背景を作るためのCSSは「回転させて元に戻す」で書く！
斜めの背景を作るためのCSSの書き方です。要素全体を傾けて中の要素で元に戻すという無理やりぎみな方法となります。 たぶん、はじめて斜めの背景を作る時に困ると思います。わたしの場合、斜めで背景を再現しよ…
vertical-alignが効かないパターンと、効くパターン
HTMLコーディング初心者の前に立ちはだかりがちなのが、vertical-alignかもしれません。わたしも「なんで効かないんだよおおおお」とパソコンを投げたくなることが何度もありました・・・。 この…
フォームのCSSを初期化してオリジナルなデザインを再現しよう！
フォームの各要素はブラウザによって基本となるデザインが異なります。 デフォルトの状態のフォームをChromeとFirefoxで比較してみました。 Chrome Firefox 分かりにくいですが、文言…
CSSで横並びを表現できる5パターンとそれぞれの役割（使い所）
初心者の最初のハードルとして横並びがあるかと思います。縦に並べるだけなら、それなりにポチポチ触ればできますが、横並びになった途端に「うわあああああ」って。 この記事では、CSSで横並びを表現する5パタ…
Googleマップの埋め込みタグの取得方法とレスポンシブ対応するためのCSS
LP案件のコーディングを行っていると、GoogleマップやYoutubeを埋め込む機会がめちゃくちゃ多いです。 一度やりかたを覚えてしまえば問題ないですが、最初は戸惑いました。 Googleマップって…