CSS

Web

submitボタンのデザインがiPhoneだけおかしい!でハマった時の対処法

お問い合わせページや資料請求などのページで使う「submit」。 これが何故か、PCサイトやデベロッパーツール上でのデザインでは問題ないのに、iPhoneでだけ意味のわからんデザインになりハマった話。
Web

【デモあり】YouTubeの読み込みを軽くする!複数動画埋め込みページを高速化

YouTubeの動画を1ページに複数埋め込むと動画を読み込むのに時間がかかってしまいます。今回はこの動画を埋め込み過ぎて重くなったページを改善する方法をご紹介。
Web

【コピペでOK!】デモあり YouTubeの動画をレスポンシブでブログやサイトに埋め込む方法

YouTubeの動画を、変な余白を残さず、要素に対して100%の幅かつその幅に対して16:9の高さに自動調整される貼り付け方法をご紹介します。
Web

Font Awesomeで特定のアイコンだけ表示されない時の確認方法

ウェブサイトでアイコンを使う時、Font Awesomeを利用されている方がかなり多いと思います。 僕も多用するのですが、最近Font Awesomeがアップデートされていて有料版なるものも出てきました(前からあったのかな?)。 で...
Web

【デモあり】AMPでも大丈夫!CSSだけで要素をアニメーションさせる

CSS3のアニメーションをうまく使いこなせるようまとめてみました。
Web

ソースコードの表示はCodePenで!プラグインを使うよりCodePenをオススメする3つの理由

今更ながら、HTML、CSS、JavaScriptなどをプレビュー表示できるWebサービス「CodePen」のご紹介。 CodePenは、ブラウザ上でソースコードを書いてプレビュー表示しながら編集できたり、他の方々のコードをダウンロードで...
Web

タスクランナーGulpを使ってウェブ制作を効率的に!

Sassを使ったCSSコーディングの効率化、画像の圧縮、JavascriptやCSSファイルの縮小など、ウェブサイトの制作には様々な作業、技術が必要です。 最近、こういった作業を自動的に行ってくれるタスクランナーというツールが注目されてい...
Web

Compassの導入手順と使い方(Windows8版)

以前ご紹介した、CSSフレームワーク「Compass」の導入手順と良く使う便利な機能をご紹介します。 前回の記事はコチラ。
Web

Compassを使って効率的にCSSを書こう!!

前回、Sassとは?というお話を書きました。 次はSassのインストールと使い方を書こうかと思いましたが、インストールの前に、Compassのご紹介。 CompassをインストールすればSassのインストールもできるので、Compass...
Web

Sassで効率的なCSSコーディング!今さらだけど便利なSassについて

ウェブ制作に携わっている方は、ほとんどの方がご存じだと思います。 ウェブ制作に携わらない方は使わないので知る必要ないか。 という事は、知る必要がある人はみんな知ってるSass。今さら感ハンパないですが、そのSassについて。 僕は...
スポンサーリンク