phiary
phi I'm a Game Programmer and Frontend Engineer passionate about programming education. Math / C / C++ / C# / JavaScript / HTML5 / CSS3 / Python 最近ルート相対パスなるものを知った。 衝撃的だった。自分の無知さに対して. 今更って感じだがまとめておく. あるときふと思った, 大規模なサイトはディレクトリ構造をどうしてるんだろう？と フォルダが増えると「../」が増えてややこしくなってくるし, 簡単に階層を変えれなくなってしまう. かといって絶対パスにしちゃうとドメインやフォルダ名に依存しすぎてしまう. とか思っていた. だがそんな問題はルート相対パスが解決してくれた. ルート相対パス これは、/ から始めるとルートディレクトリを基準にアクセスしてく
phiary
Code html 目次となるアンカーと, ページトップに移動するアンカーを設置しています. <body> <h1 id='top'>jQuery でページ内リンクを全てスムーズスクロールにしよう</h1> <h2>Table of contents</h2> <ul> <li><a href='#section1'>Section 1</a></li> <li><a href='#section2'>Section 2</a></li> <li><a href='#section3'>Section 3</a></li> <li><a href='#section4'>Section 4</a></li> </ul> <h2 id='section1'>Section 1</h2> <p class='pad'>Text Text Text Text</p> <a href='#top'
phiary
上揃えにする方法 上揃えはデフォルトですね. 何もしなくても上揃えになります. 今回のサンプルでは他の CSS に合わせるためにあえて 下記のようなコードを追加しています. #box1 span { position: absolute; top: 0; } 中央揃えにする方法 まずは中央揃えにしたいテキストの親要素に position: relative; を適応します. .box { float: left; position: relative; margin: 10px; width: 25%; height: 90%; border: 1px solid black; background-color: white; font-size: 2rem; line-height: 2rem; } そして中央揃えにしたいテキストの position プロパティに absolute を設
phiary
Code デモのコードです. html <body> <div class='row'> <div class='item item1'>item1</div> <div class='item item2'>item2</div> <div class='item item3'>item3</div> <div class='item item4'>item4</div> <div class='item item5'>item5</div> </div> </body> css body { margin: 0px; } .row::before, .row::after { clear: both; content: ''; display: block; } .item { float: left; width: 50vw; height: 100vh; text-align: c
phiary
phi I'm a Game Programmer and Frontend Engineer passionate about programming education. Math / C / C++ / C# / JavaScript / HTML5 / CSS3 / Python オレの Advent Calendar 2015 - Adventar の 12 日目です. git を使っていると空ディレクトリを管理したいってことよくあると思います. 一時(tmp)ファイル や ログ(log) ファイル用のディレクトリなんかがそうですね. 実は, git は空ディレクトリは add できない仕様みたいです. ですが, .gitignore を上手く使うことでそれっぽいことができるようになります. 今回はその方法を紹介したいと思います. 1. ".gitkeep" という空ファイルを配
phiary
今回は CSS3 から box-sizing について紹介します. width や height と同時に border や padding を指定しているときに, 少し値を変えただけで意図しない表示になったりレイアウトが崩れたという経験はありませんか？ これはボックスサイズの算出方法が複雑なのが原因です. そんな面倒な問題を解決してくれるのが box-sizing プロパティです!! box-sizing プロパティを指定することでボックスサイズ(width, height) の算出方法を指定することができます. あまり普及していないようですが, 実はこれめちゃめちゃ便利だったりします!! まだ独自実装レベルだからかもしれません. ですが, 現在のCSS3 の草案にも 一応残ってるので, がっつり使わせて頂いてる次第です.
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
