2014-01-01から1年間の記事一覧
今日はnth-of-typeを学んだ。参考#17 ある要素のうち、n番目に来る要素 | CSS3入門 #17 ある要素のうち、n番目に来る要素 | CSS3入門 - プログラミングならドットインストール昨日やったのと殆ど同じだった。要素を指定して何番目に適用するか決めれる。 nth…
今日は~-childについて学んだ。参考#16 n番目に来る要素を指定する | CSS3入門 #16 n番目に来る要素を指定する | CSS3入門 - プログラミングならドットインストールnth-childで何番目の要素に適用するか決めれる。 要素を特に指定しない場合は*で何にでも指…
お家に帰ったらやってみようね。Progate(プロゲート) | Learn to code, Learn to Create Progate | Learn to Code, Learn to be Creative
今日は属性セレクタについて学んだ。参考#15 属性セレクタを使ってみよう | CSS3入門 #15 属性セレクタを使ってみよう | CSS3入門 - プログラミングならドットインストール要素の属性で一致するものだけに適用できるかなり便利なものだった。 今回はリンクの…
今日はanimationについて学んだ。参考#13 キーフレームでアニメーション (1) | CSS3入門 #13 キーフレームでアニメーション (1) | CSS3入門 - プログラミングならドットインストール#14 キーフレームでアニメーション (2) | CSS3入門 #14 キーフレームでアニ…
今日はtransitionについて学んだ。#12 簡単なアニメーションをつけてみよう | CSS3入門 #12 簡単なアニメーションをつけてみよう | CSS3入門 - プログラミングならドットインストールdivにtransitionをつけて、マウスオン(hover)で形が変わるようにした。tra…
要素を変形させる第2弾。参考#11 要素を変形させてみよう (2) | CSS3入門 #11 要素を変形させてみよう (2) | CSS3入門 - プログラミングならドットインストール 今日もtransformの続き。 translateが移動させるこどができる。これもXやYで指定可能。 rotate…
今日は要素の変形について学んだ。 今回もブラウザに寄って対応がマチマチ。webkitを使いました。参考#10 要素を変形させてみよう (1) | CSS3入門 #10 要素を変形させてみよう (1) | CSS3入門 - プログラミングならドットインストールoriginで始点を指定でき…
円形グラデーションradial-gradientについて学んだ。 今回も使用するブラウザがchromeのため-webkit-radial-gradientと記述した。参考#09 円形グラデーションをつけてみよう | CSS3入門 #09 円形グラデーションをつけてみよう | CSS3入門 - プログラミングな…
線形グラデーションについて学んだ。 使用ブラウザがchromeのため、-webkit-linear-gradientで指定した。参考#08 線形グラデーションをつけてみよう | CSS3入門 #08 線形グラデーションをつけてみよう | CSS3入門 - プログラミングならドットインストール使…
テキストに影を付けるtext-shadowについて学んだ。参考 #07 テキストに影をつけてみよう | CSS3入門 #07 テキストに影をつけてみよう | CSS3入門 - プログラミングならドットインストール指定の仕方としては縦方向・横方向・ぼかし具合・色の指定の順番で指…
今日はbox-shadowについて少し学んだ。参考 #06 ボックス要素に影をつけてみよう | CSS3入門 #06 ボックス要素に影をつけてみよう | CSS3入門 - プログラミングならドットインストール見て分かるとおり、ボックスに影を付けれます。 水平方向 垂直方向 ぼか…
トルネコとかシレンっぽい感じだった。 用事を済ませ、時間があればちょっとやってみようと思う。 参考記事 死んで覚える本当のGitの使い方 - mizchi log 死んで覚える本当のGitの使い方 - mizchi log 家に帰ると音楽聴く時間もないし、勉強で遊べるのはあり…
今日は色の指定と、透明化について少し学んだ。rgba()とopacity。 参考 #05 色の指定と透明化 | CSS3入門 #05 色の指定と透明化 | CSS3入門 - プログラミングならドットインストール rgbaは()の中に赤緑青の順で指定し、最後に透明度を指定する。 rgbは1~9で…
用事をこなしていたらこんな時間。今日もradiusについてすこし学んだ。 参考 #04 角丸を使ったテクニック | CSS3入門 #04 角丸を使ったテクニック | CSS3入門 - プログラミングならドットインストール 前回勉強したものはborderの角を丸くするという内容だっ…
以下を参考にインデント! 勉強前に忘れず読もう以下参考サイト。超絶初心者のためのフロント入門(HTML、CSS、JavaScript) - Qiita 超絶初心者のためのフロント入門(HTML、CSS、JavaScript) - Qiita Readable CSS Readable CSS - Web developer guide | …
今日はborder-radiusについて少し学んだ。参考 #03 角丸をつけてみよう | CSS3入門 #03 角丸をつけてみよう | CSS3入門 - プログラミングならドットインストール border-radiusは値を指定してあげれば、borderの角が丸くなる。 値が大きければ大きいほど円形…
CSSが読まれる優先度なるものが存在する。 一番最初に書いてあるものが優先度高そうに思うけれど、実は一番最後。 下みたいな感じだと、h1は赤くなる。 |css| h1 { color: green ;} h1 { color: white ;} h1 { color: blue ;} h1 { color: red ;} ||< さらに…
CSSの基本 CSSはhtml内に要素を指定してスタイルをあてはめていくもの。 簡単にいうとhtmlを飾り付けるためにある。 セレクタ(要素){ プロパティ: 値;} こんな感じで書いていく。 分かりやすく例を挙げると h1 { color: red ;}のようになる。 これでh1の…
git branch (ブランチの名前) これでブランチを作成し、編集していく。 新しく追加したブランチにコミットを追加していくにはチェックアウトする必要がある。 git checkout (ブランチの名前)かgit checkout -b(ブランチの名前) -bをつければ作成とチェック…
Web標準とは、Webで標準的に使われている技術のルールのようなもの。 皆これにしたがってコーディングしたりする。 Web標準は誰が決めているか? W3Cという団体が中心となって決めている。 が、その他にも決めるのに関わっている団体は5つくらいある。 W3Cと…
Webサーバー Webサイト、ページの表示 WWWシステムにおいて、情報送信を行うコンピュータ。また、WWWによる情報送信機能を持ったソフトウェア。Webサーバは、HTML文書や画像などの情報を蓄積しておき、Webブラウザなどのクライアントソフトウェアの要求に応…
1.DNSルックアップ(名前解決) ブラウザがドメインをIPに正引き(変換)します。 ドメインは人間が覚えやすいように考えられた仕組みなので、IPアドレスに変換します。 変換したIPを元に、ブラウザはリソース(HTMLファイル)を要求します。 この作業をDNS…
参考 Node.js のパッケージ管理ツール npm と package.json の使い方 | TM Life ローカル=プロジェクトの中 npm=ノードパッケージマネージャー node.js=小さいサーバーとして機能するよ今日はガルプを触りました。npm init で設定ファイルを作成。 npm ins…
Sassの勉強をしたので、忘れないうちに書いておく。 今日やったのはeachとfor。mixinもやった。以下書いたコード$black: green; $red: red; $colors: red,blue,green,white; $font: 12,14,16,18,20; $black: #000000; $test-width: 800px,600px,400px,200px;…
ディスクリプションHTMLでWebページを作成する際、検索エンジンなどが適切にページの内容を把握できるようmetaタグでそのページの説明を記述したものをメタディスクリプション、あるいは単にディスクリプションということがある。 タスクランナー 様々なタス…
インライン要素はブロックレベル要素に包含される。 ブロックレベル要素は下へ下へと積まれていくのに対して、インライン要素は左へ左へと入っていく。 インライン要素の特徴margin – 左右は効くけど、上下は効きません。 padding – 一応上下左右効くけど、…
今日はpngquantとImageMagickを導入した。ImageMagick参考ページ ImageMagickによる基本的な画像処理 今日はpngquantでpngの圧縮してみた。pngquant -v --ext png --force 256 名前.pngこれで圧縮できました。 ls -l 名前.pngこれでファイルサイズを見たら、…
該当の語句で検索をかける該当するものが入っているであろうフォルダ(wp-contentや、その中のtheme)に 該当の語句で検索をかけて、置換で修正をかけていく。○○○■■■という語句であれば、○だけと■だけに分けて検索をかけると抜けがない。Wordpressのツールを…
テーマについてWordpressにはテーマに親と子の関係がある。 子にないものを親からとってきたりするらしい。 こういう関係を知らなければ、編集するのが大変ですね。 大量に修正箇所がある場合ツールを使って一気に修正しよう。 管理画面のツールからsarchreg…