20210429のCSSに関する記事は6件です。

便利なクラス指定方法

こんな要素があります divに囲まれたpタグ達 <div> <p>要素1</p> <p>要素2</p> <p>要素3</p> <p>要素4</p> <p>要素5</p> </div> nth系の擬似クラスを使う 特定要素配下の最初か最後の要素を指定して、スタイルを付けることができます。 /* div直下の最初 */ div > p:first-child { background: yellow; } /* div直下の最後 */ div > p:last-child { background: tomato; } 偶数要素と奇数要素のみにスタイルを付与するには、 /* 偶数(even) */ p:nth-child(even) { background-color: skyblue; } /* 奇数(odd) */ p:nth-child(odd) { background-color: skyblue; } 奇数の方を適用させたらこんな感じになります。 基本的な :nth-child(3) のように順番を使用するパターンに加え、 下記のように、3番目から7番目、みたいなこともできます。 p:nth-child(n+3):nth-child(-n+7) [ ] かくかっこ を使う [ ] は属性をあらわすセレクタで、^ を $ にすると「指定した文字列で終わる」、 * にすると「指定した文字列が含まれている。という意味になります。 body > [class*="btn"] { display: none; } クラスに btn という文字列を含む要素全て。
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

CSS での指定の仕方をメモ

はじめに こんにちは、@takashi_sakamotoです。 Webの仕組みとしてHTML、CSS、JavaScriptなど関連について、学んだことをメモしていきたいと思います。 CSSとは CSS(Cascading Style Sheets、カスケーディング・スタイル・シート)の意味で、カスケーディングとは、小さく連なった滝という意味らしいです。 HTMLと一緒に使われ、HTMLがWebの構造を記載しているのに対して、CSSは構造要素のスタイルを指定するものです。Webページをいろいろ装飾するようなもんですかね。 CSSの構成 セレクタ (selector)、宣言 (declaration)、プロパティ (property)、プロパティ値 (property value)で構成されています。 セレクタでどこにスタイルをあてるのか、指定することができます。 セレクタ名 何を選択するか 例 要素セレクタ (時々タグまたは型セレクタと呼ばれます) 指定された型のすべての HTML 要素 p < p > を選択 ID セレクタ ページ上の指定された ID を持つ要素。 特定のHTMLページでは、1つのIDにつき1つの要素(そしてもちろん1つの要素につき1つのID)しか許されません。 クラスセレクタ 指定されたクラスを持つページの要素 (複数のクラスインスタンスがページに表示されます) .my-class < p class="my-class" > 及び < a class="my-class" > を選択属性セレクタ指定された属性を持つページ上の要素img[src] < img src="myimage.png" > を選択するが、< img > は選択しない 擬似クラスセレクタ 指定された要素が指定された状態にあるとき。例えば、マウスポインターが上に乗っている (ホバー) 状態。 a:hover < a > を選択するが、マウスポインターがリンク上にあるときのみ。 [CSS の基本]より まとめ CSSはHTMLと一緒に使い、スタイルを色々変えたい時に使用する セレクタのの指定でスタイルを当てたい箇所に当てて行く 関連記事 どのようにスタイルを変えて行くかの種類を調べたい時スタイルシートリファレンス どのようなスタイルがあるか確認CSS の基本
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

laravel8 tailwind テーブルに中央配置

こちらの記事では、Laravelでtailwindを使ったテーブルを中央に配置する方法についてご紹介します! 非常に簡単に実装できるので是非参考にして頂ければと思います! テーブル中央配置を実装 <div class="flex justify-center"> <table> <thead class=""> <tr> <th class="">期限</th> <th class="">商品</th> <th class="">数量</th> </thead> <tbody class=""> @foreach ($stocks as $stock) <tr class =""> <td class=""> {{$stock->deadline}} </td> <td class=""> {{$stock->name}} </td> <td class=""> {{$stock->number}} </td> </tr> @endforeach </tbody> </table> </div> tailwindの実装はdivタグ内のclassにflex justify-centerを実装するだけです。 あとは文字の大きさやテーブルの幅、背景色など、個別によって実装したいデザインがあるかと思うので、各タグのclassに記述していけばOKです! 今回実装したflex justify-centerについては下記のリンクからtailwind公式のサイトをご覧ください。 https://tailwindcss.com/docs/justify-content#class-reference
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

復習日誌

HTML meta要素 metaタグはその文書に関する情報(メタデータ)を指定して、 ブラウザや検索ロボットに知らせるためのタグである メタデータとは、“情報に関する情報”のことだが、HTMLの仕様では“その文書に関する様々な情報”を意味する head ページのタイトルや説明文、使用する外部のファイルのリンクなど、ページの情報を記述する ブラウザーには表示されない mailto: メールアドレスへリンクをはる時はhref属性に「mailto:」と記述し、続けて送り先のメールアドレスを入れる
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

JS基礎①

概要 JavaScriptの役割とJSの主なアウトプットについての記事です。 JSできること JSでできることは以下になります。 ①ユーザーが入力した情報を含むWebページ上の情報を読み取る。 ②ユーザーからのアクションによって処理を呼び出す。 ③Webページを書き換える。 ③Webページに動きを与える。 ④情報をもとにブラウザのストレージに記録する。*ストレージとはデータを保存する場所のことです。 JS出力までの流れ インプットからアウトプットまで ①イベントの発生(ユーザがクリックしたとき、もしくはスライドしたときなど) ②インプット(HTML/CSSから情報を読み取る) ③加工(イベントに伴う処理、情報からの計算など) ④アウトプット(HTML/CSSを書き換える、処理に伴う結果を出力する) 大事なポイント JSを書くときに最低限必要になるのは3つです。このポイントを押さえながら、コードを書いていくことをおすすめします。 ①HTML/CSSの情報を読み取る ②その情報をもとに加工 ③HTML/CSSを書き換える 具体的な書き換え ①タグに書き込まれたテキストの書き換え ②要素の追加、削除 ③タグ属性を書き換える (例) index.html <img src="image.png" > srcが属性値、image.pngが属性値になります。 ③CSSの値の変更 (例)テキストの色、背景画像の変更 具体的な情報の読み取り ①郵便番号の読み取り ②入力文字数の読み取り ③ブラウザの開かれた時間 アウトプットの場所 JSの主なアウトプットは以下のようになります。 ①コンソールにアウトプット ②ダイアログボックス ③HTML/CSSへのアウトプット 出力してみよう では、早速出力していきましょう。 index.js console.log('HELLO!'); ブラウザのコンソールタブにHELLOと出力されました! このconsoleからオブジェクトが始まっています。 オブジェクト <<誰々は何何をどうしなさい>> ①console ▶オブジェクト (history,document,location,windowなど) オブジェクトはJSが指示を出す相手になります.つまり誰にの部分になります。 ②('HELLO!') ▶パラメータ 指示に必要な情報になります。何々をに当たります。 ちなみに'',""どちらでも良いです。 index.js console.log("It's OK"); しかし、このように文章中に'シングルクォーテーションが入る場合などはダブルクオーテーションにしないとエラーの原因になります。 使い分けましょう。 カッコ内にも種類があります。 index.js console.log('あいうえお'); //文字列 あいうえお console.log('3+2');  //文字列3+2 console.log(3+2); //数式5 と表示されます。 ③log('HELLO!') ▶メソッド オブジェクトにさせたいことです。どうしなさいに当たります。 ()内のテキスト、数式の計算をさせます。 文字と文字列 あ▶文字 あいうえお▶文字列 文字列結合といいます index.js console.log('チョコ' + 2 + '枚'); // チョコ2枚
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

スクロールで下からフェードインする動きを実装したら、ページ内リンクがずれる

JQueryでページスクロールしたら、要素がふわっとフェードインするJQueryを実装した。 HTML <div class="fadeIn">test</div> <div class="fadeIn">test</div> scroll.js $(window).on('load scroll', function (){ var box = $('.fadeIn'); var animated = 'animated'; box.each(function(){ var boxOffset = $(this).offset().top; var scrollPos = $(window).scrollTop(); var wh = $(window).height(); //画面内のどの位置で処理を実行するかで「100」の値を変更 if(scrollPos > boxOffset - wh + 100 ){ $(this).addClass(animated); } }); }); CSS .fadeIn { transition: 1.5s; opacity: 0; transform:translatey(100px); } .fadeIn.animated { opacity: 1; transform:translatey(0px); } これで、HTMLでfadeInのクラスが付与された「test」という文字が スクロールするとふわっと下からフェードインするようになります。 JQueryでスクロールするとfadeInというクラスにanimatedというクラスが追加されるようにしてあるので、 CSSで指定している●pxの部分が、フェードインする動きの幅になるイメージです。 transformを使った方が良い transform:translatey(●px);ですが、 最初はmargin-topにしていました。 CSS .fadeIn { transition: 1.5s; opacity: 0; margin-top: 100px; } .fadeIn.animated { opacity: 1; margin-top: 0px; } こんな感じで。 そしたら、ページ内リンクの位置がズレる・・・! margin-topであった100pxがスクロールすることでanimatedクラスが追加されて、なくなってしまうからですね。。 transformはあまり使ったことありませんでしたが 勉強になりました◎
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む