あなたがコーディング初心者を脱する方法
比較的経験の浅めの人のHTMLとCSSコーディングを見ることが増えたのですが、その際にこうしたほうが良いかなーと思う箇所が共通してたりするので、まとめてみました。 ただ以下にあげる例は、状況によっては使わないといけなかったりするので絶対ではありません。そう絶対ではありません。 floatを覆っている要素の高さをだす 要素をfloatすると、それを覆っている要素の高さがなくなります。その高さをだす場合は以下のような方法をとります。 親要素にoverflow: hidden;を指定する 親要素にclearFixを使う 強引にheightで高さをだしている場合をよく見るのですが、その方法だと中の要素が変わるたびに指定をしなおさないといけなくなりますので、height以外の方法をとるのがオススメです。 floatを解除する方法のまとめ: 小粋空間 floatはclearする 先ほどのclearFi
レスポンシブデザインをコーディングする時の、自分なりのちょっとしたTips
前にこの記事で、レスポンシブデザインをコーディングの仕方の基本的なことを説明をしましたが、今回は自分が製作してる時に気をつけていることや、よく使う方法を書いておこうと思います。 案件や作業フローによって全然違う方法がよい場合もあるかもしれませんので、参考程度にどうぞ。 要素のマークアップ順序 会社や作業フローによるかと思いますが、今のところ、PC用とスマートフォン用のデザイン2枚が出来上がってくる事が自分は多いです。 そのデザインを見ながらHTMLを作っていきますが、この時スマートフォンのデザインを見ながらマークアップしたほうが良いと思いました。 文章の意味付け的にデザインで順序変えるのはどうなのよというのはありますが・・・。 positionを使って再現するデザインの場合はPCは簡単に位置を入れ替えることができますが、スマートフォンのデザインは320px～リキッドデザインにすることが多い
CSSアニメーションの初歩をおさらい
最近はアニメーションをFlashではなく、CSSやJavaScriptで実装されているサイトをよく見るようになりました。 今回は復習も兼ねて、CSSで動きを付けられるanimationとtransitionのおさらいをしてみたいと思います。 ベンダープレフィックスをつけないと動かないブラウザもありますが、省略します。 animationとtransitionの違い どう違うのかなと思って調べたのですが、いまいちわからなかったので、違いを並べてみました。 animation ループ可能 keyframesで細かい設定が可能 ウインドウ読み込んで即実行が可能 transition ループがない 自然に最初の状態に戻る hoverなどのキッカケを与えてあげないと動かない JS使えば違うかもしれないですが、一応こんな印象です。違ったらすみません。 それぞれを翻訳すると、animationはそのまま
Sublime Text 2のプロジェクトを設定してみよう
Dreamweaverでは「サイトの定義」を使っていたのですが、Sublime Text 2でもそれに似た機能がないかと思ったら、 Projectというのがありました。 使い方 上のメニューバーのProjectから使います。もし、Side barが表示されない場合は「View」→「Side bar」で表示させて下さい。 やり方はいろいろあるかと思いますが、まず製作するフォルダごとsublime text 2にドラッグ＆ドロップします。 そうするとサイドバーにフォルダとその下層のファイルが表示されます。 基本的にはこれでファイルを一覧で見れるようになります。ただこのままだとプロジェクトの保存はされていないので、 上のメニューバーから、「Project」→「Save Project As…」を選択します。 そうすると、名前を付けて保存の画面が出てくるので、「●●.sublime-project
コーディングが早くなる！？噂のSublime Text 2を入れて初期設定をしてみた。
最近私の周りでよく話題になっているエディタ「Sublime Text 2」。 使い慣れているからという理由でずっとDreamweaverを使っているのですが、紹介記事をいろいろ見ていたら良さそうだったので使ってみようと思い入れてみました。今回は その「Sublime Text 2」をインストールして初期設定、そしてプラグインを入れる方法までをご紹介したいと思います。 Sublime Text 2とは Windows・Linux・Macで動作し、特にWeb開発に適したテキストエディタです。 有償製品ですが、ダウンロードは無料。継続して利用するにはライセンスの購入が必要です。 便利なショートカットと拡張機能 Sublime Text 2を使おうと思ったきっかけが、便利なショートカットと豊富なプラグインです。探せばいろいろ出てくるので検索して調べてみると、こんなものもあったのかというようなプラグ
SNSボタンをオリジナル画像で設置する方法
TwitterやFacebookへのボタンは公式サイトでボタンを作れますが、そのボタンはそれぞれオリジナルのボタンで設置することもできます。 ボタンの仕組みが変わると動かなくなるかもしれませんが、以下の方法で設置できます。今回紹介しているのはTwitter・Facebookシェア・mixiチェック・Google+です。 Twitter コードは以下になります。 <a href="http://twitter.com/share?count=horizontal&original_referer=ページのアドレス&text=ツイートさせたいテキスト&url=ページのアドレス&via=Twitterアカウント" onclick="window.open(this.href, 'tweetwindow', 'width=550, height=450,personalbar=0,toolbar=
パララックスサイトの作り方の初歩
最近パララックス（視差効果）を取り入れたサイトが増えてきました。 仕組みや簡単なものを作れるようにしておきたかったのでいろいろ試してみました。 ちなみにもっと効率良く作れる方法とかもあるかもしれませんので、一例ということで御覧ください。プラグインはまだ試したことがないので そちらを使ったほうが楽かもしれません。 パララックス効果のjQueryプラグインまとめ あと動作はこの記事時点でのFirefoxの最新版でしか確認はしていません。 スクロール量を取得する まずはスクロールすると動くので、スクロール量を取得します。ちなみにjQueryを使ってます。 $(function(){ $(window).scroll(function(){ var y = $(this).scrollTop(); $("#num").text("スクロール量：" + y);//表示用 }); }); サンプルペー
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
東京都地下鉄路線図