Clik here to view.
Goole maps API でドラゴンボールの情報を快適にみよう！！
はじめにピンに情報を埋め込む方法他のピンをクリックした時cssで装飾最後にピンに情報を埋め込む方法ピンに情報を埋め込む方法は私の一個前の記事で紹介しています！ぜひ参考にしてください！https://qiita.com/Ryunosuke-watanabe/items/48c8ec80f87283cc0006今回は前回立てたピンをクリックしたあとに、他のピンをクリックしたときの挙動を施します。複数のピ...
View ArticleHTML&CSS基本
タグの違いが分からなくて苦手意識しかなかったが特徴がわかった備忘録HTMLは一番基本のウェブに表示されるもの<!DOCTYPE HTML><html> <head> <meta charset="UTF-8"> <title/title> </head> <body> ←ここに表示するものを書いていく...
View ArticleClik here to view.
【おい牛】CSSで円弧状の区切り線をつくる【模写】
はじめにHTMLとCSSの基礎を学びおえたので、ためしに明治おいしい牛乳のパッケージを模写してみました。出典：明治おいしい牛乳 おいしい暮らし～Natural Taste～ | 株式会社...
View ArticleClik here to view.
Google maps APIでドラゴンボールの場所を検索してみよう！
はじめにピンを快適にする方法Geocodingとは実装ピンを快適にする方法前回はピンを快適にする方法を記事で紹介しました！前回からの続きとなりますので是非参考にしてください！！https://qiita.com/Ryunosuke-watanabe/items/958ed12471effc8fd778Goecodingとはジオコーディングとは住所や地名から緯度経度の情報を出すことです！この機能を使え...
View ArticleCSS 見出しに横棒
CSSで見出しに横棒をつける<h2class="line">ライン</h2>.line{display:flex;align-items:center;}.line::before,.line::after{content:"";height:1px;width:10px;background-color:#333;}ーラインー↑こんな感じの横棒を付けられる。...
View ArticleClik here to view.
html&css markerで任意の目次を作る
最近極鶏のラーメンが食べたいですついでに言うと猪一のラーメンも食べたいです目次目標HTMLCSS目標リストの入れ子で通常のリストだと↓見えにくい。↓こんな感じのリストを作るHTML今回はolで括りましたがulでも大丈夫です。それぞれのolにfirst second...
View Article初心者によるプログラミング学習ログ 317日目
100日チャレンジの317日目twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。すでに100日超えましたが、継続。 100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。 317日目は、おはようございます317日目 2h・架空LP模写8日目1h（@ririru_123）・架空LP模写：制作一覧、スキル部分を作成・ポートフォリオ作成...
View ArticleClik here to view.
【Rails】テーブルを分けて複数の画像をアップロードする
複数枚の写真を一度に保存する機能の実装において、【itemテーブル】と【item_imageテーブル】の二つに分けて複数枚の写真を保存する機能を実装した際の手順をまとめたのでご紹介します。完成形○ 商品写真は最大で10枚まで投稿可能。○ 一つのファイルフィールドに一つの写真でアップロードしていく。○ 5枚投稿時点で下段に切り替わる。1. HTMLの用意sample.haml ~ 省略 ~...
View ArticleClik here to view.
Rails6+Reactで付箋アプリっぽいページを作ってみた。4 (UI作成編2)
記事について前回まででUIの作成を行いましたが、見た目があまりに寂しいので、スタイルシートを使って、それっぽく見せてみます。関連する記事書いているうちに分量がすごくなって記事を分割したので、リンク先をまとめておきます。その１(環境構築〜モデル作成編)その２(API作成編)その３(UI作成編1)その４(UI作成編2)おまけ(モデルのテスト編)スタイルシートwhite_board/main.htmlで使...
View Article【HTML, CSS基礎】インライン要素、ブロック要素の配置方法
HTMLとCSSの基礎をすぐ忘れてしまうので、メモしたいと思います。ブロック要素、インライン要素とはブロック要素文字通りかたまりを表す要素のことで、箱をイメージするとわかりやすいと思います。ブロック要素は高さや幅を指定することができます。このブロック要素の大きさを調整して、ウェブサイトをおおまかな見た目を作っていきます。例)...
View ArticleClik here to view.
[CSS]画像を重ねる時、positionやz-indexを反射的に使っていませんか？
CSSで画像を重ねて表示させたいだけなのに、 position:rerative、absoluteやz-indexを反射的に使っていませんか？背景画像に別の画像を単純に重ねるだけなら、...
View ArticleClik here to view.
Expressでcssとjavascriptを読み込む方法
1. ディレクトリ構成Expressでプロジェクトを作成するとディレクトリは以下のような構成になります。詳細は今後に書くとして、cssとjavascriptをテンプレートエンジンへ適用させたい時は以下の手順を行ってください。2. css作成publicフォルダ直下のstylesheetsフォルダにcssファイルを作成してください。3....
View ArticleHTMLのインライン要素とブロック要素
HTMLのインライン要素とブロック要素について、なんとなくの感覚でスタイルをあてていることが多いので、復習。インライン要素横並びに表示され、縦幅・横幅を指定できない。cssでdisplay:block;をあてるとブロック要素の性質を与えれて縦並びにできる。display:inline-block;はインライン要素とブロック要素の両方の性質を併せ持ち、横並びで表示されるが、高さが指定できる。ブロック要...
View ArticleClik here to view.
CSSの子孫セレクタを使うなら子セレクタの方が良いかもしれない理由
はじめに設計なので、これが正解！というものはないです。時と場合によります。今回のケースは、パーツを作っていて、スタイルを当てたい時だと考えています。子孫セレクタとは ・・・ .class .classのことで、子や孫以降全て子セレクタ ・・・ .class >...
View Article初心者によるプログラミング学習ログ 318日目
100日チャレンジの318日目twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。すでに100日超えましたが、継続。 100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。 318日目は、おはようございます318日目...
View ArticleClik here to view.
「こどもれっどまいん」というテーマを作っています。
20200517: 追記フォントの扱いに関して対応が必要な点がありましたので、いちど公開を内容を見直しとさせていただきます。（記事はこちらの問題点を改めるため、このままとしておきます）コメントでご指摘くださった方、ありがとうございます！はじめに /...
View Article最低限知っておきたいBootstrapの使い方
はじめにここでは、Bootstrapの基本的な利用方法について解説します。スターターテンプレートBootstrapには、色々なデザインが用意されていますが、その大元となる「スターターテンプレート」があります。よく使うデザインJumbotronウェブページのヘッダーのテンプレートとして使いやすいデザインです。https://getbootstrap.jp/docs/4.4/components/jum...
View Article
