擬似要素とは 具体的な活用例 横棒を追加する 画像やコードのタイトルをうっすらと表示させる アイコンを表示させる コメントボックスを作る 参考にしたサイト HTMLとCSSでコーディングをいていて、beforeやafter、hoverなどの擬似要素を使う機会が最近よく…
今回作るもの 必要なファイルとその中身(完成ソースコード) html css jQuery 実装手順 画像を表示させる モーダルを作成する 画像にカーソルを合わせた時の処理 おわりに 今回作るもの たまにWebサイトで見かける、マウスを当てたら画像のタイトルが出てくる…
はじめに 筆者の環境 ヘッダーアイコンを作成する モーダルを作成する クリックイベントを作成する はじめに スマホの画面幅は、iphone6/7/8 Plusの場合414pxです。 WebサイトをPC(自分のMacBookの画面幅は、1440px)で閲覧する時には、このようなヘッダーが…
faviconとは 公式サイトにアクセスする イラストを書く or 画像をアップロードする 画像をアップロードする場合 ダウンロードする 読み込ませる ブックマークをファビコンのみ表示させる方法 参考にしたサイト faviconとは ブラウザタブの左側に付いているア…
はじめに 準備をする タブレットの画面幅 スマホの画面幅 おわりに 参考にしたサイト はじめに 私が現在、模写コーディングをしているページを題材に、レスポンシブ化について書いていきます。 MacBook(画面幅が1440px)では、このように表示されているページ…
素材 画面 HTML CSS HTMLを用いた方法 リンク元 画面 HTML リンク先 画面 HTML jQueryを用いた方法 画面 HTML jQuery 最後に ページ内でリンクを作る方法について2パターンを紹介します。 素材 ヘッダー、メイン、フッターに分かれています。 メインの中に、…
パターン1 HTML CSS パターン 2 CSS パターン3 CSS パターン4 CSS hover時にマーカーが引かれるようにする CSS 参考にしたサイト HTML / CSSで、マーカー線を引く方法と、自分が気に入っているマーカーのパターン、最後には、カーソルを合わせた時にマーカー…
完成イメージ 使用するファイル 土台を作る 画面(1/4) 左側が欠けた半円を重ねる 画面(2/4) 内側の円を作成する 画面(3/4) 56%を表現する 画面(4/4 → 完成) ソースコード index.html style.css 完成イメージ HTML / CSS で、このようなグラフが出来上がるま…
完成イメージ 1 カレンダーの背景を作る index.html style.css 画面 2 表を利用する index.html 画面 3 カレンダーを背景に収める style.css 画面 4 カレンダーを装飾する 5 仕上げ 画面(完成) 参考にしたサイト 完成イメージ この記事では、これを作ってい…
アコーディオンとは？ 筆者の環境 準備 ディレクトリ・ファイルの作成(ターミナルを使用) HTML 画面(1/10) CSS 画面(2/10) jQuery jQueryの読み込み確認 1つのアコーディオン 答えを非表示にする 画面(3/10) 答えを隠す 画面(4/10) 答えを表示させる 画面(5/…
モーダルとは 実装手順 フォルダなどを準備する ブラウザに最低限の表示をさせる モーダルの中身を作り込んでいく モーダルをカバーしている部分を作り込んでいく モーダルを表示させる モーダルを非表示にする モーダルとは 例えば、Twitterの投稿ボタンを…
jQueryは、Webサイトに動きをつけることのできる言語です。 この記事では、Webサイトでよく見る このような、クリックすると画面TOPに行くボタンをどうやって作ればいいのかについて説明しました。 jQueryを読み込む jQueryのファイルを作成する htmlファイ…
筆者の環境 具体的な手順 必要なファイルをサーバーにアップロードする 「ロリポップ！レンタルサーバーFTP」にログインする themesディレクトリ( / > wp-content > themes )に新しいフォルダを作成する 新しいフォルダの中身 index.phpにテンプレートタグを…
Sassとは 読み込ませる方法 特徴をいくつか紹介します @importで他のSassファイルを読み込める 親子構造を持つ 変数が使える アンパサンド(&)が使える 参考にしたサイト Sassとは CSSは、Webページの見た目を整える言語ですが、SassはCSSをより効率的に書く…
slickerとは 導入手順 スライドさせたい画像を用意する スライドの骨格を作る 公式サイトからフォルダをダウンロードする 必要なファイルをSlickを導入したいフォルダに配置する スライドを動かすためのコードを書く autoplay: true, autoplaySpeed: 5000 do…
先日C#に関する案件をエージェントの方から紹介してもらいました。 しかし、私はC#について全く知らなかったため、インターネットで検索した情報をここにまとめておきます。 C#とは Macでも開発可能か？ おすすめ参考書 参考サイト C#とは - マイクロソフト…
非同期通信とは 非同期通信を使用する案件 非同期通信を使った簡単なアプリ 事前準備 作業用ディレクトリを作成する 新規rails アプリを立ち上げる ルーティング、コントローラー、ビューを設定する ローカルサーバーを再起動して、ブラウザを確認する 完成…
ランサーズで「CMS構築・WordPress制作・導入」のカテゴリーに絞って検索すると、31件の仕事が見つかりました。 www.lancers.jp Wordpressのカスタム投稿タイプ記事のアーカイプデザイン変更 wordpressのブログ内の編集と改善 既存サイトのコメント欄改修 な…
HTML / CSSでwebサイトを作っている時に、アイコンを使用したくなることがあるかと思います。 そんな時便利なのが、Font Awesomeです。 しかし、英語で書かれているので、使う時に少し戸惑ってしまうかも知れません。 そこで、Font Awesomeの読み込み方につ…
WordPress入門 ドットインストールのWordPress入門を始めてみました。 しかし、早い段階で上手くいかないことに遭遇しました。 レッスンの中で、 http://dev.dotinstall.com/wordpress にアクセスする場面があるのですが、アドレスバーに打ち込んでアクセス…
作ったもの こんなサイトをReactで作ってみました(画像はgoogle検索で出てきたものを使用しました)。 Progateを大いに参考にしました。 それぞれの画像をクリックすると、こんなモーダルが用事されます。 とじるボタンを押すと元の画面に戻ります。 App.js i…
react2(GitHub DesktopのRepository名)をreact-appに変更するまでの手順を書きます。 ①View on Githubをクリックして、リモートのGithubページに飛ぶ 画面中央のNo local changesにあります。 3つある内の一番下です。 ②settingタブを開く ③新しい名前をRepo…
まずは、React Appを編集してHello Reactと表示させる 色々ファイルはありますが、App.jsを編集するとブラウザの表示が変わるので、このファイルを編集していきます。 import React from 'react'; この記述はもともとありました。 class App extends React.C…
progateでReactのⅡまで学習したので、ローカル環境でも試してみたいと思いました。 まずは、手軽に始められそうなReact Appを導入してみました。 公式サイトの説明 公式サイト https://ja.reactjs.org/ node.jsのインストール 推奨版をダウンロードしました…
deviseを使えば、Ruby on Railsにユーザー機能を付け加えることが出来ます。 今回は、以前作りかけていたアプリケーションに、deviseを使ってユーザー機能を付けていきたいと思います。 まずは、Gemfileに以下の記述をします。 gem 'devise' その後、bundle …
このようなフォームがあるとします。 html(haml)はこちら = form_tag("/create") do %input{placeholder: "webサイトの名前",name: "site_name"} %input{placeholder: "URL",name: "site_url"} %input{placeholder: "ID",name: "site_id"} %input{placeholde…
ターミナルで、rails g model info と入力するとinfosテーブルを作るために必要なモデルファイルやマイグレーションファイルが生成されます。 マイグレーションファイルの中身を編集していきます。 class CreateInfos < ActiveRecord::Migration[5.0] def ch…
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"> </script> まずは、この1行をapplication.htmlのheadタグ内に記述します。 <script src="script.js"></script> 次に、この1行をbodyの閉じタグの直前に記述します。 そして、app > assets > javascripts に、script.jsファイルを作成します。 $(function() { alert("読み込みに成功しました。") }); そ…
InformationsController#index is missing a template for this request Informationsコントローラーのindexアクションがこのリクエストに対して、テンプレートが欠けている。 ルーティングはこちら Rails.application.routes.draw do get "/" => "informati…
このようなアップロードスペースのどこをクリックしてもファイルの選択画面が開けるようにしたい。 現状、この部分をクリックした時にしか開けない。 さらに、この部分を非表示にしたい。 現在のHTML <div class="upload-space"> <input type="file"> </div> CSS .upload-space { background-color: #f5f5f5; hei…
