「画像のサイズ変更」「画像の縦横比を維持したままの指定方法」「画像のトリミング」の3点を中心に初心者のかた向けに解説。 3点の基礎知識に加えて、理解しやすく、すぐ実践的に使用できるようになる為、各方法をサンプルコード付きで解説。 実際に手を動かして学ぶことができますので、初心者の方も安心して読み進める事ができます。
【CSS】画像のサイズ・縦横比・トリミング指定方法（初心者向け）
「画像のサイズ変更」「画像の縦横比を維持したままの指定方法」「画像のトリミング」の3点を中心に初心者のかた向けに解説。 3点の基礎知識に加えて、理解しやすく、すぐ実践的に使用できるようになる為、各方法をサンプルコード付きで解説。 実際に手を動かして学ぶことができますので、初心者の方も安心して読み進める事ができます。
CSSで何番目や何個分を前から、後ろから自由自在に指定するための疑似要素まとめ - YCOMのホームページの制作・運営に役立つブログ
わかりやすくまとめたつもりなので、ある程度わかってる人はこの表があれば備忘用には充分だと思います。 ここから下は、初心者のために補足的に説明入れておきます。 -child と -of-typeの違いの話 この特定の要素に対する指定の方法は大きく2つの指定方法があって、要素名つまりはタグの種類にかかわらず対象とする方法と、特定の要素に対してだけ（<P>だけとか）対象とする方法があります。 -childは要素の種類にかかわらず全てを対象として、-of-typeは特定の要素に対してだけ対象になります。 こんな感じですね。 図を見てもらったらわかるように、黄色いのが対象になる要素です。 複数の要素が混在しても、-childではすべての要素が対象になります。 -of-typeでは、その中の特定の要素（タグ）が対象です。 説明だけではわかりにくいので、以下の説明でのコードの例を簡単に見てみます。 最初
CSSでborderの上に見出しを重ねたボックスを作る - Qiita
.caption_box{ position: relative; margin-top: 1em; padding: 1em 2em; border: 1px solid black; } .caption_box .caption{ position: absolute; top: 0; left: 0; font-size: 1em; padding: 0 1em; margin: 0; background-color: white; transform: translateY(-50%) translateX(1em); } 解説 親要素にborderとposition: relativeを指定します。 子要素にposition: absoluteを指定、配置したい位置に動かします。 左上に配置する場合: top: 0; left: 0; 右上に配置する場合: top: 0; r
CSSのcalcで片側だけグリッドガイドライン外へ飛び出したカラム ｜ Tips Note by TAM
中央揃えになっている固定グリッド（Fixed grids）から片側だけ外へ飛び出させた装飾のカラムを リキッドレイアウトのレスポンシブデザインでスタイリングする方法です。 IE11も対応している CSSの calc() で相対値と絶対値をかけあわせたサイズを設定するので 画面幅がかわっても、片側は中央揃えのカラムとツラをあわせたまま（端をそろえたまま） もう片側は画面端までのびたサイズをキープできます。 ※IEはpaddingの仕様に落とし穴があったので、最終的にはIEバグ対策のJavaScriptも併用しています。 INDEX よくある中央揃えのレスポンシブなカラム アシンメトリーなカラム まとめ サンプルソース とりあえず実物から見てみたい方は、CodePenのサンプルソースからどうぞ！ See the Pen Asymmetry Column by webdev (@webdev-j
CSSボタンデザイン120個以上！どこよりも詳しく作り方を解説！
なぜCSSでボタンを作るのか？その前に、なぜCSSでボタンを作るのか？について少しだけ考えたいと思います。 簡単に言ってしまえば、 軽い！拡張性がある！解像度の心配がない！簡単！と言った理由ではないでしょうか？ 画像でボタンを作ることも多いと思いますが、「画像じゃないほうがいいなあ」と思うことも多いと思います。 もちろん、デザイナーから上がってきたデザインデータからボタンを切り取って、HTMLに設置して、CSSでホバーはopacity:0.8、とかやれば簡単ではありますが、デザインツールの進化やレスポンシブの一般化に伴い、そういったイケてなくて古臭いやり方はあまり望ましくないです。 特にWebの場合、テストの繰り返しが必要ですが、画像でボタンを作るとなるとテスト用にいくつもの画像を作らなくてはいけません。色やテキストを変えるとなると画像すべてを修正する必要があります。しかし、CSSボタンで
flexboxで要素の順番を入れ替える。 - Qiita
flexboxでbox内の順番を入れ替える、cssを紹介します。レスポンシブなサイトを使う時に結構使ったりするので覚えておくと便利です。 flexboxの入れ替え、orderプロパティ 以下を使います。
CSS | display:flexで横並びの個数を固定して折り返す方法 | 1 NOTES
CSSのflexbox（display:flex）で横並びで個数を固定して折り返す方法を紹介しています。 See the Pen CSS flexbox Fix the number by yochans (@yochans) on CodePen. display:flexで横並びの個数を固定して折り返すflexbox（display:flex）で横並びの個数を固定して折り返すサンプルコードです。 上記サンプルのHTMLコードです。 こちらを利用して実装方法を紹介しています。 <div id="container"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> </div>flexboxは個数を折返しまでの直接指定する事はでき
【検証】スマートフォンで読み易いfont-sizeとは？ | SEO対策なら株式会社ペコプラ
フォントサイズと行間は、ユーザーにコンテンツをストレスなく読んでもらう為の重要な要素のひとつです。 PCサイトでは、読みやすさはもとより、デザインも考慮した文字の使い方が多いと感じる一方、スマホ化されているサイトでは比較的どれも同じぐらいのフォントサイズが使われている為、ここは改めてどれぐらいのフォントサイズが読みやすく、よく使われているのかを検証しました。 読みやすいフォントサイズとは？読み物系30サイトを検証 検証するにあたり、まず「読みやすい」とは？ 読みやすい=多くの人が読んでいる=有名・人気サイト！ と言うことで、今回は記事を読ませる事を目的とした、ポータルサイト、バイラルメディア、キュレーションサイト、WEB系のブログなどから30サイトをピックアップしました。 検証方法は、本文と見出しのフォントサイズと行間をWhatFontというgoogleの拡張機能を使い調べます。 1番多か
現場で使えるFlexboxレイアウト12選 | BUILD Journal
現場で使えるFlexboxレイアウト12選Update2023.05.12Release2021.06.24Coding HatenaにシェアするTwitterにツイートするPocketにストックするFeedlyに登録する 現場で使えるFlexboxレイアウトを12パターン紹介します。flexboxを紹介する記事はたくさんありますが、知識のみで実例付きで紹介されているページはあまり見かけなかったので、本記事にて詳しく紹介していきます。 flexboxに慣れていない方だけではなくコードを短縮化させたい方も対象の内容となっております。ぜひご一読ください。 flexboxを使った横並び1行レイアウトflexboxを使った横並び1行レイアウトカードUIでよくある横並び1行レイアウトのFlexbox実装。同じ横幅のカードを等間隔で配置するもので、間の余白ももちろん等間隔。これを使う機会は多いので確実
HTMLとCSSのコピペでできるボタンデザイン50選
CSS /* 001 */ .button001 a { background: #eee; border-radius: 3px; position: relative; display: flex; justify-content: space-around; align-items: center; margin: 0 auto; max-width: 280px; padding: 10px 25px; color: #313131; transition: 0.3s ease-in-out; font-weight: 500; } .button001 a:hover { background: #313131; color: #FFF; } .button001 a:after { content: ''; width: 5px; height: 5px; border-top
スクロールすると上から降りてくる
HTML <body>直下 <div class="gmenu"> コンテンツ </div> css .gmenu { position: fixed; width: 100%; z-index: 100; top: -100px; //gmenuの高さ height: 100px; } .gmenu.fixed { position: fixed; top: 0; left: 0; } js $(function () { var headNav = $('.gmenu'); $(window).on('load scroll', function () { if ($(this).scrollTop() > 500 && headNav.hasClass('fixed') == false) { headNav.css({ "top": '-100px' }); headNav.add
【jQuery】ページ内リンクでスムーズスクロール（固定ヘッダーがあったら） | 125naroom / デザインするところ（会社）です。
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> $(function(){ var headerHeight = $('header').outerHeight(); // ヘッダーについているID、クラス名など、余白を開けたい場合は + 10を追記する。 var urlHash = location.hash; // ハッシュ値があればページ内スクロール if(urlHash) { // 外部リンクからのクリック時 $('body,html').stop().scrollTop(0); // スクロールを0に戻す setTimeout(function(){ // ロード時の処理を待ち、時間差でスクロール実行 var target = $(urlHash);
よくあるグローバルナビのCSSをじっくりコーディング
WEBサイト制作でよくある見た目のグローバルナビのHTMLとCSSをコーディングした際、考えることが予想よりも多くありました。コーディングの流れをじっくり解説します。 はじめに グローバルナビに以下のようなデザインが指定されているウェブサイトのHTMLとCSSのコーディングを行なっていました。（デザインは仮のものです） よく見る形だし、さくっと組めるかなと着手前は考えたのですが、やってみたら予想よりも考えなきゃいけないことが多くありました。CSSの良い復習にもなったので、自分へのメモも兼ねて、コーディングの流れをじっくり解説します。 なお、フレックスボックス（display: flex）を多用したコーディングを解説しますので、対応ブラウザにはご注意ください。 デザイン仕様の確認 コーディングを始める前に、デザインカンプからコーディングに必要な情報を抜き出して整理します。 項目の横幅 まず、
【jQuery】上からヌルヌル出てくるドロワーメニューを一から自作するには？？ | KUSU'S SITE
以前、「【jQuery】スマートフォンサイトで使える！上からヌルッと出てくるドロワーメニューの実装方法」にてjQueryプラグインを使ったドロワーメニューの設置方法についてご紹介しましたが、今回はプラグインを使わず自分でjQueryを設定してドロワーメニューを設置する方法についてご紹介したと思います！ なお作成する流れとしては デモページ まずはデモページはこちらになります！ デモページ HTMLを記述する それではまずHTMLを記述していきましょう(^^) 今回は上のデモページと同じソースで解説したいと思います！ <div class="head-bar"> <a class="menu-btn"> <span></span> <span></span> <span></span> </a> </div> <ul class="sp-menu"> <li><a href="">メニュー<
簡単実装！スマホ用のハンバーガーメニューの作り方
ハンバーガメニューってGoogleで調べると今のところ検索上位に否定的な意見が出てますよね。 たしかにスマホサイトは出た時はただの三本線がメニューを広げるボタンって分かりづらかったと思いますが2017年になる頃にはスマホサイトに対するリテラシーが広がっていて使用に問題ないのではないでしょうか。 今回、簡易的サイトで作る用事があったのでメモ代わりに作り方を記したいと思います。 まずは完成系はこちら↓ DEMOページ まずは下記のようなhtmlとcssを用意しました。 HTML <header> <div id="header-area"> <h1>◯◯◯◯</h1> <div class="logo"> <a href="toplink_1"><img width="320px" height="42px" src="" alt="ロゴ"></a> </div> <!-- 768px以上で表
かっこよく見せたい！jQueryでスライドショーを設置する方法【初心者向け】
スライドショーを実装できるライブラリ スライドショーを実装できるライブラリとして代表的なものは以下です。 slick Felickity Owl Carousel 2 Siema Glide jQuery Brazzers Carousel Plugin それぞれ詳しく解説していきます。 slick.js slickは設置がとても簡単で、数あるスライダー系JSプラグインのなかでも、もっとも有名なライブラリのひとつと言っていいでしょう。 豊富なオプション設定が用意されているので、さまざまなケースに対応ができます。 ブレークポイントの設定もオプションで行えるため、JavaScriptのみで、簡単にモバイルの最適化が可能です。 コーポレートサイトやプロダクトサイトなど、多くのWebサイトで使用されています。 Flickity Flickityは、フリックの動作がとても魅力的なスライダー系JSプラ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【CSS】縦・横・斜めに背景色(background)を2色で分ける方法 | Webエンジニア Wiki
font-sizeをremで指定する時の62.5%について考える【remのメリット・デメリット】 | Webデザイナーどうでしょう
CSSで簡単に実装できるクールなアニメーションドロワーメニュー10選【上下左右・階層・スライドメニュー・ハンバーガーメニュー】
AdobeXDのデータからコーディングをする方法【完全版】