タグ

2016年3月22日のブックマーク (4件)

  • 全くの初心者が独学でWeb制作できるようになるまでの効率の良い勉強の進め方

    独学でWebデザインやコーディングなどのWeb制作スキルを身に付けたい方向けのノウハウを紹介します。 Web制作のテクニックを学ぶ方法は、 研修やセミナーで学ぶ方法 スクールに通って学ぶ方法 お金をかけずWebサイトやを参考に学ぶ方法 の3つに大別できます。 しかし、研修やセミナーは開催地が都市部に偏っていますし、スクールに通うのは経済的な負担が大きいのも事実です。 そこでおすすめしたいのが自宅で学ぶ独学です。 筆者自身も全くの初心者の状態から独学でWeb制作のスキルを身に付けて今はそれをもとに仕事をしています。 独学中には勉強方法としての反省点や手ごたえを感じたことも多いです。 そこで、今回は筆者がWeb制作を独学する中で分かった、独学による効率の良い勉強方法についてお話しします。何から勉強をはじめていいのか分からなかった人の指針になるかと思います。 リアルなお話をしますが、独学ではじ

    全くの初心者が独学でWeb制作できるようになるまでの効率の良い勉強の進め方
  • CSSのみで実現する軽量なツールチップ「Ballon.css」

    WEB上で、ボタンや画像などの補足説明に用いられるツールチップ、そこまで多くは見かけませんが、ユーザーナビゲーションとしては直感的で有効な手法で、制作するにあたって導入を検討するWEBデザイナーの方は多いのではないでしょうか?今日紹介するのはCSSのみで実現する軽量なツールチップ「Ballon.css」です。 CSSのみで制作されていますが、なめらかなアニメーションを実現しています。ICONフォント絵文字にも対応しています。 詳しくは以下 上、下、左、右と4方向にツールチップが出せ、単語から文章まで大きさも5段階にコントロールする事が可能です。 導入は非常にシンプルで、「Ballon.cssCSSを読み込ませて、あとは動かしたい所定の動きをdata-balloon-posという型で呼び出すだけで実装できます。ソースコードなどは「Balloon.cssCSS tooltips fo

    CSSのみで実現する軽量なツールチップ「Ballon.css」
  • jQuery不要でスクロールにあわせて要素をアニメーションで表示するスクリプト -WOW.js | コリス

    ページ下部にもたくさんのアニメーションが! アニメーションはAnimate.cssを使用しているので、さまざまなものが利用できます。 どのようなアニメーションががあるのか、実装方法など、当ブログで以前紹介した記事をご覧ください。 classを加えるだけで多彩なアニメーションが簡単に使用できるスタイルシート -Animate.css WOW.jsはデモ以外にも、他のサイトで実際に使用されているさまざまな例があります。 どのサイトもアニメーションが楽しく、とても印象的です。 Stream Line Icons WOW.jsのつかいかた Step 1: 外部ファイル 当スクリプトを</body>の上、Animate.cssをhead内に外部ファイルとして記述します。 <head> ... <link rel="stylesheet" href="css/libs/animate.css"> </

  • 滅び行くAndroid 標準ブラウザをサポート外にして悩みの種をなくす話

    Android 4.3系以前で使われた標準のブラウザ(Android Browser)は、不具合も多いし、デバッグ方法もろくにない。スマホのIE6と化しているこのブラウザはもうサポートするのやめたかった。 しかもこの標準のブラウザはGoogleからのサポートはすでに切られています。脆弱性も絶賛放置中! https://plus.google.com/+AdrianLudwig/posts/1md7ruEwBLF(公式見つからなかった) なのでユーザー的にも開発者的にも標準ブラウザを使うメリットはないので、 標準ブラウザのユーザーをChromeに移行するようにページトップに警告を表示し、Android 標準ブラウザをサポートから外しました。 標準ブラウザを判定する方法 あまりJSでがんばりたくないので、UAで判定します。いつもカオスなUAですが今回もカオスです。 Android端末ユーザーエ

    滅び行くAndroid 標準ブラウザをサポート外にして悩みの種をなくす話