メディアクエリでレスポンシブ対応する際の基本の型
結構使えるメディアクエリ /* iPhone 縦 */ @media screen and (min-width:480px) { /* for iPhone Landscape (iPhone 横) */ } @media screen and (min-width:768px) and ( max-width:1024px) { /* for iPad */ } @media screen...
View Article【超入門】JavaScriptの超基本を自分の言葉で解説してみた
目次 1.はじめに 2.JavaScriptとは 3.JSファイルの読み込み 4.開発者ツール 5.console.log 6.コメントアウト 7.変数 【この記事を読むのはこんな人】 ・HTML、CSSは理解出来ている ・JavaScriptを始めたが全く理解できない ・実際にJavaScriptを使用するイメージがつかない 1. はじめに...
View ArticleHTMLとCSSとJavaScriptをひたすら書いて動かして理解する【1回目】
はじめに 最近は仕事でhtmlとcssとJavaScriptを使う機会が多くなりました。期待通りに動くものは作れるものの基本的な理解が追い付いていないような気がする今日この頃です。なので、基本的なことから、積み上げて、この記事に書いていこうと計画を立てております。 まずは最も単純なページを作成する index.html <html> <head> <meta...
View ArticleCSS 擬似要素『nth-child』と『nth-of-type』何が違うの？
概要 複数の要素を並べる時によく、 「3番目の要素だけ指定してデザインをあてたい」や 「奇数・偶数番目の要素だけ指定してデザインをあてたい」などがよくある。 その度Google先生に聞いてみると、:nth-of-type( ) と :nth-child( )と出てくるが、 どっちもn番目の要素を指定することができるので、正直混乱する。 そのため、この記事では、:nth-of-type( ) と...
View ArticleSiemaをスマホ対応 メモ
今回Siemaをスマホ対応させてみたメモになります。 前提として、 Siemaとは JavaScriptによる、画像スライダー https://pawelgrzybek.github.io/siema/ 詳しくは、ほかの人のこれらがわかりやすかったです。 【JavaScript】単体で使える超軽量スライダー［Siema］は初心者の方にオススメです。...
View Article備忘録）css3のテキストグラデーション
参考を見ながら適用しようとしたら詰まったのでメモ 概要 参考を見て試すも background-clip: text;が適用されず文字抜きが上手く表示されなかった 原因・結果 backgroundセレクターでは反映されず、background-image又はbackground-textでは反映されるみたい style.css /*-- NG --*/ .textGr{ color:...
View ArticleApacheでWebサーバー備忘録
ApacheでWebサーバー備忘録 Apacheとは 無料のWebサーバーソフトウェア。現在、最も世界でShareをとっているWebサーバーソフトウェア。 1995年から歴史が長く、安定性やmodule機能の豊富さ、ソフトウェアとの互換性の良さに定評がある。 他にもMicrosoftのIISやnginxがweb サーバーとしてよく採用されている。 Apache Install...
View Articlenuxt.jsで作ったサイトでposition:stickyが効かないのはbodyにデフォルトで当たるoverflowが悪かった
先に結論：nuxt.config.jsに下記のように書くことでposition:sticky;が効くようになります nuxt.config.js bodyAttrs: { style: 'overflow: unset!important;' }, 注意点 逆にbodyにoverflow: hidden;などを当てたいときに困ります。特にモーダルとかの実装。htmlにoverflow:...
View ArticleRemixでのスタイリングに関する調査（2022年1月現在）
この記事の概要 巷で話題のRemixですが、スタイリングに関する記事はあまり見当たりません。 そのため自分で調査してまとめてみました。 まだ変化も大きいと思いますが、直近で導入を考えている人にとって役立てば幸いです。 公式ドキュメントにある情報 主な方法 Remixは<link rel="stylesheet">の形式でスタイルを読み込み、適用するのが基本方針のようです。...
View Article2行目以降もインデントされるようにリストを作成する
数字や※でのリストを作成するときに、上記のように2行目以降は字下げをしてほしいな〜っていうことありますよね… 疑似要素を使用して作成するのがよくあると思いますが、text-indentを使用する方法がすごく簡単だったのでメモ。 index.html <ul class="text-wrap">...
View Articleレスポンシブデザインの考え方（コーディング）
クライアントの予算は正直ピンきりなので、予算枠に応じてWEB制作するときのブレイクポイントの基準をメモしておきます。 ブレイクポイント3箇所 区間は以下の通り ・sm：360px ~ 767px ・md：768px ~ 1023px ・lg：1024px ~ 1366px ・xl：1367px ~ 2880px...
View ArticleSassの@mixinと@functionの基本を押さえたい
こんにちは、新人フロントエンジニアとして働いている者です。 Sassで自作の@mixinや@functionを作ったことがなく、そろそろ勉強しないとやばいなと思ったので、ここでアウトプットします。 @mixinって何だ？ @mixinはよく利用するCSSのスタイルを定義して、他の場所でも使いまわせるようにする機能のことです。 @mixin 名前で定義して@include 名前で呼び出します。...
View Article画像のプレビュー機能
はじめに みなさん画像のプレビュー機能をつけたいですよねー では、自分が付けた方法を載せていきます。 STEP1 まずは、Tweetsテーブルにimageカラムを追加します。 $ rails g migration AddImageToTweets image:string こちらのコードを打てば大丈夫です。 STEP2 続いては、JavaScriptを導入していきます 導入は、...
View ArticleGoogleのサイトの見出しのマークアップがよくわからない話
はじめまして。 Qiita初投稿になります。 この記事はわたくしが、 Googleが管理しているであろうサイトのソースコードを ChromeのDeveloper Toolsで見たときの感想です。 結論等があるわけではなく、あくまで備忘録的なものですが、 もしかしたら役に立つ方がいらっしゃるかもしれませんので、 一応、記事として残しシェアしたく思います。 目次 -...
View ArticleWebpacker::Manifest::MissingEntryErrorでコンパイルはされているのに読み込まれない
はじめに 最近Railsの開発環境を作成しています。 こちらの記事で構築手順を載せています。 そこで、GitにリポジトリをあげたコードをCloneして起動したところうまく起動できない事態が発生したため手直しのさいに解決した方法をまとめます。 問題 WebpackerとRailsのDocker環境を作成して、起動したところ以下のようなエラーが発生します。...
View ArticleCodestepで学ぶHTML、CSS、jQueryの模写コーディングのメモ(中級編:前半)
模写サイト COFFEE / ストアサイト（カフェ） スマホサイズとPCサイズ(完成図) リセットCSS <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/destyle.css@1.0.15/destyle.css" /> 全体のスタイル 全体のスタイル <style> html{ font-size:...
View ArticleLocal by FlywheelでWordPressローカル環境を構築してライブプレビュー(PHP,CSSにも対応)
Local by Flywheelは簡単にWordPress環境を構築できるので便利ですが、 PHPやCSSなど、どのファイルを更新してもライブプレビューで変更を反映してくれたら便利！ と思い、あれこれ調べてみました。 なんとかうまくいったので、メモとして残します。 Local by Flywheel と WordPressの準備 インストールから設定まで、...
View Article【Node.js、Javascript】Seleniumで疑似要素の属性値を取得する
はじまり 今回、Seleniumで疑似要素のcontent属性の値を取得するコードを作成しましたので掲載します。 本ソースは、OutSystemsで作られたシステムにおいて、チェックボックスのチェックの有無を判断するために使用したので、同様にOutSystemsを使っている方も利用できるのではないでしょうか。 動かしたブラウザは、Chromeです。 ソース const { Builder } =...
View ArticleCSS：マスキングテープ風
はじめに 完全なるメモ。HTMLとCSS(SCSS)だけでやります。 ネットの記事を参考にしているので被っているものがあったらすみません。 参考程度に。 種類は、ストライプ柄とドット柄。 完成イメージ ストライプ柄 マスキングテープ ドット柄 マスキングテープ HTML HTML <div class="card"> <span...
View Article[javscript]ローカルストレージにjson形式でデータを保存し、取得する
やりたいこと ローカルストレージに値を入れたいのだが、文字列しか入れられない。 trueやfalse、数値などのbooleanやnumber型は登録できないので、管理しやすいように json形式でデータを保存し、データを取得しそれを使えるようにする。 ローカルストレージの基本 まずローカルストレージとはブラウザなどにデータを保持させておく仕組みです。...
View Article