今回はFont Awesomeという超便利なサービスの使い方をまとめます。後半ではアイコンにさまざまなアニメーション効果をつける方法も解説します。 1. Font Awesomeとは？ ざっくりというとウェブサイトやブログでWebアイコンフォントを表示できるようにしてくれるサービスです。

.htaccess とは .htaccessとは、ウェブサーバーをディレクトリ単位で制御するファイルのことです。 Apache（アパッチ）というウェブサーバーソフトウェアが使用されている環境の中で利用できます。 .htaccessを利用すれば、特定のウェブページに対してリダイレクトやアクセス制限、カスタム404ページを表示するように指示を出すことが可能です。 .htaccessを設置したディレクトリでは、サブディレクトリを含むすべてのファイルに効果があります。例えば下図のように、「/sample/」に.htaccessを設置した場合、下層の「/sample/1/」「/sample/2/」「/sample/2.1/」にも制限が適用されるイメージです。 .htaccessは、サブディレクトリにも設置が可能です。上層のディレクトリ（/sample/）と下層のディレクトリ（「/sample/2/」

こんにちは！Maromaroのchieです。 少しづつ暑さも和らいで、秋っぽくなってきましたね。 秋と言えば昔は、「東京ゲームショーの季節だ！」と毎年楽しみにしてましたのを思い出します。 東京ゲームショーは今年も大変の賑わいを見せ、なかでも注目なのはVR系のゲーム！ VRがもっと復旧すると、もしかしたらWEBサイトも実際お店に行ってるような感覚で見れるようになるかもですね。 さて今回は、初心者WEBデザイナーさんに是非とも覚えておいて欲しい基礎知識『Z』と『F』について。 ZとFって？ 結論から言うと、『Z』と『F』は広告やWEBにおける人の目線のことです。 人の目線には決まった動きがあると言われており、それが『Zの法則』と『Fの法則』。 普段何気なく見ているチラシやWEBサイト。 チラシを見た瞬間、ページに入った瞬間、自然と左上に視線がいっていませんか？ 広告業界、WEB業界では当たり前

こんにちは！　以前編集長キックを受けていました。編集者Mです！ 今回はSVGでつまづいたことがありますので、 その問題の解決法を皆様にシェアしちゃいたいと思います！ SVGってすっごく便利ですよね！ ベクターデータで作られている画像なので、 jpgやgifなどと違ってどんなに大きく引き伸ばしてもキレイに表示してくれるんです！ しかも軽い！ ですが、そんなSVGにも落とし穴がありました。 IEやEdgeだとうまくサイズを調整できないッ！！！ 今回はアイコン付きの見出しを作っちゃおうと思い、 backgroundでSVG形式のアイコンを指定し、 background-sizeでアイコンの大きさを指定していました。 HTML

プログラミング学習サービスやら、ペットサロン予約サービス、風俗検索サービスなど色々とやっている「かずきち」です。 ■運営サービス一部 http://crazy-wp.com/ http://webukatu.com/ 新宿のホストから不動産・保険の営業を経て、HTMLって何？という状態から３ヶ月独学でプログラミングやデザインを学び、IT業界で１年間実務経験を積んで年収は１本超え。現在は起業家としてサービス運営やら不動産運営をしています。 Qiita内にそれ系の記事も書いてます。 エンジニアで稼ぐために大切な１３のコト WEBサービスで起業したい人に読んで欲しい１８のコト ##Gulpとは？？ タスク自動化ツール。 画像やjs、cssなどの色々なファイルを圧縮してくれたり、CSSプリプロセッサのSASS、LESS、Stylusなどを自動でコンパイルしてくれたり、ファイルが更新されたら自動でブ

みなさま、こんにちは！ 株式会社ホワイトボードのフロントエンジニアの末ちゃんこと、末吉です。 世の中で今日は色々大変な日だったようですね。 山梨県では突然の雷雨で、滝のような雨が降りました。 知り合いのトラックドライバーからは、冠水した道路に突っ込んでいったドライバーが水没したのを見て、 「最近の人は危機管理や判断能力がなってないよね」と言ってました。 はたまた緊急地震速報の誤配信で、日本沈没クラスの大地震がきて交通網が大慌てになったり。 特に都会の皆様、大変だったことと思います。 山梨は平和です。 CSSプリプロセッサ（CSSメタ言語）とは？ さて、早速ですが本日はCSSプリプロセッサというものをご紹介したいと思います。 近年、ウェブサイト制作はどんどん複雑になる一途を辿っています。 サイトが昔に比べて大規模になり、Ajax等の動的な動作にも対応しなければならなくなり、 あらゆるデバイス

これまで、 CSS はそのままstyle.cssのようなファイルに直接スタイルを書いていく方法が主流でした。 しかし、Webサイトが巨大化したり、より高度で細部にまで渡ってスタイルを決めていく場合、 ファイルサイズ が大きくなり、どうしても保守性に欠けてしまいます。 そこで登場したのが、プリプロセッサーであるSassやLESS、Stylusといったメタ言語です。 こうした言語を使うことで、 CSS をよりプログラミングに近い形で扱うことができるようになります。 今回は、その中でもSassに焦点を当てて、初心者でも理解しやすいように「入門」としてまとめました。 基本的な使い方を中心に扱っているので他にも便利な使い方はありますが、まずはこれらを押さえておけば、Sassを使い始めることができます。 CSS の勉強をワンランクアップさせたいWebデザインを勉強中の方は、ぜひチェックしてみてください

簡単に書くよ コンパイラ（英：compiler）とは 人間様が分かる言葉で書いたプログラムの元ネタ（ソースコード）をコンピュータさんが分かる言葉に変換してくれるプログラムのこと です。 順番に見ていきましょう。 まずは予備知識として、プログラムを作る一般的な流れと「コンパイル」について簡単に説明します。 「そんなの説明されなくても知ってるよ！」な人は適当に読み飛ばしてください。 プログラムを作って動かすまでの一般的な流れは １．人間語でプログラムの元ネタを書く ２．元ネタを人間語から機械語に翻訳する ３．翻訳された指示に従ってコンピュータさんがお仕事する です。 コンピュータさんは人間語が分かりません。 人間様はコンピュータさんの言葉が分かりません。 プログラムは人間様が作る物です。 そこで、最初は人間様が分かる言葉でプログラムを作ります。 コンピュータさんに対する「あれをやれ」「これもや