メディアクエリを書いてレスポンシブ対応してみた話
【使用言語】CSS【きっかけ】サンプルサイトを作成して行く過程で、PCとSP(スマホの略)を別々の表示にしたいと思った。のでググってみると、メディアクエリなんちゃらというのがヒット。試しにやってみることにした。【解決策】CSSにてメディアクエリを設定する/* pc表示時のスタイル指定*/ @media screen and (min-width: 415px) {...
View Articleアプリケーションのオリジナルロゴを簡単に作る方法(スマホで簡単)
個人アプリのロゴを簡単に作成しよう!(Rubyの記述あり)必要なもの「Pics art」「背景透明化」(それぞれapp storeで無料で取得できます)好きなように書く!Pics...
View Articlefontawesome5 free版 のアイコンを css :before, :after で挿入
<i class="fas fa-address-card"></i>を :beforeで表示https://fontawesome.com/icons/address-card?style=soliddiv:before{content:"\f2bb";font-family:'Font Awesome 5...
View Article【CSS】link_toのアンダーラインを消す方法
結論cssa{text-decoration: none;}と記述するだけ。text-decoration: none;実行前(右上の線がある)text-decoration: none;実行後(右上の線が消えている)まとめlistで記述した場合、list-style: none;で消せるが、link_toで記述した場合はtext-decoration: none;で消せる。以上備忘録でした。
View ArticleIEでmarginのautoが効かない時の対応方法
事象 : IEでmarginのautoで設定した右寄せが効かないChromeとEdgeとFirefoxは右寄せになるのにEdgeだけ左寄せになる。<!DOCTYPE html><html><head><title>marginのautoが効かない</title><style...
View Article【初心者でもわかる】CSSだけで、aタグの範囲を広げる方法
どうも7noteです。js不使用。CSSだけでリンクの範囲を広げる方法。先日の記事でjQueryもしくはHTML5を使ってaタグのリンクの範囲を広げる方法を書きましたが、CSSだけでaタグのリンクを広げる方法もあるので、今回記事にまとめました。正直この方法を初めて知った時は驚きました・・・書き方index.html<divclass="linkarea"><p>ここに文章が入...
View Article綺麗にトップページに写真を貼る方法
現在ポートフォリオ作成中ホームページ上に大きな写真を載せたいと考えました。その際に自分が行ったことを記事にします結論CSSにindex.css.photo{object-fit:coverを記述しました。このobject-fitとはなんなのか説明していきます。object-fitとはwidthやheightに合わせて写真の縦横比を調節してくれるものです!!はみ出た部分はリサイズされます。プロパティ一...
View ArticleiPhoneでなぜか文字が大きくなる場合に試すCSSプロパティ
CSSで指定したfont-sizeが効かず、iPhoneでなぜか文字が大きくなる。そんな場合にお試しください。結論から言いますと、該当箇所に以下のCSSプロパティを指定します。CSS-webkit-text-size-adjust:100%;PCブラウザのデベロッパーツールでは再現せず、...
View Articleシンプルで美しいCSSフレームワーク samantic-ui をRailsに導入する。
フレームワークの特徴タイトルにもある通り、見た目がシンプルで美しいです。他にも、人間にとって理解しやすいclass名を使用しているという特徴があります。公式サイト:...
View Article【初心者向け】カーソルを手(👆)の形にする方法 & 他のカーソルたち8個(画像付き)
どうも7noteです。カーソルの矢印を指の形に変更する方法と、それ以外にもこんなものに変更できる。初歩的だけど、いつもcursor: pointer;か、pointer: cursor;か忘れてしまう7noteです。マウスカーソルを手(👆)の形にするには↓↓↓div{cursor:pointer;}とすることで、hover時に手の形にすることができます。/* 上と挙動は同じ...
View Articleflexレイアウト `display: flex`で、サクっとボタンを中央寄せする
「きれいに(かつ、ラクに)レイアウトしたいときはflexを覚えるといいよ。」と教わってまずはじめに覚えたやつです。sass.centerdisplay:flexjustify-content:centerhaml.center=f.button:submit,'送信'
View ArticleRailsで簡単にプルダウンを作る方法
簡単にプルダウンを作る方法使用するディレクトリ(私の場合)⚠️命名はご自身でビューファイル(new.html.erb)コントローラー(mentors.controller.rb)モデル(sukill_id.rb)目指す完成形まずビューファイルから(どこからでもいい)1.こういうパターンやnew.html.erb<select><option>チャットするユーザーを選択してくだ...
View ArticleNext.jsでClassless CSSを適用する
Next.jsでClassless CSSNext.jsでClassless CSSを適用する機会があったので記しておきます。Classless CSSとはclass属性(やid属性)をセレクタで使用してスタイルを適用するのがCSSの基本ですが、 Classless...
View ArticleBulmaをカスタマイズしてビルドする
Bulmaをカスタマイズしてビルドする私は、Bulmaのシステム自体は好きなのですが、角が丸すぎる点が気に入りません。幸い、Bulmaは、ユーザーがかんたんにカスタマイズできるよう設計されていますので、角丸を小さくした、カスタムBulmaのCSSファイルを作っていきます。①BulmaのダウンロードBulmaのダウンロード方法1・zipでダウンロード(おすすめ)git clone...
View Articleキャメルケースとスネークケース
キャメルケースcompanyIdやblogCategoryのように2語3語と単語同士をつづけた書く書き方。先頭の単語が小文字関数名は先頭小文字。例:createBlogCategory()変数名(引数名)は先頭小文字。例:companyId先頭の単語が大文字をパスカルケースまたはアッパーキャメルケースと呼ぶclass名は先頭大文字。例:BlogCategoryスネークケースcompany_idやbl...
View Articleiosでinputタグがボコってみえるのを直す
課題まず1枚目と2枚目を比べてみる。1枚目はデフォルトのinputタグで上の方にshadowみたいな彫りの深さが出ているバージョン 2枚目はそのiosのデフォルトの仕様に対してcssで彫りの深さを消したバージョン解決法inputタグのcssに appearance: none;-webkit-appearance:none;を追加するcssinput { appearance: none;...
View Article表(テーブル)で斜線を引く方法
空のセルに対して、斜線を引く例えば下記のような表があって、水曜日のセルに斜線を入れたい時。(初心者のため表のイメージの貼り付けができなくてごめんなさいね)一番下の水曜日のセルには何も書かない。空にしてある。index.html<tableborder="1"><tr><th>診療時間</th><td>月</td><td&g...
View ArticleFlexboxで縦並びかつ左右中央揃えがうまくいかない理由と対策
ポートフォリオ作成のため久しぶりにCSSを触って、思うようにいかなかったので解決方法を共有します!Flexboxで縦並びかつ左右中央にする要素を縦並びかつ左右中央揃えにしたいな〜「よし!Flexboxを使おう!」ということで、要素を縦並びにするのは flex-direction: column要素を左右中央揃えにするには justify-content:...
View Article