ヘッダーメニューの作り方【基本的なテンプレの型】

September 30, 2020, 12:48 am

≪ Previous: FLOCSS 設計における Layout レイヤーの再定義

無料学習サイトでヒントを元にhtmlとcssを学習したけど、いざゼロからheaderを作成していくとなると(・・?)←こんな状態（笑）

そうならないために初めから型を用意してみました

html

<!DOCTYPE html><html><head><metacharset="utf-8"><title>サイトのタイトル</title><linkrel="stylesheet"href="stylesheet.css"></head><body><header></header></body></html>

htmlの型はこんな感じ

では次にcssを見てみましょう

css

/* CSSのリセット（消さないでください） */html,body,ul,ol,li,h1,h2,h3,h4,h5,h6,p,form,input,div{margin:0;padding:0;}body{font-family:"Avenir Next","Hiragino Kaku Gothic ProN W3",sans-serif;}li{list-style:none;}

以上になります

ここからどんどんカスタマイズしていき理想のサイトを制作していきましょう。

↧

ホームページ作成でcssを用い横並びのブロックを作成する方法

September 30, 2020, 2:05 am

≫ Next: 【デイトラ】初級ノートDAY2〜DAY4

≪ Previous: ヘッダーメニューの作り方【基本的なテンプレの型】

ホームページ作成でcssを用いて横並びのブロックを作成する方法　「初心者用」

はじめに

ホームページ作成で横並びのカラムの記述方法を初心者でもわかるようにまとめてみました。
横並びのカラムは使用頻度が高く簡単に思われがちですが、ブロックの間に隙間が空いてしまったり
他にもいろんな横並びの方法が存在していて、初心者にはなかなかとっつきにくいと思います。
初心者の私があとで見直すためのメモとして残しているものです。
よかったら参考にしてみてください。コピペするだけで再現できるように全てのコードを省かず載せています。
目標は下の画像です。

まずはhtml

htmlは下記のように親要素wrapperと子要素wrapper-sub A、wrapper-sub Bで構成されています。
最初の！DOCTYPE〜bodyまでは挿入コードで基本みんな同じになります。

index.html

<!DOCTYPE html><htmllang="ja"><head><metacharset="UTF-8"><title>###</title><linkrel="stylesheet"href="###"></head><body><divclass="wrapper"><divclass="wrapper-sub A"></div><divclass="wrapper-sub B"></div></div></body></html>

次はcss

index.css

.wrapper{width:100%;font-size:0px;height:300px;}.wrapper-sub{width:calc(100%/2);font-size:16px;height:100%;display:inline-block;}.A{background-color:red;}.B{background-color:blue;}

cssは左側と右側の要素の色を赤と青に設定します。
ここで重要なのは親要素に（.wrapperで）font-size:0;を指定することです。
font-size:0;を行わないと下記画像のように横に並ばずに上下に並んでしまいます。
子要素の間には隙間があります。この隙間を考慮すると、全体のちょうど半分のサイズにならずに下に回り込んでしまいます。
そこでこの隙間をなくすためにfont-size:0を使用します。

↧

【デイトラ】初級ノートDAY2〜DAY4

September 30, 2020, 7:01 pm

≫ Next: ヘッダーの背景に画像を挿入する簡単な方法

≪ Previous: ホームページ作成でcssを用い横並びのブロックを作成する方法

◆悩んだとこ、後から気づいたとこをシェアしていきます。

デイトラをはじめました。
現在中級に入ったところですが、つまずくようになってきたので
初めて復習をしています。

復習にあたって、VSCodeでmarkdownを使ってノートをとるようにしました。
せっかくなので、同じ悩みの方に向けて投稿していきます。

単元を学習した後に読むのが良いと思います。

わたしも同様に初学者です。内容の正確性を保証することはできません。

✔この記事で解決できること

講義内容と課題の中でわからないことが解決できるかもしれない。
調べる時間を短縮できるかもしれない。
後から重要だと気づいたことを共有して、学習を効率化できるかもしれない。

◆DAY2 HTML を書いてみよう

✔ ブロック要素、インライン要素

ここはよく確認したほうが良いです。
私は曖昧にしたまま進んだので、
毎回a、ul、inputの中央揃えなどで頭を捻りました。

違い	ブロック	インライン
改行	要素の前後	入らない
幅、高さ	指定できる	指定できない
margin	上下左右	左右のみ
タグ	div,h1,p,ul	a,span,input

◆DAY3 CSS を書いてみよう

✔ セレクタ、プロパティ、バリュー

セレクタ {
プロパティ: バリュー;
}

HTMLは、要素=開始タグ＋属性＋属性値＋内容＋終了タグ
のようです。
私は混乱したのできをつけて。

✔ 子孫セレクタの要点

忘れやすいです。
複数のセレクタはカンマ,を使う。
これと次の 2 つで十分そう。
いまのところは。

.contents 以下の p をすべてを指定する記述
.contents p {}
.contents 直下の p すべてを指定する記述
.contents > p {}

<divclass="contents"><p>1と2が適用される</p><p>1と2が適用される</p><div><p>1が適用される</p><p>1が適用される</p></div></div>

✔ ボックスレイアウトの注意点

必須です。
当初は、次のことが理解できていませんでしたし、
この観点で教えてくれる教材はなかなか見当たりませんでした。

border はコンテンツエリアを囲う線の太さのこと。上図では、黄色帯のことです。殆どの図で、borderの外枠だけが太く描かれているのでわかりにくい。
width と height はコンテンツエリアを指定する。次のborder-boxで変わります。
border-box は width と height の指定範囲をコンテンツエリア、padding、border にする。コンテンツエリアを縮小して調整される。

✔px、em、rem の違い

今はpxとemで良さそう。

px 絶対値長さの単位
em 相対値親要素に対する割合 0.5em = 50%
rem 相対値 html タグに対する割合 r は root

参考サイト
https://qiita.com/39_isao/items/e8242901ba1aadb75676

✔ 背景

初級が終わった後でも知らなかったもの。
今は流しても良いかも。

background-size: contain;
コンテンツエリアを埋めるように画像を繰り返す
background-repeat: no-repeat, repeat-Y;
画像を繰り返さない、縦方向に繰り返す
background-attachment: fixed, scroll;
背景を固定する、スクロールできるようにする

✔float

flexboxがあるので、もしかしたら実務であまり使わないのかもしれないが、
理解だけはしたほうが良いのかも。
浮く、回り込むといった抽象的な表現で説明している教材が多いので、
仕組みを調べてみた。
以下はリンク先の補足です。

box（ブロック）の高さは、指定がない場合コンテンツエリアの中身で決まる。

しかし、float を設定すると親の box から浮いてしまう。なので、
親 box のコンテンツエリアに float の box は存在しなくなる。
その分親 box の高さがなくなる。

float が設定された box の次に clear を設定すると

float の box + clear の box までが親 box のコンテンツエリアに収納され、

親 box が高さを持つ。

参考サイト
https://60pablog.com/css-clear/

✔flexbox

重要。
並べたい要素の親に display:flex;を記述し、
並べ方のプロパティも一緒に記述するのを忘れない。

最初は、並べたい要素に直接下記を書いて困ってました。
display:flex;
justify-content:center;

参考サイト
https://www.webcreatorbox.com/tech/css-flexbox-cheat-sheet
https://pakupakumukku.com/2020/03/22/post-1629/
https://flexboxfroggy.com/#ja

✔position

曖昧にしないほうが良いです。
流して教わることの多いabsoluteの仕組みを知っておくと
コードが一歩読みやすくなると思います。

static デフォルト
fixed ブラウザを起点に位置固定
relative 本来表示される場所を起点にずらす
absolute 親に static 以外が指定されていると親を起点にずらす

参考サイト
https://www.asobou.co.jp/blog/web/css-position

✔z-index

値が大きいと手前に表示

案外使わない分忘れやすかった。

◆DAY4 環境設定

最近slackで流れてきましたが、めちゃくちゃ困りました。
覚えておいたほうが良いです。
slackの質問スレはナレッジになるので、困ったときは検索してみてください。
私は数時間悩んだ後に思いつきました。

HTMLhint は、中級で入れるプラグインの EasySass と
不具合を起こすので、中級に入る時にアンインストールしたほうがいい。

↧

ヘッダーの背景に画像を挿入する簡単な方法

September 30, 2020, 6:59 am

≫ Next: 【初心者向け】コーディングは難しい言葉を複雑に書く作業ではない。いかに綺麗に書けるかと頭を悩ませるものである。

≪ Previous: 【デイトラ】初級ノートDAY2〜DAY4

はじめに

本日、Qiitaに初投稿となります。
オリジナルアプリ作成時に、なかなかうまく画像が入れられなかったため、簡単にまとめてみました。

ブログにはヘッダー実装の全体像を書いているので見に来て下さい。
https://mikujo.hatenablog.com/entry/2020/09/30/222330

HTML

特別必要な記述はないです。
今回は私がオリジナルアプリ作成で使った記述をそのまま使います。

<headerclass='top-page-header'><divclass="header-top-content"><%=link_toroot_path,class:"header-title"do%><div>sharecling</div><divclass="header-sub-title">〜移動に選択肢を〜</div><%end%></div></header>

CSS

画像の設定はCSSで行います。
今回はheader全体の背景に画像を設定したいため、
headerのクラス属性である、top-page-headerにCSSを適用させます。

.top-page-header{height:65vh;background-image:url('sample.jpg');background-repeat:no-repeat;background-position:rightbottom;background-size:cover;opacity:0.8;}

background-imageからbackground-sizeは以下の様にも記述できます。

background:url('sample.jpg')rightbottom/coverno-repeat;

簡単にコードを解説します。

background-image:url('sample.jpg');

上記の記述にでは背景となる画像ファイルを設定しています。

注意しなければならないことはファイルの指定の仕方。
基本的な事項ですが、ファイルの置いてある階層によっては'images/sample.jpg'
という様な指定が必要になります。

background-position:rightbottom;

上記の記述は、画像のどこの部分を切り取るか大体の位置を指定するものです。
今回は使っている画像の右下付近を使うためこの様な記述ですが、
・左上付近を使う場合

background-position:lefttop;

・中心付近を使う場合

background-position:centercenter;

という記述になります。

最後に以下の記述です。

opacity:0.8;

こちらは
要素を透明にする記述になります。
1.0~0.0の範囲で設定でき、０に近づくほど透明度が上がって行きます。

画像の設定方法は以上になります。

最後に

参考までに私の作成したヘッダー画像を載せておきます。

背景に画像を挿入することにより
簡単にこの様な実装ができますので、ぜひお試しください！

↧

【初心者向け】コーディングは難しい言葉を複雑に書く作業ではない。いかに綺麗に書けるかと頭を悩ませるものである。

September 30, 2020, 7:22 am

≫ Next: SNSボタンのアドブロック対策

≪ Previous: ヘッダーの背景に画像を挿入する簡単な方法

どうも7noteです。プログラミング・コーディングの勉強始めて1週間以内の超初心者向けの記事で。

あくまで印象ですが、非プログラマー・非コーダーの方からみられたエンジニアの印象というのは
「よくわからない複雑な英語を沢山書いている人」
と思わてれいる場合がほとんどかなと思います。

これからプログラミングを勉強始める方へメッセージです。

「プログラミングは短く綺麗に書ける方が美しい」
※例外もあるとは思いますが。。。

やっていない人からすれば確かに沢山の文字を書いてますが、やっている本人からするとどれだけ簡略化できるかを常に意識しながら行なっています。
難しい処理をゴリゴリできる人はすごいかもしれませんが、書いたプログラミングのソースが複雑怪奇な状態になっていれば目も当てられません。

なぜなら複雑な手法を取ることはむしろ害がある可能性も考える必要があります。

「ソースが複雑になることによって起こりえる害は大きく3つ」

処理が重くなり、動作が遅くなってしまう
今後のメンテナンス性が下がる
開発に時間がかかってしまう

初心者の方が中級者に上がろうと思うと、この意識がとても重要です。
ある程度プログラミングを覚えてきたら、「どうやったら綺麗に書けるのだろうか」「どうすれば簡略化できるのだろうか」というところの方に時間をかけるようにした方が良いです。

難しい処理を作らなければならないとなった場合でも、どうやったらその処理ができるのかを考えつつ、どう開発したら早く書けるのか、また今後のメンテナンスがしやすいのかを考えている人がほとんどだと思います。

世の中にはいかに少ない容量（ソース量）ですごいことができるかを競う大会があるほどこの世界は容量や処理速度を重要視しています。

プログラミングするときは簡略化を意識することが大切

思いついた順や、できるところからバラバラに作り始めてしまうと大変です。
完成するものの全容を見れていないと、同じものを2回書いてしまったりする可能性があるからです。

そうすると、処理が重複してしまったり、変更したはずなのにうまく反映されないなんてことが起こります。

デザインを確認したり、仕様書にしっかりと目を通し、頭の中でいいので作る手順をざっくり決めましょう

私はホームぺージ制作をしているのですが、ページを作るときはまずデザインを全部みて、ヘッダー・フッター・サイドバー・メインコンテンツと内容を切り分けます。この時にヘッダーとフッターは同じロゴが使われているなということに気付き、「じゃあhead_logo.pngという名前の画像にはしない方がいいな。」などを考えながら作り始めます。
他にも共通して使えるCSSがないかなどを意識して組み始めています。

時にはあえて長く書いてでも、メンテナンス性を確保することもある

場合によってはあえて行数が長くなる方法を取ることもあります。

基本WEBは左寄せが標準ですが、中央寄せになっているところが8割くらいあるからといって、「全部の要素に中央寄せになる」というCSSを1行で書いても、あとで左寄せの箇所だけ左よせのCSSを書くということはあまりしないようにしています。
このケースでは左寄せのものを中央にして、また打ち消すように左寄せにするというステップが踏まれているため、1つの要素に対して多重に命令が重なってしまっています。
こうなってしまうと予期せぬ動きになってしまったり、他の人が見たときに状態を把握するまでに時間がかかってしまうからです。
なので中央寄せにする所にだけしっかりと中央寄せのCSSを書く方が綺麗だと思います。

このように場面によってはメンテナンス制を重視してあえて長く書くこともあります。綺麗に書く = 短く書くではないという事です。

どうすれば綺麗なソースが書けるようになるのか

大量のインプットとアウトプットをする
同じ物は2度書かないような意識をする
実際に完成したものをあとから修正してみる（ここで不都合に感じた事を次に活かす）
人の書いたソースを見て自分のものにする

とかかな？
答えはないですが、とにかくいろいろなものに触れる機会を増やす事が大切です。

まとめ

開発者になるのであればすごい複雑なプログラミングを求められる場合はごく一部です。それよりも綺麗なソースをしっかりと書ける人の方が需要は高いのではないかなと思います。
駆け出しの頃は1人で開発する場合がほとんどなので、自分が分かれば綺麗にかく必要性がないのであまりきにしないかもしれませんが、綺麗なソースを書ける人材はとても重要です。
仕事としてコーディングをするのであれば、いかに綺麗にかけるのかを追求し続ける努力は、大切なことの1つかなと思います。

おそまつ！

~ Qiitaで毎日投稿中!! ~
【初心者向け】HTML・CSSのちょいテク詰め合わせ

↧

SNSボタンのアドブロック対策

September 30, 2020, 7:41 am

≫ Next: Tyハロトレ32日目

≪ Previous: 【初心者向け】コーディングは難しい言葉を複雑に書く作業ではない。いかに綺麗に書けるかと頭を悩ませるものである。

アドブロックは必要な方には必要不可欠です。
広告を見たくない、ギガを少しでも減らしたい、というニーズがあります。

現にあたしも利用しています。

しかし

アドブロックが昨今強化され、SNSボタンに対してもブロックするようになりました。

対策はとても簡単

Twitter なら、Twitterという文字列をなくし、t という省略文字にする

Facebook なら Facebook という文字列をなくし、f という省略文字にする

画像でSNSシェアリンクを使用したい場合、その画像ファイル名に twitter facebook という文字列を入れない

その他、アイコンジェネレータでもある程度対策が可能です。

ちょっとした問題

これらはHTMLやCSS、場合によってはJavaScriptにまで影響します。

どの要素に置換したか、しっかりと把握する必要があります。

↧

Tyハロトレ32日目

October 1, 2020, 8:40 am

≫ Next: 【作ってみた】理容室の前にある赤と青のくるくる（サインポール）をCSSで再現してみた

≪ Previous: SNSボタンのアドブロック対策

配色

カラーホイール

赤と緑を使ったロゴはなんでしょう？
A)　セブン、モスバーガー

CSS

position: absolute;

position: relative;

重なり順を指定

はみ出たものを下に表示

はみ出たものを左右に表示

はみ出たものを隠せ

はみ出たものを表示せよ

マインドマップ

日付を書いておきましょう。
物事を言葉にして、絵にするとわかりやすいです。

バニシングポイント

消失点（vanishing point）とは遠近法において、実際のものでは平行線になっているものを平行でなく描く際に、その線が交わる点のことです。

フィルター＞バニシングポイント
面作成ツール（マス目ツール）で墓石の角の頂点4つを取ります。

変形ツール（サイズ変更ツール）で「喜」の文字の大きさを調整します。

レイヤーパネル＞fx＞ベベルとエンボス

最後に不透明度を70％くらいにすれば完成です！

↧

【作ってみた】理容室の前にある赤と青のくるくる（サインポール）をCSSで再現してみた

October 1, 2020, 5:43 am

≫ Next: レスポンシブデザインにおけるサイズの設定

≪ Previous: Tyハロトレ32日目

どうも7noteです。この間ドライブしているときにふと理容室のくるくる回るやつをみて、「あ、CSSだけで作れそう」って思ったので作ってみた。

一応既に作っている人がいないかなと思ってしらべたところ、SASSで本格的なものを作っている方がいたので、参考にしながら初心者の方にもコピペで使ってもらえるシンプルなものを作りました。

発想とアニメーションさえクリアすれば結構簡単に作れますよ！

理容店や理髪店のホームぺージを作る仕事があれば、これをひそかに入れてあげると喜ばれそうですね。

（これがサインポールって名前だということ、初めて知りました。）

ソース

index.html

<divclass="pole"><divclass="head"></div><divclass="loader"><divclass="inset"><!-- 大きさや必要に応じてdivの個数を調整してください。 --><divclass="red"></div><divclass="blue"></div><divclass="red"></div><divclass="blue"></div><divclass="red"></div><divclass="blue"></div></div></div><divclass="base"></div></div>

style.css

body{background:#333;/* 背景色を黒に指定 なくても大丈夫。 */}.head{width:80px;/* 上部の飾りの幅 */height:20px;/* 上部の飾りの高さ */background:#FFF;/* 上部の飾りの色 */}.loader{width:80px;/* くるくるの横幅 */height:250px;/* くるくるの長さ */background:#E7EBEB;/* くるくるの背景の色 */overflow:hidden;/* はみ出た部分は非表示 */box-sizing:border-box;/* 計算を簡単にするため */border-right:6pxsolid#E7EBEB;/* くるくるの背景（右側）の色 */border-left:6pxsolid#E7EBEB;/* くるくるの背景（左側）の色 */}.loader.inset{animation:spin1sinfinitelinear;/* 動きを設定。詳細設定は下で記述 */}.loader.insetdiv{width:200%;/* 線1本の幅 傾けるので、大きめに指定 */height:28px;/* 線1本の高さ（★） */margin-bottom:42px;/* 線と線の間隔（★） */position:relative;/* left↓を指定するため */left:-50%;/* 線の幅が200%あるので、左右真ん中にもってくる */transform:rotate(-40deg);/* 線の角度 */}.loader.red{background:#E33035;/* 赤色 */}.loader.blue{background:#563B5E;/* 青色 */}.base{width:80px;/* 下部の飾りの幅 */height:20px;/* 下部の飾りの高さ */background:#FFF;/* 下部の飾りの色 */}@keyframesspin{from{transform:translateY(0px);/* スタート地点 */}to{transform:translateY(-140px);/* ゴール地点 （♦） */}}

解説

発想としては、本物のサインポールみたいに回転させているわけではなく、「斜めの赤と青の線を下から上に〇秒かけて移動させ、移動が終わったら初期位置に戻り、また同じ動きを繰り返す」というような処理をさせています。そのため、計算したサイズに合わせて数値を入れなければ不自然な動きをしてしまうので注意が必要です。

計算時の注意点

.loader .inset divのheightと.loader .inset divのmargin-bottomの合計（★の合計）で、@keyframesのto（♦）が割り切れる数字に設定する必要があります。
今回私が作ったものでは★の合計が28+42で70。♦が140なので、140÷70はちょうど割り切れるので、動きをくり返ししても綺麗にみえています。

アニメーションについて

CSSアニメーションを使い動きの処理を行なっています。from⇒toに向かって処理を行います。spinとかいてあるのは処理の名前でです。
アニメーションを実行させるために、animation: spin 1s infinite linear;と書いてますが、日本語でいうと「spinって処理を等倍の速度(linear)で1秒間で行いなさい。そしてそれをくり返し(infinite)なさい。」的なことがかいてあります。

まとめ

発想とアニメーションさえクリアすれば、あとは基礎さえ勉強していれば自由にカスタマイズすることができると思います。
実際にこの記事を読んで理容店のホームぺージに使いました！という方がいらっしゃいましたらコメントいただけると嬉しいです！

おそまつ！

~ Qiitaで毎日投稿中!! ~
【初心者向け】HTML・CSSのちょいテク詰め合わせ

参考

床屋さんに有るクルクル回るアレが CSSだけで作られたアニメーション Barbershop Loader

↧

レスポンシブデザインにおけるサイズの設定

October 1, 2020, 7:18 pm

≫ Next: 文系未経験からアプリケーションエンジニアに就職してからの勉強の流れをまとめてみた。

≪ Previous: 【作ってみた】理容室の前にある赤と青のくるくる（サインポール）をCSSで再現してみた

フロントエンド初心者である自分がWebページをHTMLとCSSで実装するときに、「レスポンシブに対応した」とは具体的にどのような状態？どう実装すれば良いの？と頭の整理が必要だったのでまとめました。

レスポンシブデザインとは？

まず、改めてレスポンシブデザインとは「どんな端末のブラウザで表示しても見やすいWebページのデザイン」です。

PCやスマホ、タブレットと異なるディスプレイの大きさの端末で同じWebページを表示したときに、全部の端末でPC向けのデザインで表示すると、スマホだと画面が小さすぎて見辛かったりします。
逆に、スマホだけを想定して実装したページは、大きなPCのディスプレイで見ると間延びして見えるかもしれません。
これらの問題を解決し、表示するディスプレイの大きさに応じて見やすいデザインを表示するのが「レスポンシブデザイン」です。

各要素の「サイズ」をどう対応するのがベストか

デザインに関することなので、Webページによってどう見せるのがベストなのかは異なるかと思うのですが、ベースとなる考え方は整理しておこうと思います。
ここでは、各要素の「サイズ」について整理します。

サイズについての対応方法を大きく次の3つに分けました。

パターン1・・・ディスプレイサイズに関わらず、一定のサイズを表示する。
パターン2・・・切替えるポイント(ディスプレイの横幅が〇〇px以上/以下の場合)を設定し、ディスプレイの大きさによってサイズを切替える。
パターン3・・・ティスプレイのサイズに応じて常に表示するサイズを変動させる。

各要素について、次のように対応するのがベストではないかと整理してみました。

各パターンの実装方法

パターン1（一定）

px・rem・em・% などの単位を使ってサイズを指定します。
単位の詳細はこちらに記載しています。

どの単位を選ぶかによってサイズの設定方法は変わりますが、ディスプレイを拡大/縮小しても初期表示のサイズから変わりません。

パターン2（ポイントで切替)

CSSの「メディアクエリー」という設定を追加することにより、指定したサイズ以下のディスプレイ表示の場合にCSSを切り替えることができます。
具体的な設定方法は、こちらのサイトが詳しくて分かりやすいです。
切替ポイント(max-width)をどれくらいのサイズにするかですが、大体600px前後で切り替わるように設定していることが多いようです。

パターン3(スムーズに変動)

vw・vhなどの単位を使ってサイズを指定します。ディスプレイのサイズに対する割合で各要素のサイズが決まるため、ディスプレイを拡大・縮小すると各要素も拡大・縮小します。
単位の詳細はこちらの記事が分かりやすいです。

サイズ以外の対応について

各要素のサイズ以外にも、デザインにおいて考慮すべき点はあります。
例えば、ディスプレイのサイズによってボックス要素を横に並べるか、縦に並べるか・・1列表示なのか、3列表示なのか・・・など、レイアウトそのものを切替えたい場合もあるかと思います。そのような場合はパターン2のメディアクエリーを使って、CSSを切り替える必要があります。
その辺りはまた整理が必要になれば書こうと思います。

参考

↧

文系未経験からアプリケーションエンジニアに就職してからの勉強の流れをまとめてみた。

October 1, 2020, 7:36 am

≫ Next: 【Rails６】Railsで背景画像を設定する方法【CSS】

≪ Previous: レスポンシブデザインにおけるサイズの設定

昨年の3月頃にweb系自社開発会社に内定をもらってからはや1年半。
サーバーサイドからフロントまで幅広く学んできたのでここまでの学習の流れをまとめておきます。

これからWebアプリケーションエンジニアになることを考えている人、または自分と同じくエンジニアになってまだ日が浅い人、そんな方の参考になれば良いと思います。（技術に関しては結構抽象的に書いています。）

大まかな流れとしては
「言語の基礎的な学習」→「CRUDができるアプリケーション作成」→「apiを活用したアプリケーション作成」→「フレームワークでの実装」という流れを辿ってきました。

Progateで一通り学習

それまでプログラムを一行も書いたことがなかった私はProgateで学習することから始まりました。

会社のアプリケーションがphpで書かれていることもあり、phpの講座を一通り受けました。
また、それに加えてHTML,CSS,SQL,コマンドライン、gitの講座を受けた記憶があります。
細かいところが理解できなくてもとりあえず進んでいくことを意識しました。

スライド形式で授業が進んで、エラーも詳しく出してくれるのでサクサク進みました。←理解は曖昧
でも皆さんおっしゃるように一番力がつくのは自分で何かを一から作る時だと思うので、ここでそんなに時間をかける必要はないかもしれないです。

オリジナルアプリケーション

Progateを1ヶ月くらいで終わらせた後はオリジナルのアプリケーション作成に入りました。

PHP を使ってCRUD処理を行うアプリケーションを作る。というのが会社から与えらた課題で、ネットに転がってる記事を参考に簡易掲示板のようなものを作成しました。

この味気に読んでいて参考になったのは以下の本でした。
いちばん分かりやすいphpの教科書
 これから始めるmysql入門
 プログラムはなぜ動くのか

Progateで学んだ断片的な知識が具体的にアプリケーションを作る＋本を読む、ことによって体系的に理解ができるようになりました。

ただこの頃はクラスとかメソッドとかいまいち分かってません。笑
オブジェクト指向もクソもなく、ただただつらつらと書いた、今見ても恥ずかしいコードです笑

ただ、実際に動くものが一から作れたということは素直に嬉しかったです。

api連携したアプリケーション

その次は外部apiを利用したアプリケーションの作成を行いました。

毎日一定の時間になったらIDCFに接続しサーバーの稼働状況を取得。
スラックにそれらの情報を投稿するという簡単なアプリケーションでしたが、そもそもapiとは？どんな使い方をするのか？という学習につながりました。

jsonとか初めて知りました。笑

毎朝8時に気象庁のapiを用いて天気を取得し、LINEを送ってくれるボットも会社の課題とは別に個人的に実装しました。

広告レポート自動収集

社内の広告運用チームが様々な媒体から手動で日々取得している成果レポートを自動集計するアプリケーションの作成に関わりました。

とはいえ、このプロジェクトで自分がやったことはphpspredsheetを用いて収集したデータをスプレッドシートに出力するという部分だけです。笑

とはいえ、初めての複数人での開発だったので先輩社員のコードを読んだら、それを参考にコードを真似て書いてみたりと勉強になりました。

プロジェクト自体がlaravelだったこともあり、MVCの流れやlaravelでの基本的な書き方はここで理解が進みました。
Laravelの学習には下記のサイトをハンドオン形式で進めたのが勉強になりました。
入門Laravelチュートリアル

Laravelこれから書くって人にはもってこいです。

リーダブルコードも大変参考になりました。読む前と後では全然コードが変わります。

ここまでで12月。約8ヶ月くらいです。

その後入社までは海外旅行をしまくっていたので勉強のペースは少し落ちます。
会社に行っていない間はHTML/cssに関して勉強しました。
下記の本を実装しながら読んで学習を進めました。
HTML5/CSS3モダンコーディングフロントエンドエンジニアが教える3つの本格レイアウトスタンダード・グリッド・シングルページレイアウトの作り方

管理画面

入社した今年の4月からは会社の広告配信アプリケーションの管理画面リニューアル案件にアサインされました。
この案件では学んだことが数多すぎて書ききれません。

ここでもまたlaravelが登場するのですが、コードを書くだけでなく設計や、アプリケーション全体の作りまで様々なことを経験しました。

デザインパターンやオブジェクト指向、単に実装するのではなく、拡張性、保守性、改修性が高いのはどんなコードなのかということを少しずつ考えられるようになってきました。でもやっぱり難しい…
フロントに関してもデザイン書に基づいて実装しなければいけなったため、フロント周りの技術も身につきました。

参考になった本
・PHPフレームワークLaravel Webアプリケーション開発
・オブジェクト指向でなぜつくるのか
・オブジェクト指向における再利用のためのデザインパターン

疲れてきたのでこのくらいで終わります。
webエンジニアを目指すという方はぜひ参考にして学習を進めてみてください。
理解した！→やっぱり全然わからない！の繰り返しだと思いますが、やればやるだけできることは確実に増えてきて楽しくなってくると思います。

それでは！

↧

【Rails６】Railsで背景画像を設定する方法【CSS】

October 1, 2020, 7:40 am

≫ Next: 2020/10/2 朝アウトプット

≪ Previous: 文系未経験からアプリケーションエンジニアに就職してからの勉強の流れをまとめてみた。

地味にいつも忘れる＆意外と正しい情報にたどり着くのに時間がかかったので、忘れないように備忘録として残しておきたい思います！

Railsで背景画像を設定する方法①

画像ファイルをapp/assets/images配下に配置して以下のように記述するだけです。

custom.scss

.background{background-image:image-url('haikei_image.jpg');}

こちらは直感的にかけるので僕はこっちが好きですね。

Railsで背景画像を設定する方法②

こちらも同じように画像ファイルをapp/assets/images配下に配置して以下のように記述します。
①と違うのはファイル名をcustom.scss.erbとして、拡張子に.erbを付けることです。

custom.scss.erb

.background {
  background-image: url("<%=asset_path('haikei_image.jpg')%>");
}

こちらでもうまくいったので最初はこちらを使っていたのですが、すぐやめて別の方法を探す羽目になりました。
この場合、当然erbファイルとしてエディターに認識されてしまうので、CSSを書くときに補完機能がなくなってしまいます。かなりめんどくさいなと思いましたｗ
何か対策方法があれば、コメントいただけると嬉しいです！

【番外編】うまくいかなかった方法

public/imagesに画像を配置し、

background-image:url('/images/haikei_image.jpg');

と書く方法もあるようですが、これではうまく反映されず地味に時間食いました。
consoleでリロードエラーみたいなのがでます。。

最後まで読んでいただきありがとうございます！

こんな感じで毎日学習したことをアウトプットしています！少しでもお役に立てれば幸いです。ご指摘や感想などあればコメントいただけると嬉しいです！

↧

2020/10/2 朝アウトプット

October 1, 2020, 3:25 pm

≫ Next: Materializeをflexbox化してcolの高さを適応的に揃える

≪ Previous: 【Rails６】Railsで背景画像を設定する方法【CSS】

基礎振り返り

HTMLCSS

ブロックレベル要素は横幅いっぱいで表示される四角い箱
インライン要素は中身のテキスト量だけ横幅が広がる

Ruby

irbコマンドはターミナルから直接Rubyプログラムを動かせる機能を起動する
lengthメソッドは文字列の文字数を数える
to_sメソッドは数値を文字列に変換
to_iメソッドは文字列を数値に変換
式展開は文字列のなかで#{式}

↧

Materializeをflexbox化してcolの高さを適応的に揃える

October 1, 2020, 5:15 pm

≫ Next: CSSの中央要素（縦・横にセンタリング）

≪ Previous: 2020/10/2 朝アウトプット

ポイント

floatで作るグリッドは横並び部品のcolの高さを揃えることができない。揃えようとしたらheightに固定値を入れるしかない
materialize.cssなどfloatベースで作られているグリッド実装があるので注意。ただし、適当なcssを足してflexboxベースで動かすようにすることは可能

floatでグリッドを作った場合の動き

float: leftな要素は一行に入りきらないときに「上から下に入れる場所を探索していって、入れる行が見つかったら左に(止まるまで)スライドして行って、結果全域が入ればそこに表示」という仕組みのようす。なので一行目に並んでる要素たちの高さが一定でないと変なところに配置される。

<linkrel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"><divclass="container blue"style="width: 600px;"><divclass="row orange"style="margin-bottom: 0;"><divclass="col s6"><divclass="card yellow">
                1.あああああああああああああああああああああああああああああああああああああああ
            </div></div><divclass="col s6"><divclass="card yellow">
                2.一行目のcolの高さが不一致だと
            </div></div><divclass="col s6"><divclass="card yellow">
                3.これが変な位置に入ってしまう
            </div></div><divclass="col s6"><divclass="card yellow">
                4.ああああああ
            </div></div></div></div>

flexboxでグリッドを作った場合の動き

flexboxは横並びのcolの高さ (の関係性) を明示的に指定できるようになっている。ちなみに2020年7月現在、flexboxを使っていてもそれ自体が致命的な表示崩れになることはあんまりなさそう。

align-items: stretch (デフォルト: 高い方に合わせて低い部品も引き伸ばす)
align-items: center (中央に寄せる)
その他詳しくは公式を参照

flexboxはほかにも、部品を並べる方向、幅が足りないとき折り返すかどうか、各部品の伸縮する割合、配置する順番、などなどいろいろ調整できる。メディアクエリを組み合わせるとモバイルときは1,2,3 ラップトップ幅では1,3,2みたいな順番で表示・折り返しなどできる。

materialize.cssをflexbox化する

float関係のcssを打ち消して、flexbox関連のcssを足すと、materialize.cssを使ったままflexboxベースでレイアウトできるようになる。その指定のためのcss classの名前をとりあえずm-flexとかにすると、こんな感じ。

<linkrel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"><style type="text/css">.row.m-flex{float:none;display:flex;flex-flow:rowwrap;}.row.m-flex.m-flex.col{/* 優先度を上げるために2回指定 */float:none;}.row.m-flex.m-flex.col:not([class*="offset-"]){margin-left:unset;/* 元々ついているmargin-left: autoを解除 */}</style><divclass="container blue"style="width: 600px;"><divclass="row m-flex orange"><divclass="col s6"><divclass="card yellow">
                1.あああああああああああああああああああああああああああああああああああああああ
            </div></div><divclass="col s6"><divclass="card yellow">
                2.一行目のcolの高さが異なっていても
            </div></div><divclass="col s6"><divclass="card yellow">
                3.これは次の段に必ず入る
            </div></div><divclass="col s4 offset-s1"><divclass="card yellow">
                4.offsetとかもそのまま使える
            </div></div></div></div>

↧

CSSの中央要素（縦・横にセンタリング）

October 1, 2020, 6:39 pm

≫ Next: [ServiceNow]参照フィールドを確定するとスタイルが崩れる問題の対処方法

≪ Previous: Materializeをflexbox化してcolの高さを適応的に揃える

1．水平方向

それはinlineまたはinline-*要素（text やlinkなど）ですか？

text-alignを使用して、inline要素を親のblock-levelの内側の水平方向の中央に配置できます。

style.css

.center-parent{text-align:center;}

それはblock-levelの要素ですか？

margin-leftとmargin-rightをauto値に設定することでblock-levelの要素を中央に配置できます（この要素は幅を設定する必要があります。そうしないと、幅全体を占めして、中央に配置されません）。次の省略形を使用するできます。

style.css

.center-me{margin:0auto;}

複数のblock-levelの要素がありますか？

行の中央に配置する必要がある2つ以上のblock-levelの要素がある場合、表示方法をinline-blockに変更することをお勧めします。

style.css

.center-parent{text-align:center;}.center-me{display:inline-block;}

または、flexboxを使用することもできます。

style.css

.center-parent{display:flex;justify-content:center;}

2．垂直方向

それはインラインまたはインライン-*要素（テキストやリンクなど）ですか？

その要素は1行しか占めていませんか？

多くの場合、インライン/テキスト要素は、上下のパディングが等しいという理由だけで中央に配置されます。

style.css

.center-me{padding-top:30px;padding-bottom:30px;}

何らかの理由でpaddingを使用できず、折り返さないと思われるtextを中央に配置しようとしている場合は、line-heightを同じ高さに設定できます。

style.css

.center-me{height:100px;line-height:100px;white-space:nowrap;}

その要素は多くの行を占めていますか。

paddingを上下に等しく設定すると、複数行の要素を中央に配置するのにも役立ちます。ただし、同じ要素がテーブルセルで作成されている場合は、vetical-alignプロパティをmiddleの値に割り当てることができます。

style.css

.center-me{verticle-align:middle;}

flex-directionの値がcolumnであり、高さが固定されているflexboxを使用することもできます。

style.css

.flex-center-vertically{display:flex;justify-content:center;flex-direction:column;height:400px;}

上記のいずれの方法も機能しない場合は、「ゴースト要素」という手法を使用できます。この手法では、full-heightの疑似要素がコンテナ要素に配置され、textにvertical-align:middleが割り当てられます。

style.css

.ghost-center{position:relative;}.ghost-center:before{content:"";display:inline-block;height:100%;width:1%;vertical-align:middle;}.ghost-centerp{display:inline-block;verticle-align:middle;}

それはblock-levelの要素ですか？

その要素の高さを知っていますか？

通常、要素の高さは固定されていません。その場合は、次のように要素を垂直方向の中央に配置できます。

style.css

.center-parent{position:relative;}.center-me{position:absolute;top:50%;height:100px;margin-top:-50px;}

その要素の高さがわかりませんか？

テクニックは高さを知ることに似ていますが、負のmargin-topを使用する代わりに、要素をその高さの約半分に垂直に移動します。

style.css

.center-parent{position:relative;}.center-me{position:absolute;top:50%;transform:translateY(-50%);}

flexboxは使えますか？

これがflexboxで簡単にできるのは当然のことです。

style.css

.center-parent{display:flex;flex-direction:column;align-items:center;}

3．水平方向と垂直方向の両方

これを実現するには、上記の水平方向と垂直方向のセンタリング手法を組み合わせて使用できますが、以下の手法を使用することもできます。

その要素は固定の幅と高さですか？

要素を上下50％で絶対的（absolute）に配置した後、要素の幅と高さの半分に等しい負のmarginを使用すると、多くのブラウザーで要素が完全に中央に配置されます。

style.css

.center-parent{position:relative;}.center-me{width:200px;height:100px;position:absolute;top:50%;left:50%;margin:-50px00-100px;}

その要素の幅と高さがわかりませんか？

transformプロパティを使用して、要素を高さの半分上に移動し、幅の半分を左に移動して、上記と同じ結果を得ることができます。

style.css

.center-parent{position:relative;}.center-me{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}

flexboxは使えますか？

flexboxで両方のディメンションを中央に配置するには、justify-contentとalign-itemsを使用する必要があります。

style.css

.center-parent{display:flex;justify-content:center;align-items:center;}

4．結論

CSSを使用してすべてを中央に配置できます。

↧

[ServiceNow]参照フィールドを確定するとスタイルが崩れる問題の対処方法

October 1, 2020, 9:35 pm

≫ Next: web開発勉強する体験

≪ Previous: CSSの中央要素（縦・横にセンタリング）

事象

Parisにアップデート後、サービスポータルのカタログフォームで参照フィールドの選択ボックスを確定すると幅が短くなる。

プラットフォーム

Paris

参考URL

https://hi.service-now.com/kb_view.do?sysparm_article=KB0820131

原因

参照フィールドの左側に[i]ボタンを表示させないように、下記のようなCSSを追加していたため

.add-on.ng-scope {
  display: none;
}

対処方法

対象のスタイルを削除するだけだと[i]ボタンが復活してしまいます。

下記のスタイルを追加

.add-on > button.lookup {
  display:none;
}

結果がこちら

↧

web開発勉強する体験

October 1, 2020, 9:03 pm

≫ Next: Redmine ViewCustomizeで準備して良かったもの

≪ Previous: [ServiceNow]参照フィールドを確定するとスタイルが崩れる問題の対処方法

学校に先生から教えてもらった知識の大方は仕事に合わないである。そこで、ひとつ技術が身につくので、いい仕事を探しやすくなるかなあと思っている。よく聞いた話ですが、「web開発が初心者に対するほかの種類より成果見やすくて、モチベーションを上げる。モチベーションを持つことができれば、引き続き勉強することができるなれます」。だから、web開発を選びしようとすることを決めってしまった。ところが、企業の募集要項を開き見たときに僕は驚いた。なぜ条件はこんなに多いとか、自分は全く満たしていないとかって思う。

１月中旬から、僕はうとうとと学習に取り組んだ。まず、freeCodeCampで基礎のHTMLやCSSを習った。freeCodeCampというはオンラインでweb開発者のあつまりであり、ここで開発における様々な必要な技術を学べる。しかも、実践力を非常に重視している。実行しながら知識を吸収しているという主旨である。その自分自身の手で完成しった作品を見たとき、なるほど、面白い気分になれる。誇りも感じられる。一日に３〜４時間プラグラミングしっていた。疲れた頃、よく数日を休んだ。なんかちょっと不真面目な感じそうだね。２ヶ月後、４月になった。４月から６月までの間には、たくさんの本を読んだ。本を読むことで概念やコード後のロジックが理解できるようになった。でも、読書だけするなら、プラグラミング能力が退化するになるかもしれません。長い時間を過ぎると、習ったことを忘れてしまって、繰り返し読まなければなりません。僕の場合はもう何回も読んでしまった。

プロジェクトについては初心者なら大きなのをしなくて小さいのをしてください。この小さいのっては今自分の能力で解決できることなんです。なぜなら、大きいプロジェクトは及ぶ方面がいろいろから。技術だけでなく、設計やデザインも含まれている。最初の頃僕は考えず、プロジェクトに取り組んだ。結果は難しさが高くになった一方だ。複雑すぎて、一つジェクトを完全に作るのは不可能になった。一部だけをするのは学んだこともあるんだけど、前者より自分はできるのかという思いを感じられないんだと思う。

上記から、まとめた技術を勉強するの過程中以下の３つの注意点をご注意ください。

時間管理すること
読書だけしなくて、プロジェクト主導すること
適切なプロジェクトを選ぶこと

僕の体験からもし皆さんはなにか考え事があれば、嬉しいです。これから、普通の方法を変えて試してみたいと思っています。次は皆さんにその経験を紹介したいと思います。

↧

Redmine ViewCustomizeで準備して良かったもの

October 1, 2020, 10:21 pm

≫ Next: select(プルダウン) の文字を左右中央揃えにする

≪ Previous: web開発勉強する体験

概要

Redmineにview customize plugin Pluginを導入してから準備して良かったコードをまとめる.
導入方法等は公式のGithub:redmine-view-customizeに載っているので割愛.

チケット(JavaScript)

チケット編集時のエンターキー誤送信防止

パスのパターン/issues.

$(function(){$(document).on('keypress','#issue-form input[type="text"',function(event){if(event.keyCode==13){returnfalse;}});});

期日1週間前のチケットにthis_week_taskのクラスを追加

パスのパターン.*.

$(function(){vartoday=newDate();vary=today.getFullYear();varm=today.getMonth()+1;vard=today.getDate();vartoday_str=y+"/"+m"/"+d;varlimit_day=7;$('table.list.issues td.due_date').each(function(){due_date_millsec=Date.parse($(this).text());diff=due_date_millsec-Date.parse(today_str);if(diff/(1000*60*60*24)<limit_day&&diff/(1000*60*60*24)>=0){$(this).parent().addClass('this_week_task');}});});

チケット表示(CSS)

パスのパターン.*.

担当チケットを太文字にする

/* 自分が担当のチケットは太文字 */tr.issue.assigned-to-me{font-weight:bold,}

期日が過ぎたチケットの色をピンクにする

/* 期日が過ぎたチケットの色をピンクにする */tr.overdue*{background-color:mistyrose;}/* 期日が過ぎたチケットを選択した場合は濃いピンクにする */tr.overdue.context-menu-selection*{background-color:hotpink;}

期日1週間前のチケットの色を緑にする

期日が1週間前のチケットに対して,this_week_taskのクラスを追加する必要がある.

/* 期日1週間前のチケットの色を緑にする */tr.this_week_task*{background-color:#DDFFDD;}/* 期日1週間前のチケットを選択した場合は濃い緑にする */tr.this_week_task.context-menu-selection*{background-color:#668866;}

プロジェクト表示(CSS)

パスのパターン.*.

プロジェクト毎のヘッダの色を変更

/* class*=""に各プロジェクトを識別できるクラス名を記入 *//* top-menu */body[class*=""]#top-menu{background-color:#4B0082;}/* header */body[class*=""]#header{background-color:linear-gradient(#4B0082,#800080);/* Imageを入れる場合 *//* background-image : url("http://hoge/hoge.png"); */}/* マウスオーバ対応 */body[class*=""]#main-menua:hover:not(.selected){background-color:rgba(128,128,128,0.5);}

↧

select(プルダウン) の文字を左右中央揃えにする

October 1, 2020, 10:24 pm

≫ Next: フッターを最下部、コンテンツを上下中央にする

≪ Previous: Redmine ViewCustomizeで準備して良かったもの

select(プルダウン) の文字を左右中央揃えにしたいときのCSSメモ

↧

フッターを最下部、コンテンツを上下中央にする

October 2, 2020, 1:05 am

≫ Next: 画像が読み込まれる前にカクつかないようにする(レスポンシブ対応)

≪ Previous: select(プルダウン) の文字を左右中央揃えにする

コンテンツが少ない場合でもフッターを最下部にするコードはよく見かけますが、
合わせてコンテンツを上下中央にする場合に悩んでしまったので投稿します。

style.css

body{display:flex;flex-direction:column;min-height:100vh;text-align:center;}header{padding:50px0;background-color:#ed5485;}main{display:flex;flex:1;align-items:center;justify-content:center;padding:50px0;background-color:#ffe869;}footer{padding:50px0;background-color:#57d1c9;}

index.html

<body><header><p>ヘッダー</p></header><main><p>メイン</p></main><footer><p>フッター</p></footer></body>

See the Pen フッターを最下部、コンテンツを上下中央 by Takuya Mori (@taqumo) on CodePen.

↧

画像が読み込まれる前にカクつかないようにする(レスポンシブ対応)

October 2, 2020, 1:58 am

≫ Next: 【初心者でもわかる】HTML・CSSで再現できるいろいろな矢印

≪ Previous: フッターを最下部、コンテンツを上下中央にする

imgタグにwidth、heightを指定しないと、画像が読み込まれる際にカクつくことがある(Jankって言うらしい)

<divclass='wrap'><imgsrc='hoge.jpg'></div>

widthとheightを指定して解決?

解決するけど、数値を絶対指定しないといけないのでレスポンシブ対応がむずい。

モダンブラウザの最近のバージョンではwidthとheightの数値からアスペクト比を計算していい感じにしてくれるらしいから、最新のブラウザ以外は一瞬崩れるくらい知らん！って割り切りもありかも。

【2020年夏】imgタグにはwidthとheight属性を書くのがいいらしい | Rriver

<divclass='wrap'><imgsrc='hoge.jpg'width='320'height='240'></div>

擬似要素を使って解決

画像と同じ大きさの透明な擬似要素を設置することで、動的に領域を確保することができます。

<divclass='wrap'><imgsrc='hoge.jpg'></div>

.wrap{position:relative;}.wrap:before{content:'';display:block;background:transparent;width:100%;padding-top:75%;}img{position:absolute;top:0;left:0;width:100%;}

padding-top: 75%の部分は画像の縦横比に合わせて調整。
縦/横 × 100%です。

参考

CSSだけでアスペクト比を固定するテク - Qiita

↧

ホームページ作成でcssを用いて横並びのブロックを作成する方法 「初心者用」

はじめに

まずはhtml

次はcss

◆悩んだとこ、後から気づいたとこをシェアしていきます。

✔この記事で解決できること

◆DAY2 HTML を書いてみよう

✔ ブロック要素、インライン要素

◆DAY3 CSS を書いてみよう

✔ セレクタ、プロパティ、バリュー

✔ 子孫セレクタの要点

✔ ボックスレイアウトの注意点

✔px、em、rem の違い

✔ 背景

✔float

✔flexbox

✔position

✔z-index

◆DAY4 環境設定

はじめに

HTML

CSS

最後に

どうも7noteです。プログラミング・コーディングの勉強始めて1週間以内の超初心者向けの記事で。

「ソースが複雑になることによって起こりえる害は大きく3つ」

プログラミングするときは簡略化を意識することが大切

時にはあえて長く書いてでも、メンテナンス性を確保することもある

どうすれば綺麗なソースが書けるようになるのか

まとめ

おそまつ！

しかし

対策はとても簡単

ちょっとした問題

配色

カラーホイール

CSS

position: absolute;

position: relative;

重なり順を指定

はみ出たものを下に表示

はみ出たものを左右に表示

はみ出たものを隠せ

はみ出たものを表示せよ

マインドマップ

バニシングポイント

どうも7noteです。この間ドライブしているときにふと理容室のくるくる回るやつをみて、「あ、CSSだけで作れそう」って思ったので作ってみた。

ソース

解説

まとめ

おそまつ！

参考

レスポンシブデザインとは？

各要素の「サイズ」をどう対応するのがベストか

各パターンの実装方法

パターン1（一定）

パターン2（ポイントで切替)

パターン3(スムーズに変動)

サイズ以外の対応について

参考

Progateで一通り学習

オリジナルアプリケーション

api連携したアプリケーション

広告レポート自動収集

管理画面

Railsで背景画像を設定する方法①

Railsで背景画像を設定する方法②

【番外編】うまくいかなかった方法

最後まで読んでいただきありがとうございます！

基礎振り返り

HTMLCSS

Ruby

ポイント

floatでグリッドを作った場合の動き

flexboxでグリッドを作った場合の動き

materialize.cssをflexbox化する

1．水平方向

それはinlineまたはinline-*要素（text やlinkなど）ですか？

それはblock-levelの要素ですか？

複数のblock-levelの要素がありますか？

2．垂直方向

ホームページ作成でcssを用いて横並びのブロックを作成する方法　「初心者用」