Webページ作成のベースになる、HTML5の必要最小限の構成にしたテンプレート、各ブラウザのスタイルを正常化・リセットするスタイルシート、レスポンシブ対応の柔軟なグリッドをつくるスタイルシート、さまざまなCSS3アニメーションを簡単に利用できるスタイルシートを紹介します。 HTML5で作成する時の必要最小限のテンプレート スタイルの正常化・リセット グリッドをつくるスタイルシート CSS3アニメーション HTML5で作成する時の必要最小限のテンプレート まずは、HTML5でWebページを作成する時にのシンプルなブランクのテンプレート。 A Generic HTML5 Template -GitHub ライセンスはCC0 1.0で、個人でも商用でもクライアントの案件でも無料で利用できます。利用する際に、許可やコピーライトの明記などは必要ありません。 テンプレートはIE9や8以下への最低限の配
スクロールによってさまざまなCSSを変更することができます。 またプラグインのオプションをdata属性に設定できるjs(jquery.dataExtend)を使うとdata属性に指定するだけで効果を与えることができます。 以前も同じようなプラグインを作ってはいたのですが、複雑になりがちだったため なるべくシンプルに、再現したいと思ったことが工夫次第でできる作りにしたいと思い作り直しました。 GitHub: https://github.com/kamem/jquery.scrollParallax Description このプラグインには3つの機能があります。 任意の位置を通過したときに関数を実行する スクロール量に応じてcssを変化させる 移動距離に応じてcssを変化させる DEMO y scroll Requirement jquery jquery.dataExtend ※ jqu
こんにちは、井畑です。 今日は隣の席のデザイナーさんにこれどうやったらいいと思う?って相談された時に思いついたCSSの組み方がなかなかいいなと思ったので、ご紹介します。 かなりニッチですが、どなたかの参考になれば幸いです。 それではどうぞ!! コンテンツは右寄せだけどコンテンツ内のテキストは左寄せでコンテンツは内容が適宜変更されるかもしれない 今回実装したい要件です。 コンテンツ自体は右寄せにしたい コンテンツの中身のテキストは左寄せに コンテンツの中身のテキストは変更することもある(コンテンツの中身の幅は変わることもある) 今回のポイントはコンテンツの幅が変更するかもしれないってとこですね。 コンテンツの中身の幅が変わらなければ超簡単ですが、変わるということなので数値指定するとできないよなーと思い、考えた方法はこちらです。 実装してみた じゃじゃん!右下の「有限会社〜」の部分が実装したか
input type submitでホバー時にボタンの画像を置換する方法をご紹介いたします。 使用する画像は下記になります。 「input.btn_submit」に必要なプロパティを記述します。「cursor: pointer;」はマウスカーソルを指の形にします。「display~height」までは画像置換する際に必要なプロパティです。submitボタンをブロック要素にし、通常時の画像の幅と高さを決めています。「border: none;」はsubmitが元々持っているボーダーを消去しています。「text-indent: -9999px;」はsubmitの「value=”送信”」の「送信」文字を画面外に飛ばしています。「background: url(btn_submit.gif) no-repeat 0 0;」で置換する画像を指定しています。 「input.btn_submit:hov
2023年7月25日 CSS CSSで動かすアニメーションには、私自身まだまだ使いこなせていないプロパティーがたくさん眠っています。その中のひとつが steps というプロパティーでした。これまでよく使っていた滑らかな動作ではなく、段階ごとに要素を動かすことができます。実際にはどんな場面で使えるんでしょうか?今回はそんな steps プロパティーにフォーカスしてみます。 ↑私が10年以上利用している会計ソフト! steps の記述方法 steps は animation や keyframes プロパティーとともに利用します。steps() のカッコの中には、いくつの段階を経て動作させるのかを記述。例えば5段階で変化させるなら、steps(5) と記述します。 .element { animation: img-move 5s steps(5); } @keyframes img-move
週末の自由工作でマテリアルデザインのカラーパレットを使いたいんだけど、さすがにこれを自分で CSS ファイルに書くのはダルイなぁと。 Color - Style - Google design guidelines material-colors だけど、同じことは他にも考えている人がいるはずで、誰かがつくってくれてるんじゃない?と思ったら、あった。(ありがとうございます) shuhei/material-colors 使い方 CSS, Sass, SCSS, Less, Stylus, JSON, JavaScript 等いろんな言語から使えるようになっている。例えば SCSS からは $md-red-100 とか定義された変数を使う感じ。 中身は dist 配下を見れば分かる。 https://github.com/shuhei/material-colors/tree/master/
ハンバーガーメニューは「メニューだとわかりづらい」と言われることも多いですが、特にスマートフォンサイトなどでは実装する機会はやはり多くはなってきているので、今回はそのハンバーガーメニューをクリックした時(メニューが展開しているときなどのアクティブ時)のエフェクトをCSSで実装したサンプルをまとめました。 よく見る「×」のようなクローズボタンに変化するものから矢印に変化するものまで全12種類あります。
CSSで片方の幅が可変で、もう片方の幅が固定というタイプのカラムレイアウトを実装する方法を全4パターン紹介します。 対象ブラウザやOSなど環境によっては使えないものもありますが、全て同じ見た目(レイアウト)を実装することができます。 HTMLと実装イメージについて 紹介する方法はいずれも下記のようなHTMLを使用したものになり、ご覧のようにメイン・サイド・それらを括る親要素の3つのdiv要素で実装していきます。 <div class="wrapper"> <div class="main"> <!-- 可変 --> </div> <div class="side"> <!-- 固定 --> </div> </div> また、今回はこのイメージのようにdiv class="main"(青い背景色の領域)を可変、div class="side"(赤い背景色の領域)を固定にそれぞれする方法で、固
こんにちは、フロントエンドエンジニアのあつこです(ΦωΦ) 今回は、現行サービスのCSSをリファクタリングした話とどんな影響があったかをまとめたいと思います。 もくじ 経緯とか 実際にした5つのこと まとめ 経緯とか 開発期間約9ヶ月、リリースして1年の現行サービスのCSSが大変なことになっていたので リファクタリングすることにしました。 ちなみにリファクタリングとは、 ソフトウェア開発では、ソースコードの作成が進むにつれて、中途での設計変更やバグフィックスなどでプログラムは冗長で汚いものとなっていくことが多い。これらの問題点を解決し、将来の仕様変更に柔軟に対応できるようソースコードの手直しを行うことを「リファクタリング」という。 リファクタリングとは|refactoring - 意味/解説/説明/定義 : IT用語辞典 ということのようです。 問題点は大きくわけて2つ。 1. コーディン
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く