わすれた.log

忘れては検索して、そしてまた忘れるその過ちを繰り返さない為に…

Vagrant で Rails の環境構築

Vagrant 上の CentOS で Rails の環境構築 - Qiita http://qiita.com/SOJO/items/81e32b5fc6737673e4c6[Sy] 【解決した】Vagrantでvagrant-vbguestを使ってたら共有フォルダのマウントに失敗する | Syntax Error. https://utano.jp/entry/2014/11/vagrant_gu…

比較するアプリDIffMergeを入れた

windowsだらwinMergeがありますが、macは何がいいのかわからなかったので、調べて入れました。ディレクトリーごとで比較できるから良いと思ったデフォルトだと日本語文字化けするので、設定します。・「DiffMerge」で日本語テキストを正しく表示させる方法 -…

サイトを保存するアプリSiteSucker を入れた

・使い方 URLを指定するだけでWebサイトを丸ごとダウンロードできるMacアプリ『SiteSucker』 | INSIDE YUKARI http://blog.yukarien.com/tech/sitesucker/・公式 SiteSucker for macOS http://ricks-apps.com/osx/sitesucker/・homebrew-caskを使った homebr…

vimにインデント可視化プラグインvim-indent-guidesを入れた。

久しぶりにNeoBundleを使って、すごい忘れていた。・NeoBundleの使い方 [Vim as IDE 第1回] NeoBundleを利用してvimプラグインを一元管理する - Qiita http://qiita.com/kazu0620/items/819679ef006d973c6c22・vim-indent-guidesのカスタマイズ。 理想のエデ…

nkfコマンドで文字コードを変換するの入れた

macでファイルの文字コードを変換する『nkfコマンド』の使い方とオプション一覧 | かわたま.net http://kawatama.net/others/mac/1754 ホームブリューで入れた。

Autmatorで右クリックでiTerm起動するサービスを作った

フォルダかファイルを右クリックでその場所のカレントでiTermが開いて欲しかったので Autmatorで設定。 for f in "$@" do #ファイル名の場合ディレクトリーのみ取得 if [ -f $f ]; then #ディレクトリーだけにする f="${f%/*}" fi #iTerm起動 open -a "/Appl…

nodebrewの使い方

nodebrewを久しぶりに使う なぜか自分は、homebrewから入れてないようだ めんどくさいから、あとで困ったらなおそ 入っているバージョン確認 何が入っているのだっけ?と インストール済みのバージョンを確認します。 $ nodebrew list インストールできるバ…

あれこれのパッケージマネージャーからインストールしている物を確認する

何かインストールしようとする時に(以前に入れたかも?二回入れるのはやだな)とか思い何度も何が入っているのか確認するためにググるのでいい加減メモる・HomeBrew brew list ・gem(ruby) gem list ・npm(node) グローバル npm ls --depth=0 -g

使える!だが、よく忘れるlinuxコマンド「ファイル検索編」

findは下層ディレクトリーまで検索して、ファイルまたはフォルダーをさがしてきてくれます。 サンプル ファイルを検索 現在のカレントディレクトリー(.)以下のディレクトリーから ファイル名(-name)が「 *.html」(*.html)を、ファイルを対象に検索(-t…

使える!だが、よく忘れるlinuxコマンド「コピー編」

クリップボード→ファイルに保存 クリップボードの中をファイルに保存。 pbpaste > ファイル名 ファイル→クリップボード ファイルの内容をコピー。 pbcopy < ファイル名 windowsのコマンドプロントでもできる、忘れたが

背景がTransitionで変わるボタン

読み:トランジション 翻訳:移り変り, 推移, 変遷トランジションで背景が変わるボタンを作った。 よく見るやつだ。 ものすごく読み方を忘れるので、ここではあえてカタカナでしか書かない。 トランジションはまだ少し使いなれてない。 allについて transiti…

ローカル内でのgitを作成してコミット

1.ローカルのフォルダーをgitで管理するのをスタート git init 読み:イニット 単語訳:初期設定 説明:gitで監視を開始する カウントディレクトリーを管理したいフォルダに行って、「git init」と入力するだけ! 現時点ではフォルダの中のファイルは空です…

入れたフォント

今日入れた日本語のフリーフォント。g_いろりフォント(太手書き丸)-プレビュー版 [よく訓練された素材屋] http://material.animehack.jp/font_groundbold.html丸文字「ニコ角フォント」のダウンロード|丸文字フォント(ニコ文字)配布所 http://nicofont.…

Adobe illusutorator 、Adobe Photoshop を入れた

パソコンに入れたものをメモAdobe photoshop CS6 Adobe illusutorator CS6を入れた。illusutoratorを起動したら以下のメッセージが 「“Adobe Illustrator CS6.app”を開くには、以前のJava SE 6ランタイムをインストールする必要があります。」解決策 Mac 用…

ざっくりとした コンポーネント思考の覚書

コンポーネント思考とはパーツのこと。・ボタンなど小さいパーツを作っていく。 パズルに似ているかも? それをひとつのCSS(SASS)セットでまとめる。・小→大 小さいパーツを組み合わせて、大きいものを作る。・いいこと 使い回しができる わかりやすい・動き…

主にWEBサイトの情報収集ツールとかのまとめのまとめ

これ知ってる?WEBの人なら押さえておきたいツール&サービス50選 - 死ぬまでWEB屋この記事の内容が使えそうだったので、自分の使いたいところだけ引き出してメモ 記事主様、ありがとうございます。主に使うと思ったものは情報収集、サイトをまとめたりする…

Googleの日本語入力を入れた

自分のパソコンに何を入れたか、わからなくなってしまうので、メモックス・入れ方参考サイト Mac - Google 日本語入力(IME)のインストール - PC設定のカルマ

コンポーネント思考のBEMとやらをメモ

コンポーネント指向 commpone コンポーネント 直訳:コンポーネントとは、部品、成分、構成要素などの意味を持つ英単語 物、ブロック <header>,<footer>,<section>,<content>と同じ 大カテゴリーコンポーネント指向とは部品ごとに分けて、動くCSSのこと。 Classを当てはめるだけで適用される、C</content></section></footer></header>…

CSS3アニメとjQueryによるシンプルなスライドナビ

See the Pen CSS3アニメとjQueryによるスライドナビ by yachiru (@yachiru) on CodePen.なぜそうなるのかはよくわからない。css3のtransitionで動きを指定、動きの終わりはjqueryに切り替える。むーcss3でtransitionで動きを指定して、hoverで動きの終わりを…

MovableTypeのカスタムフィールドがない

Movable Type version 5.2.13のカスタムフィールドが無いのです。 本当にないです。非常におかしいです。 特にレンタルサーバなどで自動インストールサービスを行っている場合は 要注意。自分でMTOSをダウンロードしてきてインストールしましょう。 引用元 S…

「Movable Type 5実践テクニック」という本

Movable Type 5実践テクニック http://www.sbcr.jp/products/4797358834.html をやっています。 サンプルがなんだか思い通りに動かないです。 chapter2でサンプルでエラー 自分はchapter2をアップロードしてウェブサイトのテーマを適用させようとしたら以下…

css3のanimaがAndroidで動かない

Androidでのキーフレームアニメーション 一部が以下の内容でないと動かない ×動かない div.sample { animation-name: anime1; animation-duration: 5s; } @keyframes anime1 { 0% {width: 50px; height: 50px; background-color: aqua;} 100% {width: 200px;…

cssを書く注意点

最近の注意されたことメモ・スマホなどでの画面の拡大率指定するかしないか把握する。 google的には拡大縮小できた方が良い。・ブレイクポイントは3〜4個くらいにする。 ・ブレイクポイントはsassの変数で管理する。

HTMLのクラス名をわかりやすくしたい

他の人にもわかり、編集しやすい、クラス名について× index-images インデックスページのイメージという意味で使いたかった。 だけどindex直訳して目次、サイトマップなら良いがインデックスページのとは意味が違う。よく使う単語 head body foot top bottom…

なんかおかしいマークアップ

他の人にわかりやすいとかの目的の場合の書き方について。 タグの意味合いを意識した書き方。 例1:ヘッダーのタイトルとロゴについて ×ダメな例 <header> <div class=“logo”> <img src=“logo.png”> </div> <h1> Sitetile </h1> </header> h1 と.classが別物という扱いになってしまう。 ○良い例1 <header> <div class=“sitelogo”> <div class=“logo”> <img src=“logo.png”> </div> <h1> Sitetile </h1> </div> </header>

あれこれのパッケージマネージャーからインストールしている物を確認する

何かインストールしようとする時に (以前に入れたかも?二回入れるのはやだな) とか思い何度も何が入っているのか確認するためにググるのでいい加減メモる ・HomeBrew >|lynx| brew list ||< ・gem(ruby) >|lynx| gem list ||< ・npm(node)グローバル >|lynx…

inline-blockの隙間を消す

CSS

inline-blockで横並びしたときに隙間が開くのでそれを消す方法 親要素に font-size:0; を入れる。 原因は改行コードが表示され隙間が開くそうです。 See the Pen inline-blockの隙間を消す by yachiru (@yachiru) on CodePen.

:notの使い方の例

CSS

css3の擬似セレクタ:notの使い方 ナビなどでボーダーを引くときに「一番最初以外にボーダーを適用」という条件を入れられる。 nav ul li:not(:first-child) a{ See the Pen css:notの使い方 by yachiru (@yachiru) on CodePen.

背景指定で画像を要素全体に表示する

要素全体に画像を100%にして表示させる。 background-sizeのcoverは使える 縦幅に注意が必要 、heightを指定する必要があるかもしれない center center も場合によって変える 場合によって切れる .images{ background: url("http://placehold.it/480x200") c…

IE11でCSSのアニメーションが動かなかった対策

@media クエリの中にkeyframes を入れたら反応しなかったです。 外に出したら動きました。(´-`)

IE11のFlexにした時にbasisがおかしくなる

Flexboxで組んでいて、IE11でおかしかったのでメモ flex-basisだけだと横幅がIE11でずれるのでその時は↓を入れる。 /*IE用*/ max-whidth: 50%; See the Pen Float-basis IE by yachiru (@yachiru) on CodePen. 今回、記事を書いて おかしくなったのを再現し…

htmlとcss

CSS

今日は仕事のメモ CSS クラス名の付け方 ×left ○section 編集のしやすさの為要素にとって意味のある文字を入れる flex-basis flexだけセットして 要素が50%と50%になってちゃんと2等分できた 次に、50%の要素の片方にpaddingとmarginセットしたら要素が50%か…