//css img:hover{ transform:scale(1.1,1.1); transition: 1s; } //hoverした時に画像を大きくする hoverして画像を大きくしたいけど親要素からははみ出したくない場合 .sample{ overflow: hidden; display: inline-block; } .sample img:hover{ transform:scale(1.1,1.1); transition: 1s; } NuxtにTailwindcssで書きたいけど慣れてないから普通のcss書いてしまう...。 Tailwindcssはnth-childとか使えないから結構不便なんだよな〜 総合的にはいいのかもしれないけど。。。
どうも7noteです。角がめくれているように見えるCSSを作る方法 CSSを使って、紙の端が丸くめくれているようなCSSを再現します。 ソース index.html <div class="box"></div> style.css .box { width: 150px; /* 幅を150pxに指定 */ height: 200px; /* 高さを200pxに指定 */ border: 1px solid #000; /* 枠線を引く */ position: relative; /* 基準位置とする */ } .box::before { content: ""; width: 20px; /* 幅を20pxに指定 */ height: 20px; /* 高さを20pxに指定 */ background: linear-gradient(-45deg, #FFF 48%, #000 48%, #000 52%, #fff 52%); /* グラデーションで1pxの線を引く */ border-top: 1px solid #000; /* 上に線を引く */ border-left: 1px solid #000; /* 左に線を引く */ box-shadow: -1px -1px 2px #ccc; /* うっすら影を作る */ display: inline-block; /* インラインブロック要素にする */ position: absolute; /* 相対位置に指定 */ bottom: -1px; /* 下から-1ｐxの位置に配置 */ right: -1px; /* 右から-1ｐxの位置に配置 */ } 解説 まずは通常の四角形を作成し、borderを引きます。 その後、疑似要素で小さい四角形を作り、「右下なら反対の左と上」にborderを引きます。 斜め線をborderでは引けないので、グラデーションを使い「白→黒(1px)→白」のグラデーションを作成します。これを斜め方向に指定します。 position指定で-1pxずつずらすことで大きい四角の線を一部隠すことができます。 影は必要であればつけてください。若干の立体感が出ます。 まとめ もっとリアルな感じで作れるかなと思っていたのですが、基本のCSSで作るならこんなかんじでしょうか。 くるとしている感をだすなら画像のほうがいいかもしれませんね。 もしくは画像そのものをめくったように処理するjsなんかもあるのでそのようなライブラリを使うのもいいかもしれません。 おそまつ！ ~ Qiitaで毎日投稿中!! ~ 【初心者向け】WEB制作のちょいテク詰め合わせ
今日はprogateのHTML＆CSS道場コース！ 学習コースはすんなり終えられたからいけるだろうと思っていたけど、やっぱり何も見ずに作るのは難しかった。。 特にpadding,marginなど配置に関わるもの。 これは要素の内側なの？外側なの？と混乱。 position:relativeとかfloatとかflexboxとか出てきたらさらに混乱しそう。。 応用に進む前に振り返っておくことにしました。 ⭐️余白の考え方 padding、margin、borderなどは上記のボックスモデルに基づいている。 HTMLの全ての要素にはborderがあるが、初期状態では表示されていない。 borderの外側余白がmargin、内側の余白がpaddingとなる。 ⭐️padding、marginの使い方 上下左右ではなく、ある方向のみに余白を指定したい場合は padding-top padding-bottom padding-right padding-left を使う。 まとめて書きたい場合は 値を４つ、スペース区切りで指定した場合、上右下左の順で適用される→ padding:20px(上) 10px(右） 20px（下） 10px（左）; 値を２つ指定した場合は上下 左右の順に適用される→ padding:10px(上下） ２０px（左右）； レイアウト崩れを直すとき 要素の幅widthの指定に対して、paddingを追加したために要素はばの合計が100%を超えるとレイアウトが崩れる。 このようなレイアウト崩れはbox-sizing:border-box；で防ぐ。 （box-sizing:border-box;とすると、要素幅(width)にpaddingとborderが含まれるようになるため。） ただしmarginは含まれない。 どうしてもわからないとき、模写とかなら元のページの検証機能を使うと答え合わせと見直しができる。 見たいページの上で右クリック→検証。CSSの欄を下までスクロールすると見たい要素のボックスモデルも見られる。 まだまだ追求すると奥深い、余白。 ただHTML＆CSSを使いこなすにはこの余白を制する重要性が高そう。 使いこなせるまで根気よく使ってみよう。。
ShopifyのTheme開発をやっていて、単純だけど発想に驚いたので共有してみました。 今回は、Liquidのオブジェクトで生成されるHTMLタグにCSSのclass名を指定できないかと思い調べていました！ 言葉ではわかりにくいので、コードを書いて説明 {{ 'ログイン' | customer_login_link }} を使うと <a href="/account/login" id="customer_login_link">ログイン</a> を生成してくれる。 この生成してくれるHTMLにクラスを持たせようと思いましたが {{ 'ログイン' | customer_login_link | class: login-link}} こんなことはできず… replace: を使ってHTMLを置き換え 参考にしたのはこちら https://stackoverflow.com/questions/48530148/add-a-class-to-a-shopify-liquid-link {{ 'ログイン' | customer_login_link | replace: '<a', '<a class="login-link"'}} Liquidのreplaceを使って生成される文字列を置き換えてあげる。 他に見ていた記事には、Liquidのオブジェクトにはクラス名は指定できないと書かれていて、ガッガリした次の瞬間に、感動いたしました。 他のことにも応用できそうなので参考にされてみてください。
はじめに 当たり前ですが、パソコンでwebサイトを閲覧するときは画面がスマホより大きいです。 そしてスマホでwebサイトを見るときはパソコンより小さいです。 そういった様々なデバイスの大きさに対応し、閲覧しやすいデザインのWebサイトを作成する方法があります。 レスポンシブルwebデザイン 画面幅によって見た目が変わるようにWEBサイトやアプリケーションのデザインを設計することです。 作成したHTMLを画面のサイズによってCSSを変える事ができます。 webサイトをレスポンシブル化する為には下記の行程が必要です。 表示領域を設定する 画面サイズによって画像のようにCSSを切り替える 画面サイズごとに適用するCSSを記述する レスポンシブ対応をするためには、画面幅が異なるデバイスに対してWebサイトの表示領域の設定をする必要があります。 この表示領域をviewportと呼びます。 viewportの指定をしないと、スマートフォンで表示した時に、PCサイトのレイアウトをそのままスマートフォンの画面内に収まるように縮小して表示されるので、文字が小さくなり非常に見づらくなってしまいます。 画面サイズを切り替える方法 「画面幅が500pxになった時のみ、h1タグのfont-sizeを5pxにしたい」場合は以下のように記述します。 @media (max-width: 500px) { h1 { font-size: 5px; } } メディアアクエリ@media (max-width/min-width: 〇〇〇px) { } メディアクエリとは、表示された画面幅に応じて適用するスタイルを切り替える機能です。 ブレークポイント ブレークポイントとは、メディアクエリによって規定されるスタイル適用の分岐点を指します。 @media (max-width: 500px){ }の場合は500pxがブレークポイントとなります。 ブレークポイントの値を何pxにするか、また何箇所ブレークポイントを置くかは制作するWebサイトの要件によって変わります。
CSSで吹き出しを作る LPなどで吹き出しを付けたいときのために、簡単に作成する方法をご紹介致します。 まずは、吹き出しの中身を下記のように作成致します。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div class="fukidashi-block"> <p class="sentence">吹き出し</p> </div> </body> </html> <style> .fukidashi-block { text-align: center; background-color: green; padding: 10px 16px; position: relative; border-radius: 10px; color: white; font-weight: 700; } </style> 次に、吹き出しで一番難しく感じる三角形部分。cssにコードを追加します。 これで完成です。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div class="fukidashi-block"> <p class="sentence">吹き出し</p> </div> </body> </html> <style> /* 追加 */ .sentence::before { position: absolute; content: ""; border: 9px solid transparent; border-top: 11px solid green; bottom: -40%; left: 50%; transform: translateY(-50%) translateX(-50%); } /* ここまで */ .fukidashi-block { text-align: center; background-color: green; padding: 10px 16px; position: relative; border-radius: 10px; color: white; font-weight: 700; } </style> 以上になります。
Chromiumを取り入れたことにより、今までの使い辛さが一新され、復活を見事果たしたEdge。しかし、かつてのEdgeHTML版Edge(以降旧Edge)にもいい部分はある。それは<select>要素にTabキーを使ってフォーカスした際に分かる。 なんと、CSSのoutlineを0にしていても、必ずフォーカスした要素の中身を青塗りしてくれるので、フォーカスしているのが分かりやすいのだ。 クロノドライブのHTML辞典さんのサンプルを旧Edgeで開いてみると… これはIEの表示を引き継いでいます。技術的負債の代表格と言えるIEだが、これはGJ。 こちらはChrome。きれいな白だろ。うそみたいだろ。フォーカスしてるんだぜ。これで。なお、中身が同じ新生Edgeも同様。退化してるじゃん。 Firefoxは申し訳程度にふちを着色します。旧Edgeに比べるとしょぼいです。わかりづらい。 知り合いのMacを借りてSafariを見てみたが、やはりフォーカスが無い。 なんということでしょう。アクセシビリティを考えると、旧Edge（およびIE）は大変素晴らしいではありませんか。かろうじて次点が人気の無い（けど私は好き）Firefox。まあ、outlineを消さなければいい話なのだが。 他のブラウザでもこの挙動を再現してみる <select>の中身が青く塗られていて、見やすい旧EdgeのフォーカスをCSSで再現してみると… select_color_blue.css select:focus { color: white !important; background-color: dodgerblue !important; } select:focus option { color: black !important; background: white !important; } これでChromeでも、selectを選択していることが丸わかりになるぞ。ちなみにfocusフォーカスした<option>の色はブラウザで決まっていて、Chrome、旧Edge、IEはdodgerblue、Safariもおそらくdodgerblue、Firefoxは青系統だがdodgerblueより濃い色、新生Edgeは渋い灰色だ。 See the Pen Chromeでも旧Edge風select by Nagayama Toshiaki (@NagayamaToshiaki) on CodePen. そもそも、見てくれがかっこよくても使い勝手が悪ければ悪印象だ。良い子のみんなは:focusのoutlineを上書きしないようにな。そのうえで、今回の青背景を採用するとさらにユーザーにやさしくなるぜ。マウスが動かせない人だけじゃなく、マウスを触るのがおっくうな人もいる（アクセシビリティは、しょうがいを持った人に対する特別な配慮に留まらない）ことを忘れないようにしてくれ。お兄さんとの約束だぞ！
固定長ヘッダー付きの領域を階層構造にして内側の窓でスクロールしたい <div class="outer"> <div class="header">aaa</div> <div class="content"> <div class="inner-outer"> <div class="inner-header">aaa</div> <div class="inner-content"> bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb </div> </div> </div> </div> header、inner-headerのheightは固定長 inner-contentの大きさをウィンドウの残りの高さでスクロールさせたい html { width:100%; height:100%; body { width:100%; height:100%; margin: 0; .outer { display: flex; flex-direction: column; height:100%; .header { flex-grow: 0; } .content { flex-grow: 1; overflow-y: hidden; .inner-outer { display: flex; flex-direction: column; height: 100%; .inner-header { flex-grow: 0; } .inner-content { flex-grow: 1; overflow-y: scroll; } } } } } } flex-grow と overflow: hidden; を使うとうまくいく。
学習の経緯 非web系のシステム開発がメインだったが、昨年からsalesforceを始める。 Platform Developer Iの資格はとれたもののフロントエンド側はサッパリ LWC（Lightning Web コンポーネント）に興味がでてきたが、 それを理解する為の前提となるjavascriptも解らないし、htmlも解らない。 そのため基礎の基礎を学習するに至る 現状の知識レベル html h1タグは見出しで使う、pタグは何かメッセージ書くとき使う。 frameタグやtableタグは知っている。 アクセスカウンターとかキリ番ゲットとかの時代止まり… css デザインセンスが必要で極めるとお洒落なサイトを作れるモノ。 今回のゴール htmlとcssを使ったwebサイトの構成の触り理解する。 HTMLでわかったこと div 区切りタグ 画面構成の枠として使用し要素をまとめて構造化する。 これ自体が何かすることは無く、構造化のための目印的な使い方をする。 ul リストタグ cssのfloatと組み合わせて要素を横並びに表示する時にたくさん使う。 テキスト以外にこの中にdivタグで囲った構成要素を作り、左に画像、右にテキストといったレイアウトを作ったりできる。 デフォルトでは中点が表示されるので、list-style-type属性にnoneを設定し中点を非表示にすることで只の箇条書き用のタグが素敵デザインのためのタグになる。 ulタグの使用例 <ul> <li>文章１</li> <li>文章２</li> </ul> dl 説明タグ 前述のulタグと異なり子要素タグの、用語「dt」とその説明「dd」の組み合わせで使う。 ulタグ同様にlist-style-type属性にnoneを設定して使う。 dlタグの使用例 <dl> <dt>概要１</dt> <dd>説明文</dd> <dt>概要２</dt> <dd>説明文</dd> </dl> img 画像タグ 画像を表示する時に使用する。 ファイルの指定は相対パス。 alt属性は画像が表示出来ない場合に設定したテキストを表示するのに使われる。 自動読み上げソフトで読まれる場合があるので適切な内容にすることが望ましい。 h1～h6 見出しタグ それぞれ文字の大きさが異なり、h1が一番大きくh6が一番小さい。 p パラグラフ（段落）タグ 文章の段落の纏まりを表す。 pタグの前後には1行改行が自動で入る CSSでわかったこと cssは、htmlで作られた骨組みを彩る装飾品 文章（html）と装飾（css）に分離する方がデータ構造的に何かと都合がよい 書き方１ 要素{プロパティ名:値;} htmlタグに対して定義した内容は、そのcssファイルを参照するhtmlファイル内全てに作用する。 これによりタグに対し同じ内容の設定を個々にするより外部化した定義を参照する方が効率的となる。 タグに対する定義例 ul, dt, dd { margin: 0; padding: 0; list-style-type: none; } 書き方２ .クラス名{プロパティ名:値;} クラス名として定義すると、そのクラスを指定した箇所のみに作用する。 定義する時は、先頭にピリオド「.」を付ける。 クラスとしての定義例 .content{ width: 900px; float: left; } 指定方法 <ul class="content"> <li>テキストメッセージ１</li> <li>テキストメッセージ１</li> </ul> 終わりに 今回は道具とその使い方が（なんとなく）解った。 次回はもう少し踏み込んで学ぼうと思う。
