文系40代♀がIT企業を目指すブログ

40代になり本格的にプログラミングの勉強をはじめてみました。なんとかしてお金にならないかと考えながらがんばっています。

【bootstrap】navの文字が改行されてしまう

 あともう一息で会社のWEBサイトができそうなんですが、ヘッダーのnavの文字が改行されてしまう!?

f:id:whiteandpeach:20190911235323j:plain

と思い調べていました。

ブレイクポイント?とかいうやつが悪いの??

とか、いろいろ考えてみたんですができない!!

 

そしたら、折り返したくない場合

text-nowrap

を使うと!これでできる??

 

でもbootstrapのnavで使えるのかな…と調べてみたところ

英語で出てきた質問

 

When I have too many links in the navbar, when I start to zoom in, then the links start to break lines. I want them to stay the same line before they collapse.

stackoverflow.com

「セイムラインにステイさせたい」

これです、これ!!

 

Answer

<a class="nav-link" href="#">

<a class="nav-link text-nowrap" href="#">

 

で、できました!!

 

最近日本語だと探せないことが増え、このサイト

stackoverflow.com

にたどり着くことが多いです。

なんやらプログラミングの知恵袋みたいなやつ??

 

一応ブックマークしておきました。

【入門】Bootstrapを使いこなす

今、自分の会社のWEBサイトを自作しています。

スマホ対応にしたくて、いろいろ調べてみたのですが、Bootstrapが一番できそう…!そしてDreamweaverに対応してる!!

と最初Dreamweaverでやっていたのですが、なんだか非効率で(時々画面がおかしくなるし)、結局普通にVScodeを使って作っています…。

 

これまで制作は

 

やりたいことをさがす→ググる→試す→プログラム最終決定

 

といったようにググって出てきたオープンソースを頼りにしていました。

 

でも、それってやけに非効率!!

しかもバージョン変わるとややこしくて無理!

 

なので、Bootstrapに関しては公式サイトを頼りにすることにしました。

getbootstrap.com

英語なんですが、日本語サイトみたいなのもあるんですけど、正直プログラムをいろいろ調べてると最終的に英語のサイトにたどり着くことが多いです。
だからこの際、もう英語のままで閲覧する方が良いのかなって思いました。

 

たぶん英語に抵抗ある人はたぶんスキルアップしません!!

 

英語は読まなくても、サンプル見たら視覚的に理解ができるので、最初はワードになれるため、とにかくいろんなところをクリックしてサイトに慣れる!

だいたいページの概要がわかってから、やりたいことを探すようにしてみたところ、すごく効率が良いです!

 

ということでもうよっぽどのことがない限り、ググるのはやめることにしました。

 

ちなみに今回のテーマはできる限りBootstrapで作ることです。

デザインはCSSの方が豊富だと思うんですが、CSS苦手だしデザイン豊富すぎて時間がかかりそうなのでできるだけBootstrapのデザインを使用してみます。

 

少しこったこともしたいんですが、そんな時間はあんまりないのでとりあえずの公開を急ぎたいと思います。

 

他の言語もだいたい公式ページにプログラムの説明があるので、無理してでもそっちを理解していく方が良いのかも・・・と思ったけれどBootstrap使ってる人がたぶん少なくて情報量がないだけです…。

jQueryで共通パーツを読み込む

以前、本ブログで書いた内容を転載します。

blog.whiteandpeach.com

jQueryでヘッダー、フッターを共通パーツにしてみました。

 

こちらの方のやり方を参考にさせていただいたのですが・・・・

code-life.hatenablog.com

ドロップダウンメニューが押せませんでした…。

こちらの記事の方にもアドバイスをいただいたにも関わらず解決せず…。

 

ちなみに読み込みの順番に問題があるのではないか?

コールバックするかパーツのhtml末尾にscriptを記述するかとのアドバイスをいただいたんですが、解決せず…。

 

そしていろいろ調べつくしてみたところ・・・・

 

$(function() {

$(window).on("load", function(){

 

に変更したら動きました!!

どうもjQueryのバージョン(3→4)が変わって記述が変わったっぽいです。

ちなみにhtml末尾にscriptも入れてます。

 

そして今度はハンバーガーメニューが動かないというトラブルもあったんですが、それはBootstrapの記述ミスでした…。

PHPでやり直そうか、Dreamweaverのライブラリを使おうかといろいろ考えたんですが、ちゃんと動くとこのやり方が簡単そうなのかなと思いました!

Font Awesomeで肉球アイコンを取得

ヘッダーのメニューに肉球アイコンをつけたいなーとふと思い、前に少しだけ使ったFont Awesomeを開いてみました。

fontawesome.com

ちなみにこれがただのテキストメニュー

f:id:whiteandpeach:20190825082135j:plain

この文字の前に肉球つけたい!

 

実は前は自分ちの肉球を使って画像として貼り付けてたんですが、今回はこちらの肉球を借りることにしました。

 

英語のサイトなので一見使えるのかと思ったけど、「icons」さえ読めれば使えます。

f:id:whiteandpeach:20190825082539j:plain

 

 

「paw」と検索したら肉球がいくつか出てきました!

f:id:whiteandpeach:20190825082834j:plain

シンプルな一番最初に肉球で決まり!

 

 

私の場合は、ただ小さなアイコンをテキストの横につけたいだけなので、簡単なやり方で。

 

1.コードを貼り付ける

<head>~</head>に以下のコードをコピー

<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">

 

2.アイコンのコードを取得

f:id:whiteandpeach:20190825083407j:plain

f:id:whiteandpeach:20190825083557j:plain

3.つけたいところ(今回はHTML)に以下のコードをコピペ

<i class="fas fa-paw"></i>

を入れるだけ。

f:id:whiteandpeach:20190825083725j:plain

できました!

カスタマイズでアイコンを大きくしたり、動かしたりできるそうです。

CSSで調整することもできるそうです。

以下のサイトを参考にしました。

saruwakakun.com

 

SNSのアイコンもFont Awesomeで取得できるそうなので、今後も使っていきたいと思います。

PC環境など

まずはPC環境を紹介したいと思います。

ずっとWindowsユーザーなので、Winのみです。

会社用のMacはありますが、私は使っていません。どうしてもMacが必要となった場合は買い足したいところですが、できるだけ使わない予定。

 

会社:HPデスクトップ

自宅:HPデスクトップ、HPノート

タブレットiPad

 

PCは全てHPです。

自宅用のPCはNVIDIA GeForce搭載のゲーミングPCで少々良いものにしています。

会社用のPCはメモリは積んだけど、普通のスペックです。

最近はちょっと思い出したとき使えるようにiPadも使うようになりました。(もともと仕入発注端末として使っています)Githubでどこでもちょこっと直しができるようにしています。

クラウドはonedrive、Office365についてきたので使っています。

Adobe creativecloudは1契約していて、主にDreamweaverPhotoshopを使用しています。

 

自宅はこんな感じです。

blog.whiteandpeach.com

 

エディタは主にWEB制作でノンプログラミングでやってきたのでDreamweaverを使用していましたが、今はVisual Studio CodeAtomBracketsをインストールしてるけど、どれをメインにするかはまだ決めてません。

 

今勉強している講座

udemy

ドットインストール

AI関連はたまに無料でgacco

 

超田舎に住んでいるので、実際足を運んで学ぶ勉強会やセミナーにはあまり参加できないのでオンライン中心です。

とはいえ、良さげな勉強会などがあればぜひお誘いください。

ブログ開設にあたって

はじめまして、ご覧いただきありがとうございます。

株式会社ホワイトアンドピーチを運営しているほわぴと申します。

このたび、プログラミングに関するブログを作ってみました。

私のプログラミングの歴史はこちらからご覧いただけます。

 

本家はこちらのブログになります。旅行のことなど書いてます。

blog.whiteandpeach.com

 

今回このようなブログを立ち上げたきっかけですが、婚活に失敗してこの先ひとりで生きていけるんだろうかと不安になり、もう少しお金を稼ぎたい、そしてちゃんとプログラミングを勉強し直して、業務効率化させたいという想いからです。

本業は雑貨屋ですが、単価が安く正直あまり儲かりません。

婚活は将来を見据えてマッチングサイトで職業をSEに絞って探させていただきました。理想が高いわけではないんですが、タバコ吸わないなど条件絞ってやっと見つけた唯一の人→SEの方と運良くマッチングし、何度か会うことができましたが、なんと容姿がNGとのことでお断りされました…。40代にとってはとても厳しいお言葉で人生そう甘くないと落胆したと同時に婚活はやめ、仕事に集中することにしました。

 

今はWEB関連のプログラミングを中心に勉強しています。

WEB制作の仕事は受けていますが、知識としてはまだまだです。

 

なんとか楽に生きていけるくらいは稼ぎたいと思います!