ナビゲーションバーを作ってみました。 作成中のポートフォリオサイトです↓ 一番上の、About meなどが並んでいるところですね。ここをクリックすると、ページ内の各セクションに飛ぶようにします。 雛形 まずは土台づくりから。 <nav class="gnav"> <ul class="gnav-list"> <li class="gnav-item"><a href="#">About me</a></li> <li class="gnav-item"><a href="#">Works</a></li> <li class="gnav-item"><a href="#">Skills</a>…</li></ul></nav>

Webページに背景画像を入れて、さらにちょっと透かして気取った感じにする方法です。 作成中のポートフォリオサイトです↓ 背景画像を入れる 背景画像を入れるには、background-imageというプロパティを使います。 <div class="background-img"> </div> .background-img { height: 100vh; backgr…

いつも当たり前のようにお世話になっているform_withなのですが、時々登場する:scopeって何なんだろうとずっと気になりつつもスルーしていたので、ちょっと考えてみました。 form_withの書き方 まずはform_withの書き方。モデルのインスタンスを与える場合と…

ビューファイルを書いていると記述量がどんどん増えてきて、繰り返しの部分も出てくるかと思います。そんな時に役立つ部分テンプレートのお話です。DRYってやつですね。 部分テンプレートとは ビューファイルの中で何度も出てくる同じ記述を切り出して、別の…

ツイッターのいいねみたいな機能をつけたくて、非同期通信を実装しようとして迷走しました。 初めはカリキュラムに出てきたAction cableを使ったのですが、出来上がってから欠陥に気づきました。ググったら「正解」的なやり方が出てきて、早く調べればよかっ…

アプリ制作に必須というわけでもないのですが、作りたい世界観に合うようにしたかったので、webフォントを導入してみました。 Webフォントとは インターネット経由で読み込んで使うことのできるフォントを、Webフォントと言います。サイトを表示するときにネ…

オリジナルアプリのフロント実装のためにBootstrapと格闘していますが、使えば使うほどフロントの奥の深さに圧倒されています。 それでもごく浅い部分については感覚がつかめてきたので、基本的な使い方を書いてみようと思います。 Bootstrap自体や導入方法…

オリジナルアプリのビューを１から作るのは大変そうだと思っていたら、Bootstrapというものを見つけました。名前は聞いたことがあったのですが、どんなものかは全く知らず。少し調べてみて、とりあえず使ってみようかなと。 Bootstrapとは webページの見た目…

box-sizingとは box-sizingは、CSSのプロパティのひとつです。要素の高さや幅を指定したときに、paddingとborderを含めるか否かを指定します。それだけではイメージがしづらいと思うので、具体的に説明していきます。 content-boxとborder-box content-box …

この記事では、flexboxのより便利な使い方についてまとめます。 flexboxについて flexboxは要素を横並びにしたいときに活躍する概念です。横並びにしたい要素の親要素のdisplayプロパティをflexにすることで、子要素が横並びになります。横並びになった要素…

この記事では、要素を横並びにするための手法、flexboxについて書いています。 ブロックレベル要素とインライン要素 HTMLの要素はブロックレベル要素とインライン要素の二種類に分けられます。ブロックレベル要素は一つのかたまりとみなされ、縦に積み重なっ…

この記事ではcssの基本についてまとめていきます。 cssって何？ cssの役割はHTMLを装飾し、webページの見た目を作ることです。HTMLでwebページに記載する情報を記述しただけでは、なんとも味気ないページになってしまいます。そこでcssを適用することで、見…

HTMLはいくつもの要素が積み重なって構成されています。今回は、よく使うHTMLの要素についてまとめます。 要素とは 要素は基本的に開始タグと終了タグで構成されます。入れ子構造を取ることができ、ある要素の中に別の要素を入れていきます。その場合、外側…

この記事では、HTMLについてざっくり解説したいと思います。 HTMLって何？ HTMLとはWebページに表示する情報を記述する言語のことです。データベースの処理などは行わないため、プログラミング言語ではなく、マークアップ言語に分類されます。 HTMLファイル…