CSSでフルスクリーン(全画面) ＋ 縦横中央配置レイアウトを作る【3ステップ + おまけ】
シングルページのWebサイトを作るとき、要素をフルスクリーンで表示させるレイアウトを取り入れることもあるかと思います。フルスクリーンレイアウトを実装する際に、ウィンドウの幅や高さをJavaScriptを使って取得したりしていましたが、CSSを使うとそんなことをする必要もなく、いとも簡単に実装できることが最近わかったので紹介します。ついでにフルスクリーンレイアウト時に使いたい「縦横中央配置」、「背景画像のフルスクリーン表示」の実装方法についても紹介します。 フルスクリーンレイアウトのデモ http://codepen.io/maechabin/full/MmOGWb/HTMLの用意ベースとなるHTMLは以下の通りとします。「2つのp要素を含んだ、3つのdiv要素」を用意します。それぞれのdiv要素をフルスクリーンサイズにして縦横中央配置にするのが目的となります。 <div class="bo
LPサイトを仕事でコーディングするために覚えておきたいjQueryやCSSの構成要素を21個！ | HPcode（えいちぴーこーど）
LPサイトを仕事でコーディングするために覚えておきたいjQueryやCSSの構成要素を21個！ 2018 10/04 LPのコーディング案件はとても多くて、数をこなしている内に「よく出くわすパターン（構成要素）」みたいなものが分かってきました。 今コーディングを勉強しているほとんどの方は仕事に繋げるためにHTMLやCSS、JavaScriptを勉強していることと思います。ただ、いったい何ができれば仕事ができるレベルなのか分からない、という疑問や不安は常に胸の中にあるかと思います（わたしもそうでした…） コーダーとしてLPの仕事をする上で覚えておきたい構成要素を21個紹介します。こんなの当たり前に扱える、空見では書けないけどちょっと調べれば問題なくできるレベル、など、を考えながら見てもらえたら思います。 ちょっと弱いかも…と思う部分があれば、参考のリンク先を辿ったり単語でググったりして復習し
Webコーダーの仕事内容は「デザインカンプをHTMLやCSSで再現すること」 | HPcode（えいちぴーこーど）
Webコーダーの仕事内容を一言で表現すると、 デザイナーが作成した「デザインカンプをHTMLやCSSで再現すること！」です。 これができれば仕事として成立します。 この記事では、フリーのWebコーダーであるわたしが行っている仕事内容や仕事の流れなどを紹介していきます。 これからWebコーダーを目指している方は自分ごととしてイメージしてみてください。そして自分に足りない部分を洗い出してもらえたらと思います。 Webコーダーの仕事はデザインカンプをHTMLとCSSで再現すること タイトルとほぼ同じ見出しで恐縮ですが、Webコーダーの仕事は「Webコーダーの仕事はデザインカンプをHTMLやCSSで再現こと」これに尽きます。あと、JavaScriptで簡単な動きの再現もWebコーダーの仕事になりますね。 これが、Webコーダーとしての最低ラインになります。 デザインカンプってなに？ デザインカンプ
【第3弾】少しのコードで実装可能な15のCSS小技集
2022年4月27日 CSS CSS小技集シリーズの第3弾！「【第2弾】少しのコードで実装可能な20のCSS小技集」から3年が経ち、さらに便利でサクッと使えるコードが続々登場！特にこれまではJavaScriptで実装していたものがCSSだけで実現できるようになったりと、進化が凄まじいです。初心者さんからベテランさんまで要チェック！ ↑私が10年以上利用している会計ソフト！ 目次 スムーズスクロール スクロールスナップ スクロールすると要素を固定 画像をトリミング CSSで計算式を書く テキストを円形に回り込ませる Webフォントを使った時の表示遅延を回避する テキストに波線を引く テキストの上に記号を表示 表のセルの幅を統一する 入れ子になったリストもカウントする フォームのプレースホルダーの文字色を変更 しましまのライン メディアクエリーを使わずにタイル型レイアウトをレスポンシブに対応
★★【保存版】Font Awesomeの使い方まとめ：Webアイコンフォントを使おう
今回はFont Awesomeという超便利なサービスの使い方をまとめます。後半ではアイコンにさまざまなアニメーション効果をつける方法も解説します。 1. Font Awesomeとは？ ざっくりというとウェブサイトやブログでWebアイコンフォントを表示できるようにしてくれるサービスです。
CSSで文字にボーダー(縁取り)をつけたい。 - かもメモ
Illustratorの線やPhothopのレイヤースタイルの境界線みたいに文字にボーダー(縁取り)をつける方法のメモ。 といっても、イラレの線やPhoshopの境界線みたいにバチッとした縁取りを付けるのは難しそうです。 1. text-stroke を使う方法 text-stroke サポート状況 IE以外はそこそこサポートされてきてるっぽい。 プロパティには-webkit-のブレフィックスが現状では必要。(なぜかFirefoxも。-webkit-text-stroke ってプロパティ名？) 書き方 /* width | color */ -webkit-text-stroke: 2px #000; 又は -webkit-text-stroke-width: 2px; -webkit-text-stroke-color: #000; ボーダー(縁取り)は文字の内側に付く ※ color:
コピペでできるCSSボタンマウスオーバーエフェクト集 | aekana
CSSで表現できるボタンのマウスオーバーのエフェクトをまとめました。 ボタンのデザインを充実させるとクリック率・コンバージョン率アップにも繋がります。 そのままコピー＆ペーストできますので、時間短縮にぜひご活用ください。 ※デモはPC環境でご覧ください 2018/8 CSSボタンデザイン記事を追加しました。 コピペでできる立体的なCSSボタンデザイン集 CSSだけで表現できる押したくなるボタンリスト 1. ボタン基本形 まずはボタン基本形です。.btnに共通のCSS、.btn+連番にオリジナルのCSSを記述します。 フォントの大きさや種類は適宜変更してください。 !importantは当サイトに合わせた記述ですので、基本的に外してください。 <a href="" class="btn btn01">HOVER</a> .btn { padding: 15px 70px; font-weig
マウスオーバーエフェクト
ボタンや画像にカーソルを乗せた時の反応って大事ですよね。リンクするエリアにカーソルを合わせた時に、カーソルが指のアイコンに変わったり、テキストの色が変わったりすれば、カーソルが乗ったという事が認識しやすくなります:)。 それに加えて、ちょっとしたエフェクトがあれば、温度や感触や、世界観まで伝えられるかも。 ふわっとする 下のサンプルみたく、:hoverを使ってスタイルを指定しておけば、カーソルが乗った時に、そのスタイルが適用されます。 けどそれだけだと、カチッと切り替わるだけ。 a:hover { color: #dc6688; text-decoration: inherit; } サイトの雰囲気にもよるけれど、もちょっとだけ柔らかい印象にしたいなって時には、ふわっとするとよいかもです。文字色の変わり方と、下線の消え方を滑らかにすることで、ふわっとした感じになります:)。 この切り替わり
コピペで実装OK、最新トレンドを押さえたすごい HTML/CSS スニペット40個まとめ
ますます進化するウェブデザインの世界を体感でき、コピー&ペーストで利用することもできる HTML/CSS スニペットをまとめてご紹介します。ただいま流行中のWebトレンドの実装を可能にする最新レイアウトから、どんなプロジェクトにも活用したくなるエフェクトやテクニックなどを中心にまとめています。 「Run Pen」をクリックすることで読み込みが開始されます。右下に表示された「Return」で再読み込みし、左上のHTML/CSS/JSタブを切り替えることで、それぞれのスタイリングを確認できます。実際にカスタマイズしたいときは、右上の「Edit on Codepen」をクリックしましょう。 詳細は以下から。 コピペでOK、最新トレンドを押さえたすごい HTML/CSS スニペット40個まとめ 01. Fixed Images That Fades as You Scroll 画面を２分割し、スク
3つだけ覚える「flexbox」の使い方 - Qiita
3行で説明、flexboxとは CSS3から導入されたfloatに変わる新しいレイアウト方法です。 伸びたり並んだりします。 俺、flexboxのプロパティ何回ググるんだろう問題 flexboxのプロパティめっちゃ多いですね。正直覚えきれませんし、覚えるつもりもなくなってきます。それに、別に複雑なことをやりたいわけではないですね。 具体的には、下記のようなことができれば十分なんです。 リキッド2カラムレイアウト スティッキーフッタ（最下部に吸い付くフッタ） この程度のものであれば、覚えるべきflexbox関連のCSSプロパティの数も絞れそうです。 覚えておくべき３つのプロパティ display: flex flex: 1 flex-direction: column これだけでわりとこなせます。以下で、実例をもとに説明します。 2カラムレイアウト さて、よくある2カラムレイアウトです。 で
【コピペOKのサンプル付き】Flexboxはこの5パターン覚えておけば大丈夫！ | HPcode（えいちぴーこーど）
Flexboxのプロパティってめっちゃ多いですが、全部を覚えなくても実務レベルで使うことはできます。わたしも最初のころはFlexboxのプロパティを試していましたが、実際に使うようになって「あれ、ほとんどのプロパティは使わなくて実装できるよね？」ってなりました。 もちろん全部を使いこなせるに越したことはないですが、まずは使うところから覚えるのが勉強の王道だと思います。 この記事では、現役コーダーのわたしが実際によく使うFlexboxのパターンを5つ厳選しました。これから勉強する方は、まずはこの5パターンから覚えていくことをおすすめします！ Flexboxで覚えるべき5パターン 以前ツイートしたのですが、普段コーディングを仕事にしていても、ほぼこの3パターンで足ります（どんだけ簡単なコーディングしているだ！ってツッコミは禁止） 今回は、この3パターンに2パターン加えました。おそらくシンプルな
jQueryとCSSのtransitionで可視範囲に入ってからアニメーションさせる方法
可視範囲になってから表示されたり動いたり、スクロールに応じてアニメーションさせる方法を紹介します。動きをつけて目を引くことで、効果的に伝えることができるかもしれません。 以前、「jQueryを使って、スクロールしてコンテンツが現れたときにアニメーションさせてみる｜Webpark」という記事で同じようなものを紹介したのですが、デモが気に入っていない、アニメーションが1度きりということで作り変えました。 まずはサンプルをご覧ください。スクロールするとアイコンとテキストが順番にフェードインします。 このサンプルで使われている、画面いっぱいに表示する方法と、上にスクロールしたときに現れるメニューは以前紹介しています。気になる方はどうぞ。 画面サイズに合わせて高さを指定する3つの方法｜Webpark jQueryで作る、下にスクロールで消えて、上にスクロールで現れる固定メニュー｜Webpark とい
疑似要素で下線を引く | IT工房｜AI入門とWeb開発
テキストに下線を引く方法としては「text-decoration: underline」を使用しますが、装飾的な下線としては使い勝手が悪いです。そのため「border-bottom」を使用したりします。けれども、これも決して使い勝手の良いものではありません。 今回は疑似要素を使用して下線を引く方法です。この方法なら二重線、三重線にも対応できます。 疑似要素で下線を引く方法 「::before」と「::after」にそれぞれ新しい要素を作成してそれに対して線を引く仕組みです。 疑似要素で下線を引くサンプル このサンプルではh1要素に疑似要素「::before」と「::after」を使用して「content: “”」で空の要素をひとつ作ります。 「left:0」「right:0」にすることで要素にUAの幅いっぱいを指定します。そしてその空の要素に下線を引きます。 このままだと「::before
CSS GridとFlexboxを使ってメディアクエリなしでレスポンシブにレイアウトする方法
レスポンシブなレイアウトにはメディアクエリが欠かせないわけですが、CSS GridやFlexboxを使えばメディアクエリなしでもレスポンシブなレイアウトが可能です。メディアクエリが全くいらなくなるということはないと思いますが、CSS GridとFlexboxを使えば、メディアクエリの記述を減らす方法があります。しかもコンテンツの幅に合わせて中身のレイアウトを調整するようなエレメント・クエリ的な使い方も、ある程度なら実現できます。 応用すれば今後のレスポンシブなレイアウトのCSSの組み方を変えてしまうような方法です。 ※デモはFirefox 58.0.2、Chrome 64.0.3282.140、Safari 11.0.3でテストしています。 CSS Gridを使ったレスポンシブレイアウト CSS Gridで以下の2つのCSS関数を使うと、メディアクエリなしでレスポンシブなレイアウトが実現で
CSSで要素を上下や左右から中央寄せする7つの方法
こんにちは。めぐたんです。 みなさんは「CSSで中央寄せする方法」といえば何が思いつくでしょうか？ 馴染みがあるのは、横方向に対して中央寄せを行うtext-align: center;やmargin: 0 auto;。では縦方向のときは？となると…途端に「なんだっけ」と止まってしまう方もいるかと思います（私です）。 そこでCSSの「中央寄せ」について、レスポンシブWebデザインにも対応しやすい7つの方法をまとめてみました！ 当記事で紹介していく方法はすべて、下記のHTMLを共通して使用していきます。 <div class="outer"> <div class="inner"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolo
タイル（カード）デザインの CSSコードをパターン別にご紹介
こんにちは、リードスペースです。 よくギャラリーや記事の一覧などが並んだ、タイル（カード）を並べたようなレイアウトを見かけませんか？ こんな感じで無限にカードを並べたい時の実装方法をいくつかパターンでご紹介します。 目次 みんなお馴染み float で実装する方法 パターン1：疑似クラス：nth-child() で余白を調整して並べる パターン2：ラッパーを1個入れ、はみ出た部分をネガティブマージンで隠す パターン3:子要素をインライン扱いする パターン4:レイアウトモジュール・フレックスボックスを使う パターン5:レイアウトモジュール・グリッドを使う まとめ みんなお馴染み float で実装する方法 昔ながらの float で実装する方法です。 float は、要素を親ブロックの左右どちらかに沿うように設置し、テキストやインライン要素がその周りを回りこめるようにするプロパティです。 余
HTML, CSSでのカードデザインサンプル 4種 - デザインのメモ
CSSでのカードデザインを何種類か作ったので紹介します。 作ったのはこんな感じのデザインです。 <!-- ▼ 共通CSS ▼ --> <style type="text/css"> body { background-color: #eee; } img, p { margin: 0; padding: 0; } p { font-size: 100%; line-height: 1; } </style> サンプル1 タイトル 本文 <!-- ▼ デザイン 1 ▼ --> <style type="text/css"> .card1 { width: 300px; margin: 20px; border-radius: 5px; background-color: #fff; box-shadow: 0 3px 6px #ccc; } .image1 { width: 100%; he
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
画像の上におしゃれに文字やボタンをのせる方法（CSS）
Redirecting
https://www.okuni.me/entry/css-slide-animation-keyframes
