2018-06-26

Rpt!読図講習に行ってみた

山関係

f:id:tksptan:20180626220137j:plain

石井スポーツ登山学校の読図講習に参加してきました。

机上が2日、実技が1日。

学んだこと。

地図記号
等高線
地形図と傾斜
コンパス
- 磁北線の引き方
- 整地
- 進路決定
現在地の把握
実技
- 近所の里山で、あらかじめ決めたルートを進む
  （当日口頭でルートの説明をされた）

感想。

等高線をみて地形（尾根、沢、コル）を把握すること、コンパスを使って、行きたいルートの方角を知ること、が出来るようになった。
とはいえ最終日の実技では、予定のルートを歩くことの難しさを痛感させられた。
まず自分が現在地図上のどこにいるのかが分からない。
何とか現在位置を特定したとしても、コンパスの指す方向が道なき道、斜面をただ登るような所で、それとは別方向に歩きやすい道（あるいは踏み跡）がある場面で、自信がなくなってコンパスを無視し歩きやすい別ルートを選択してしまった。
分かりやすい登山道をズンズン歩いて、正規ルートへ進む分岐を見落としてしまったりもした。
正規ルート、倒木や藪で視界が悪く進めるかどうかも分からない道でしたよ。
私は超安全思考でそういう怖い道は進みたがらないので、一人じゃゴールできなかったかも。
実技は脱出ゲームみたいで凄く楽しかった。脱出ゲームやったことないけど。
今度は講習じゃなくて一人でじっくり地図を見ながら歩きたい。

自分に業務連絡。
今週中に一度復習をしましょうね。

(byへびさん）

2018-06-23

MEMO!CSS - 要素のなかのテキストを上下左右中央ぞろえ

CSS

こんな感じに100×100のブロックの中央に1行テキストを表示したいです。
ブロックの外側には5pxの余白があります。

f:id:tksptan:20180623010037j:plain

その幾つかあるやり方を、まとめてみました。

See the Pen 要素を中央に by hebisan (@climbFrog) on CodePen.

■検証環境

Windows 7
FirefoxとIEの最新版

1. margin: auto;

親要素のdivで100x100の領域を確保し、子要素のdivにテキストを設定して中央に揃える。
・親要素 position: relative;
・子要素 position: absolute;
・子要素に、top,right,bottom,leftをauto以外で指定する
・子要素は幅を100%にしてtext-align: center;にすることで左右の中央にした

<div class="base case-mauto-out">
    <div class="case-mauto-in">日記</div>  
</div>

.base {
  width: 100px;
  background: #5070B2;
  border-radius: 4px;
  color: #FFFFFF;
  font-size: 14px;
}
.case-mauto-out {
  position: relative;
  height: 100px;
  margin: 5px;
}
.case-mauto-in {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1em;
  width: 100%;
  text-align: center;
  margin: auto;
}

以下baseクラスは全てに適用する。

2. display: table-cell

display: table-cellにして、text-align: center;で横方向の、vertical-align:middle;で縦方向の中央にする。
・display: table-cellを指定するとmarginで余白をつくることが出来なくなる
・親要素にdisplay: table;を指定し、border-collapse: separate; border-spacing: 5px;で余白を表現する。

<div class="case-table">
  <div class="base case-table-cell">日記</div>
</div>

.case-table {
  display: table;
  border-collapse: separate;
  border-spacing: 5px;
}
.case-table-cell {
  display: table-cell;
  height: 100px;
  text-align: center;
  vertical-align: middle;
}

3. paddingで調整

ブロック要素はvertical-alignで縦方向の中央揃えができないので、上下にpaddingを指定することで代替とする
・line-heightでテキストの高さを決め、逆算して余白（上下）の高さを決める

<div class="base case-padding">日記</div>

.case-padding {
  padding: 40px 0;
  text-align: center;
  line-height: 20px;
  margin: 5px;  
}

4. display:flex;

※ベンダープレフィックスをつけないとブラウザにより崩れます

<div class="base case-flex">日記</div>

.case-flex {
	display: flex;
	height: 100px;
	margin: 5px;
	justify-content: center;
	align-items: center;
}

5. ネガティブマージン

親要素から上から50%の位置、左から50%の位置に配置する。
上から50％の位置に文字の中央がくるように、半文字文上にずらす(margin-top: -0.5em)
同様に左からの位置も、文字の半分を左にずらす。今回は2文字固定なので1文字分ずらす(margin-left: -1em)

<div class="base case-negative-out">
  <span class="case-negative-in">日記</span>
</div>

.case-negative-out {
  height: 100px;
  position: relative;
  margin: 5px;
}
.case-negative-in {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -0.5em;
  margin-left: -1em;
}

(byへびさん）

2018-06-21

やる気と体力と紫陽花

雑記旅行

へびです。ご無沙汰してます。
今月は週末に用事が多く、その反動でやたらと眠く何のやる気も出ませんでした。
疲れない体力と精神力が欲しい。
そういうわけでブログが滞っているわけです。

6月8日、9日は仕事の関係で前橋市にいました。
10日は代休だったので赤城山に登りたかったんですけど、振られましたわ雨に。
雨の中登るほど山が好きなわけでもないので、仕方なく中央前橋駅広瀬川沿いの歩道を紫陽花を眺めながら散策してきました。

f:id:tksptan:20180621190333j:plain

来週から仕切り直して、ブログ更新頑張ります。
(byへびさん)

2018-06-10

目標を決める

目標を決めると、達成するために一時でもがんばれるのがいいですね。

2週間前に体力作りのために、1週間で15㌔歩くことを目標にしました。

最初の１週間目は１６㌔歩き目標達成。

２週間目は10.5㌔歩き目標達成ならず・・・。

万歩計を持っていない時に歩いた距離を足しても全然たりないかなぁ。

最初はがんばるんだけど長く続かないんだよねー。

達成できなくても目標が決まっているとまた挑戦したくなるのがいいですね。

(byねこ)

2018-05-31

TS!スマートフォン実機だけで発生する不具合…その正体は

テスト

セッションが原因のエラー
端末のキャッシュを削除したら直りました

不具合！と騒いで3時間もかけて原因調査してこのザマですよ_(:3 」∠ )_
エラー箇所がフレームワークのコアファイルにあったため、ロジックが把握しにくく結論に辿りつくのが遅くなってしまった。

同じ処理が走っているはずなのに一部の環境でのみ発生する不具合は、まずブラウザのキャッシュの削除や端末の再起動を試みる

今日の学び。

ほんとうにねぇ、もう。
素人かよ。恥ずかしいし、時間の無駄だし、なんかもうグッタリ。

症状が多発するようであれば別途調査する必要もあり、今回の作業が無駄とまでは言えないかもしれないですが、最短距離で結論に持っていけるようになりたいですね。

(byへびさん)

2018-05-30

Memo!テキストのマーカー風の線を引く - CSS

CSS

よく見かける、テキストに蛍光マーカー風のラインを引くCSSを作ってみました。

See the Pen marker-css by hebisan (@climbFrog) on CodePen.

今回は見出しになるように、ライン幅を広めにとってます。
下左右にラインがはみ出して見えるように、paddingで余白を指定。

.marker{
 display: inline;
 font-weight: bold; 
 padding: 0 10px 2px 10px;
}

続いて肝心のマーカー風の仕方。
ここテストでるぞ～
この背景色の幅を半分ほどにできればマーカーっぽくなりそうですね。
半分ほどにするには、背景backgroundに linear-gradientを使用します。

.marker-yellow {
 background: linear-gradient(to bottom, rgba(255,255,1,0) 45%, rgba(255,255,1,1) 45%);
}

background: linear-gradient(to bottom, rgba(255,255,1,0) 45%, rgba(255,255,1,1) 45%);

半分より心もち太くしてみました。
上記のパーセンテージは数値が小さいほど太くなります。

上記の指定で何をやっているか。
linear-gradientは直線方向にグラデーションを作る関数です。

・to bottom: 下方向にグラデーションをする。省略可能。
・rgba(255,255,1,0) 45%: 始まりの色が透明で、45%の位置からグラデーション開始
・rgba(255,255,1,1) 45%: 終わりの色が#ffff01で、45%の位置でグラデーション終了

透明色からはじまって45%の位置で#ffff01色に変わるグラデーションを作っています。
ただしグラデーションの開始と終了位置が同じ45%なため、グラデーションにならず色がはっきり分かれています。

ではグラデーションの位置を変えて、古くなりかすれるようになったマーカーを作ってみます。

background: linear-gradient(to bottom, rgba(0,255,255,0) 45%, rgba(0,255,255,1) 80%);

かすれ感、でてますか？
新品と比べてみて！

PCの最新版の有名ブラウザで使う分には問題ないですが、linear-gradient関数が実装されていないブラウザもあるため、以下のURLから対応状況を確認したうえで使ってください。

参考サイト:
developer.mozilla.org

(byへびさん）

ねこさんとへびさんの新人技術ブログ

新人エンジニアのねこさんとへびさんの、技術向上のためのブログです。

Rpt!読図講習に行ってみた

MEMO!CSS - 要素のなかのテキストを上下左右中央ぞろえ

1. margin: auto;

2. display: table-cell

3. paddingで調整

4. display:flex;

5. ネガティブマージン

やる気と体力と紫陽花

最近の趣味

目標を決める

TS!スマートフォン実機だけで発生する不具合…その正体は

Memo!テキストのマーカー風の線を引く - CSS