レスポンシブページの作り方
導入最近レスポンシブなwebページを作っています。大まかに言うと1024px未満の横幅を持つデバイスではコンテンツの比率を維持したまま拡縮するように。...
View ArticleClik here to view.
エンジニア未経験がWordPressを使ってWEBアプリを作ってみた
今回製作したWEBアプリについて今回作成したWEBアプリは「AboutMyself」。プロフィールを質問形式で記載していくSNSのようなものです。15年程前に流行った「前略プロフ」をイメージしていただければ良いかと思います。1....
View ArticleClik here to view.
手書き風アニメーション(vivus.js)
はじめにvivus.jsという素晴らしい、プラグイン？を使用したのでメモとして残します。まだ理解し切ってないので、本当にメモ書き程度のまとめです。完成イメージ手順illustratorで新規作成・「base」「mask」のレイヤー作成・「base」レイヤーに文字を書く・文字のオブジェクトの上で「右クリック」→「アウトラインを作成」・そのまま(選択した状態で)「オブジェクト」→「複合パス」→「作成」・...
View Articleモーダルで画像・動画を表示！「fancybox3」を使ってみた
自身のポートフォリオ作品（画像）を、ページ遷移ではなくモーダル表示にしたかったので、探してみたところ、「Fancybox3」というモバイルも対応している超優れものを見つけたので、さっそく実装してみました。◆Fancybox3のサイトはこちらhttps://fancyapps.com/fancybox/3/①ダウンロードまずは「fancyBox3」のサイトから、データをダウンロードします。ダウンロード...
View ArticleClik here to view.
エンジニア未経験がWordPressでWEBアプリを制作する際につまずいたこと
まず初めにどのようなWEBアプリを作ったのか「AboutMyself」という、プロフィール専門SNSを製作しました。※内容については、こちらの記事を参照。「AboutMyself」を製作する上でつまずいたことSNSを製作する上でのプラグインの選択について困った→日本語の説明ブログなどもかなり投稿されていますので、これに関しては「BuddyPress」一択で大丈夫だと思います。ログイン・登録画面で自分...
View ArticleClik here to view.
【初心者でもわかる】条件をつけて、:not()で〇〇以外にだけCSSを当てる方法
どうも7noteです。特定の要素以外にCSSを当てる書き方を解説条件付きでCSSを当てられたら便利だと思いませんか？そんな便利な方法(書き方)があります。:not()で特定の要素以外にだけCSSを当てるindex.html<p>pタグ</p><p>pタグ</p><p>pタグ</p><p>pタグ</p>st...
View Articleマイコーディングルーティン
はじめに制作会社を通して作業前に確認する必要があることを備忘録として簡単にまとめました。スケジュール・仕様確認・納期・サーバーは自社で作成 or 提供か・サイトマップ,ディレクトリ構造・新規or既存サイトの有無（記事の流用もあるのか）・更新の可能性のある場所・動的、静的、フォームの有無、その他ソース提供・システム導入（スクラッチ or WP or その他CMS）・ブラウザ対応どこまで・インクルード...
View ArticleClik here to view.
【CSS】コロン２つ::とコロン１つ:の違い。（擬似要素と擬似クラスの違いとそれぞれの使い方）
CSSでコロン２つ（::beforeなど）やコロン１つ（:hoverなど）がついたプロパティの違いについて。コロン２つ::とコロン１つ:の違い擬似要素と擬似クラスの違い擬似要素擬似要素の一覧::before前方にテキストを追加する前方に画像を追加する前方に追加する画像のサイズを変更する下線を表示する上線を表示する左に線を表示する注意点::after::first-letter::first-line...
View ArticleClik here to view.
【CSS】htmlとcssでモーダルを作成する方法。（擬似要素と擬似クラスの活用）
擬似要素と擬似クラスを使うとモーダルを簡単に作成することができる。擬似要素の::after,...
View Articleデベロッパーツールで他人のサイトの見た目を変更したまま更新しても維持する方法
先に述べますが、表題そのままの解決ができたわけではありません。真っ赤な嘘となります。発生した課題の解決自体はできています。やりたかったこと-Chromeのデベロッパーツールで他者のサイトのスタイルシートを好みの状態にイジった後、更新したり再度訪問してもその状態を維持したい -Twitter...
View ArticleClik here to view.
【CSS】セレクタの記号の意味を実例で理解する。 スペース、>（大なり）、*（アスタリスク）＋（プラス）、,（カンマ）、.（ドット）
CSSのセレクタで使われているスペースや>（大なり）、＋（プラス）、,（カンマ）、.（ドット）などの機能の確認。目次スペース>（大なり）+（プラス）,（カンマ）.（ドット）*（アスタリスク）1. スペース子孫要素、つまり配下のすべての要素が対象となる。・親要素 子孫要素 {処理}▼実例.html<divclass="parent"> parent 親要素...
View Articletailwindcss のデフォルトの単位を rem から px に変更する方法
tailwindcss はデフォルトの単位が rem になっています。既存のプロジェクトに tailwindcss を導入する際、既に <html>に font-size が指定してされている場合（16px 以外）、プレイグラウンドや他のプロジェクトからエレメントをコピーした場合にサイズが変わってしまいます。ですので、単位を px...
View Article基礎学習
未経験からWeb系エンジニアの転職を目指しています。これまで、Progateを中心にHTML、CSS、JavaScript等の学習、書籍を用いてRubyの学習、Ruby on Rails チュートリアルを用いてRailsの学習を行ってきました。今週頭から某プログラミングスクールを受講しましたが、自分の学習スタイルとは合わないと感じ、...
View ArticleClik here to view.
Clik here to view.
【CSS】メディアクエリ（@media）とは？CSSへの直接記述とファイルを読み込む方法。
メディアクエリ@mediaの使い方について。目次メディアクエリとは？メディアクエリの使い方ビューポートの指定メディアクエリの記述方法メディアタイプ一覧主なメディア特性一覧論理演算子一覧メディアクエリを使ったレスポンシブ実例メディアクエリとは？対象のデバイス（メディアタイプ）と画面幅や画面の向きなど（メディア特製）を指定するコード。スマホやPCなどデバイスの画面幅によってページの文字サイズや横幅を変更...
View ArticleClik here to view.
HTML/CSS復習①
ポートフォリオ作成に向けて、1月中に基礎学習を終わらせます。まずは、2日ほどで、HTML/CSSの復習をProgate、ドットインストールを用いて行っていきます。なお、記述する内容は自分は忘れがちな所、苦手な所です。自分用の備忘録的に投稿していくので(箇条書きで)、読みづらいor間違えていることを書いている可能性もあるので、悪しからず。...
View ArticleHTML/CSS復習②
HTML/CSS復習①からの続きです。アニメーションを付けるCSSファイルtransition:変化の対象(allだと全てのプロパティを指定)変化の時間(例：1s=1秒);hoverと組み合わせて使うことが多いCSSファイル#変化の対象となるところにカーソルを乗せると背景が1秒間赤色に変化するdiv{transition:変化の対象(allだと全てのプロパティを指定)変化の時間(例：1s=1秒);}...
View ArticleHTML/CSS復習③
HTML/CSS復習②からの続きです。floatの解除通常、親要素の高さは子要素を包む高さになる。しかし、子要素が全てfloatの時には、親要素の高さは0になる。子要素が全てfloatでも親要素が高さを持つように設定する float: leftは、CSSファイルclear:left;で解除できる。htmlファイルには、CSSを適用する(clear:...
View Article
