今回は見出し（h1〜h6タグ）のオシャレなデザインサンプルを68つ紹介します。CSSコードをコピペすればそのまま使うことができます。もちろん自分好みにカスタマイズして使って頂いても構いません。

2017年1月16日 CSS, Webデザイン, スマートフォン 画面を大胆に縦に割ったレイアウトのWebサイトが流行中。複数のセクションで分割しているサイトもありますが、中でも多く取り入れられているのが真っ二つに分けている半分割のレイアウト。インパクトがあって注目を集められる上、スクロールをせずに複数の情報を表示できます。今回はそんな縦半分割のレイアウトを使ったWebサイトの作り方と、実例をいくつか紹介します。 ↑私が10年以上利用している会計ソフト！ 縦に半分割しているWebサイトを作ってみよう！ Dropboxのガイドラインページでは、ユーザーガイドと管理者ガイドが同レベルの重要度としており、ふたつのコンテンツを横並びにして表示しています。このように複数のコンテンツを同じ重要度で見せたい時に縦分割のレイアウトが活かせます。 幅の狭いデバイスで見るとカラムが縦並びに変更されます。 今回

Webページを制作にする時に、マージンやパディングをどのようにつけるか悩むことがあります。2カラムの隙間は、左パネルの右マージンorパディングなのか、右パネルの左マージンorパディングなのか。 Web制作の今までの考え方がきっと変わる、モジュール式のアトミック デザインにおけるHTMLとCSSの実装のロジックを紹介します。 Learning from Lego: A Step Forward in Modular Web Design 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、著者様・元サイト様にライセンスを得て翻訳しています。 最近のWeb制作の手法は、数多くあるフレームワークやUIキットからあらゆる種類のコンテンツのブロックを組み立てています。しかしながら、モジュール性と汎用性はまだWeb要素レベルでは達成されていないと言えるでしょう。 LEGOブロックの考え方を

CSS3のFlexboxをはじめ、CSSアニメーション、CSSのセレクタ、jQuery3, ES6, Bootstrap4など、フロントエンドのマークアップやコーディングに役立つチートシートを紹介します。 ブックマークしておいて、PDFや画像をダウンロードして、すぐに確認できるようにしておくと便利ですね。

Webはその進化が早いと言われ、中でもCSSは日々、新しいテクニックや驚くべき実装方法が発表されています。新しいものに目を向けることはもちろん大切です。しかし、すでに利用可能なもので見落としている有用なテクニックがあるかもしれません。 有用なのに、意外と見落とされがちなCSSのテクニックを紹介します。 9 Underutilized Features in CSS 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 1. レスポンシブ対応に便利な「calc()」 2. 目からウロコの「@media」の使い方 3. カラー指定を変数でおこなえる「currentColor」 4. フォームにかなり便利「:valid, :invalid, :empty」 5. ナンバリングするためにol要素は必要ない「counter」 6. 中身が不明な

CSS3 が主要ブラウザに対応したことから、これまではむずかしかったアイデアやコンセプトも、手軽にスタイリングできるようになってきています。今回は、背景デザインにスパイスを加えるエフェクト用コードスニペットを、コード共有サイト CodePen からピックアップしまとめています。 コピペで利用できる手軽なものから、これってどう表現するんだろうという面白スタリングまで、注目をあつめるテクニックを中心に揃えています。デザイン制作に悩んだときに活用してみてはいかがでしょう。 詳細は以下から。 背景デザインを楽しくする、参考にしたい HTML/CSS スニペットまとめ ※　デモが動かないときは、「RETURN」ボタンをクリックすることで、再読み込みされます。 ※　ページの読み込みに多少時間がかかります、すこし待ってからスクロールするとスムーズに表示されます。 Pure CSS Cinema Effe

以前、メニューバーをトグルメニューと両立してレスポンシブスタイルにするカスタムを書きました。 www.yukihy.com トグルメニューは、ボタンを押すと上下にスライドするようなものでしたが、　現在このブログでやっているみたいに、横からのスライドにして、なおかつPC版では子メニューも設定できるようにしてみたいと思います！ カスタマイズを行う際は、必ず以前のコードをメモ帳などにバックアップをとっておくようにしてください。 実装図 注意点 カスタマイズ CSS HTML&jQuery HTMLにリンクを入れる その他のカスタマイズ 色を変える グローバルメニューの横幅を変えたい グローバルメニューとトグルメニューの変えるタイミングを変えたい まとめ 実装図 完成図はこんな感じです。ブラウザのサイズが広いときには、子メニューまで出せれる一般的なグローバルメニューで、 ブラウザサイズが狭くなると

スタイリングといっても見栄えを大きく変えるとかではなく、ほとんどがただのプロパティ説明みたいな感じになっていますが、サイト制作時に覚えておくとテキスト周りをいろいろと変更できるCSSのプロパティや使用する頻度が高そうなスニペットみたいなものをひと通りまとめてみました。 紹介するもの全てがひと通りのブラウザで自由に使えるわけではありませんが、上手く利用すれば今まで画像を使用していた見栄えをCSSだけで再現できたり、複雑な組み方をしたりJavaScriptを使って実装していたりしたものがCSSのみでシンプルに実装できたりします。 November 27, 2015 追記 前川（@maepon）さんが、このエントリーでは記載していなかった各種プロパティのブラウザ対応状況についてまとめてくださいました。 OS・ブラウザの種類やプレフィックスの有無、Can I useの各種プロパティページへのリンク

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で実装したサンプルをまとめました。 よく見る「×」のようなクローズボタンに変化するものから矢印に変化するものまで全12種類あります。

2017年5月25日 CSS FlexboxとはFlexible Box Layout Moduleのことで、その名の通りフレキシブルで簡単にレイアウトが組めちゃう素敵ボックスです。前々からあった技術ですが、ブラウザーによって書き方が違ったり、仕様がころころ変わったりと、イマイチ一歩踏み出せない感があったFlexbox。しかしようやくモダンブラウザーでの利用に難がなくなり、実務にも充分使えるようになりました。今回はそんなFlexboxの魅力と使いドコロを、デモ付きで紹介していこうと思います！ ↑私が10年以上利用している会計ソフト！ 対応ブラウザー Can I use…で紹介されているように、現行のモダンブラウザーでは問題なく利用できます。ただし、Safari用に -webkit- のベンダープレフィックスが必要です。IEについては11から正式に対応。IE10にも対応していますが、書き方が

これからのプロジェクトに使ってみたくなるような素敵なアイデア満載のクリエイティブなスタイルシートのテクニックを紹介します。 今年もCSSの進化がすごかったですね。

Emmetは、Zen-Codingの次期バージョンの名前です。 Zen-CodingはHTMLの記述方法が取り上げられることが多いですが、個人的には、CSSの入力補助こそ真価が発揮されると思っています。 私は、EmmetまたはZen-Codingがなければ、CSSのプロパティを打つのが苦痛なほどです。 Emmetから、さらに多くのプロパティに対応し、数値も含めて展開できるようになりました。CSSの記述がより使いやすくなったので、紹介します。 Zen-Codingから使える CSSの展開は、ほとんどのZen-Codingから使えます。 Emmetではさらに使いやすくなりましたが、Emmetは現在開発中のため、不安定な部分があります。不安な方は、Zen-Codingをおすすめします。 プロパティに、ショートコードが用意されており、+でつないで展開(Expand Abbreviation)する形

※この記事は2014年2月4日に執筆された記事です。現在は仕様が異なる可能性があります。 CSSを効率的に書ける言語として昨今話題のSass。 これから導入をお考えの方に向けて2時間でマスターできる初心者向けのSass講習スライドを公開致します。 普段CSSを書く人も書かない人もSassがどういうものかを知る良い機会ですので、是非ご覧ください。 スライドに沿って実践すればSassの基本を短時間でマスターできます！ この講習では目で見るよりも実際に触れる事で理解が深まるよう、実習スタイルを取っています。 実習に使うファイルセットはこちらからダウンロードして上記のスライドと合わせてお使いください。 https://webnaut.jp/download/markup_140204/sass.zip（3.5MB） Sassの良さを活かすためには、チーム全員がSassを理解することが大切 Sass