Clik here to view.
【初心者でもわかる】CSSで画像の好きな位置で丸くトリミングする方法
どうも7noteです。丸くトリミングする方法画像を配置する際に正方形や長方形の画像を丸くトリミングさせたい時に使える方法です。本来であれば丸い画像を用意して配置するところを、CSSを使って画像の任意の位置でトリミングできるようにします。画像が正方形の場合でトリミング位置を気にしない場合の方法index.html<divclass="circle"><imgsrc="sample.j...
View Articleきっちり等間隔に3等分する方法
CSSで計算式を可能にするcalcの紹介です。めちゃくちゃ便利。何がしたいかフッターの要素を3等分したい。（アプリによくあるフッター要素みたいなのを作りたかった）<divclass="footer-container"><divclass="container">要素A</div><divclass="container">要素B</div>...
View Article自己紹介
はじめまして、yukariですQiita初投稿になります！日々のアウトプットのため、またmarkdown方式に慣れるため、毎日短い記事でも投稿できるようにまずは習慣にします。年齢：３０代前半趣味：ネット通販、ネットサーフィン、アニメ動画をみる、YouTubeをみる、お弁当作り好きな言語はjsとPHP、MySQLで、WordPressの構築に力をいれていきたいです。web業界に入るまで前職はアパレルを...
View ArticleClik here to view.
シンプルなヘッダーの作り方（レスポンシブ非対応）
まえがき最近のウェブサイトの殆どはヘッダーを設置し、うつくしく飾っています。ヘッダーは非常に大切な存在です。例えばブログサービスなら、ブログの投稿ボタンやマイページへのリンクなど、必要なものを完璧に取り揃えてあります。また組織の公式サイトなどでは、一種のサイトマップのように活用されています。即ち、ヘッダーこそすべてであるということです。私は思いました。最近はどうもヘッダーを飾っているが、ここは 1...
View ArticleCSS関数の活用
cssで一つのタグの中に同じ指定をするのって面倒じゃないですか？統一感を出せば見やすくなりますし、デザイン性もあります。今までのようにいちいち指定して、もしやっぱり変更したいってなったとき一個一個訂正しなければなりません。でも、関数を宣言していれば、その箇所だけを訂正するだけで済みます。このようなメリットがあるのでぜひ使用することをオススメします。では、具体的な使用方法を見ていきましょう。例えばh1...
View ArticleClik here to view.
Sassの概要・SassからCSSに変換する
はじめにタイトルについて記事にしました。この記事で得る内容は以下の通りです。・ Sassの概要や特徴、メリットについて・ SassからCSSに変換する方法概要・ SassCSSの拡張言語で、CSSをより効率的に書くことができ、変数を扱ったり計算を行うことができます。 Sassのロゴを書いてみました。分かる方にはとても馴染み深いと思います（？）Sassファイルの特徴・...
View Article改行させない方法
よくtableタグやulタグを使って表やリストを使った時変なところで折り返してしまう時ってありませんか？今回はそんな時の対処法をご紹介します。CSSでwhite-space:no-wrap;を使う。これは改行させたくないクラスに対して付け加えるだけで改行されません。簡単でしたね。
View ArticleNext.jsでtailwindcssを使ってみた
はじめにNext.jsのcssにtailwindcssが使われているのを結構見かけたので使ってみました。Next.js特有の設定とかは特にしていないのでReactでも多分変わらないと思います。参考：tailwindcsstailwindcssとは迅速かつ簡単にデザインシステムを構築するためのユーティリティを提供するcssフレームワークです。有名なものでbootstrapがありますが、個人的にboot...
View ArticleClik here to view.
CSSで横スクロール、でも文章は折り返したい
やりたかったことシンプルにhtml + cssで横スクロールを作りたい。イメージとしてはこんな感じ。ポイントはコンテンツの下に長い文章があるという点。調べたら出てきたやり方様々な記事を参照してみると、ulタグとliタグを用いてそれぞれにoverflow-x: auto;、white-space: nowrap;やdisplay:...
View Article未経験文系新人SEがレベルアップしていく話 ~1年目プログラミング書籍編~
社会人1年目ももう12月終わり。今年を振り返ってみると、業務ではCSSや外部設計が多く、実際のモノづくりはあまりやらなかったのですが、自学で触ってみた技術で新人が固めておいて割とよかったなと思うものを書いてみます。入社前の内定者や、就活生、新人教育担当者でアドバイスを探している人が参考になればと思います。 ※まだ成功してないので、これが「正解」というわけではありません。...
View ArticleClik here to view.
【初心者でもわかる】スマホで文字が途中で改行されて崩れるのを防ぐ7つの方法
どうも7noteです。スマホで最後の文字だけ改行されて不細工になってしまった人へ。様々な対処法を伝授。スマホレイアウトでお困りの方必見。コーディングのときに少し気をつけるだけで、ぐっと崩れる割合を減らすことができます。ただ「あまり無理に対応しすぎると逆に崩れてしまうこともある」のでほどほどに。特にスマホデバイスは多岐にわたるので、あまり無理に目の前の見た目に惑わされず幅広くカバーできる方法を取りまし...
View ArticleClik here to view.
Vue3 todoアプリ作成③ ~ Tailwindcss導入 ~
Tailwindcss いれてみた謎todoアプリ作成 第3弾todoアプリ作ってみたのですが、cssも何も当てずに進めていたのでこの辺で cssぶっ込みたいと思いtailwindcssの所感も試したくなったため入れてみました。Vue3 todoアプリ作成① ~ compositionAPI ~Vue3 todoアプリ作成② ~ Vuex vue-routerを触ってみる ~Vue3...
View ArticleClik here to view.
横並びにしたいのにfloatもinline-blockも効かなくて泣いた
はじめに改修で以下のように要素を追加したかったのですが、floatにしてもinline-blockにしてもうんともすんとも反応せずで困り果ててしまいました。align-items: center;CSS の align-items プロパティは、すべての直接の子要素に集合として align-self...
View ArticleClik here to view.
CSSのhover, activeの色を簡単に対応する
CSSのhover, activeの色を簡単に対応する「デザインファイルをいただいたものの、Hover, Active時のカラーがない‼」「いろんな色を使ってるのでHover, Activeの色まで定数化したら大変なことになる」みたいなときありませんか？僕はあります。そんな時に雑に使える色を変えるテクニックがこちらstyle.scssbutton{background:$primary-color;...
View ArticleClik here to view.
映画館の宣伝のような文字が順番に出てくるやつを作る
どうも7noteです。映画館で最初に流れる予告編のようなテキストを順番に出す処理を実装してみる※ちょっと出だし遅いです。気長に待ってください。javascriptを使いpromiseで順番にjavascriptを処理していくことで表現できています。テキストをpタグに用意して、それらを順番に表示しています。それではソースをどうぞ。※jQueryを使用しています。jQueryてなにそれおいしいの？という...
View ArticleClik here to view.
幻想をぶち壊す イマージンブレカー(margin相殺について) ネタです笑
概要(工事中だけどもう出します更新していきます！)物語を読み進めることでCSSのmargin相殺について触れてみよう物語俺の名前はジン触れると間を相殺する力を持つ14歳だ。間の相殺→margin相殺(ブロックレベル要素が接するときmarginが打消しあうこと)Pタグの例<p>テスト</p> <p>テスト</p> 簡単に言うと重なっているてこと...
View ArticleClik here to view.
HTML + CSSでリアルなビールを作る
新年あけましておめでとうございます。今年もよろしくおねがいします。かんぱーい！完成品はこちら See the Pen Pure CSS Beer by Nishihara (@Nishihara) on CodePen. 概要ビールの図形自体は左右対称なので、半分作って残り半分はtransform:...
View ArticleClik here to view.
打倒レンダリングブロック！（JavaScript編）
はじめにCSSやJavaScriptなどの読み込み方法（記述）によってはレンダリングを妨げることとなります。本記事ではJavaScriptの読み込み（記述）に焦点を当てて、レンダリングブロックの対策について説明します。レンダリングブロック対策の基本はHTMLをとにかく速く出力することです。この前提をもとに、対策方法について説明できればと思います。レンダリングの基本ブラウザにおけるレンダリングの流れは...
View ArticleClik here to view.
迎春なので鏡餅をCSSで作った
どうも7noteです。お正月にふさわしいアレをCSSで作りました。ソースindex.html<divclass="kagamimochi"><divclass="mikan"></div><divclass="mochi1"></div><divclass="mochi2"></div><divclass="k...
View Article
