2017年四半期に思うこれからのWEB開発

2017年四半期に思うこれからのWEB開発

こんにちは。セリーナです。

IT技術の進歩は著しいものがあり、昨年使った技術でもすでに古いということが良くあります。しかしながら、基本は全く変わっていないということも事実です。

現在、サプライドではWEB受託の案件を受託しており、打ち合わせ時にはお客様といろんなお話をします。その中で、○○のサイトのようにしたいご希望や、○○したときに○○するエフェクトを入れたい。というお話もあります。
基本的には、WEBでできている表現はすべてできるのですが、コストや飽きが来ないか、納期なども重要になり、そのあたりもお打ち合わせしながら、ご希望のデザインに仕上げていきます。

現在、ホームページを作るためには、
下記、方法が挙げられます。
・各サーバー屋さんから出ている簡易作成サービスを利用する
・自分自身でHTML,CSSを勉強してレンタルサーバーにあげる。
・詳しい友達に頼む。
・WEBページ制作会社に依頼する。
・Wixなどのホームページを簡単に作れるサービスを使う。
・楽天などのショップページ作成で簡易的にページを作る。
・Blogサービスを使い、それ自身をホームページ化する。
・Wordpress.comのサービスを使い、それを活用する(ページ+ブログが同時にできる。)
・自分自身で勉強して、レンタルサーバーにWordpressをインストールする。
・ページは作らずSNS内のfacebookなどでお店ページを作る。

上記のように、現在では、ホームページを言っても色々な形で作成することがあります。
デザイン良くページを作ることに加え、今は検索エンジンでの結果表示、つまりSEO(Search Engine Optimization)を気にしたり、SNSに投稿するためのOGP(Open Graph protocol)を気にしたり、ページの読み込み早さを気にしたり(PageSpeed Insights)、ページを作るだけでなく、様々なことを考えなければいけません。
もちろん、制作時にはすべてを考えます。

ですが、
一番重要なのは、


HTML
(HyperText Markup Language)とCSS(Cascading Style Sheets)です。
厳密にいうとHTML5とCSS3ですね。

これさえきちんとわかれば、どんなものにも応用ができます。

つまり、様々なサービスを使ってWEBサイトを作ることは可能ですが、
HTMLとCSSの基本を知らないと、ただ誰かのシステムの上に乗っかって作業する人になってしまいます。それでは、サービスが変わるために、またそれを覚えなくてはいけません。
これは、他のサービスにも言えますね。
C言語やC++,Java,JavaScript,Ruby,Python…など、基本の言語を学ぶと良いでしょう。

つまり、これからのWEB開発をするために重要なことは、
さまざまなサービスがあるが、

基本を覚えよう!

です。
そして、それから自分の好きなサービスを使うのが良いと思います。

「初心忘れずべからず。」ですかね^^

新しい情報を期待した方、すみません。

初心者でも安心!マウスホバーエフェクトが100種類も!?超絶使えるhover.cssのご紹介!

こんにちは!bibiです。

今回は、ホバーするだけでいろいろと動きを出し、
リニューアルなどに超絶使えるhover.cssの使い方です。
今回は、ボタンを作って、動かしてみましょう。

行程はわずかにこの4つだけ。

1.をダウンロードして所定の場所に設置
こちらのサイトで、一括ダウンロードから直接ダウンロードします。
使用するのはhover.cssだけで大丈夫です。
ダウンロードしたら、cssフォルダに置けばOK!

2.hover.cssのリンクをhtmlに記述
続いてこの記述を、htmlの所定の位置に記述します。簡単ですね!

3.hover.css用のタグを設置
次に、ボタンを作るコードを、所定のcssに記述します。

4.htmlに、ボタンを設置する
最後に、このコードをボタンに記述します。

これで準備はOK!あとはclassの部分に動きのクラスを付与するだけで、簡単に動かすことができます。

hover時に”震える”ボタン

hover時に”左から右に色がつく”ボタン

このクラスは複数記述することもできます。ちなみに最後のコードは、ボタンではなくてもimgやh1、pタグなどにもつけることはできるので、簡単に動きを出すことができます!

こんな感じですね。

いかがでしょうか?JavaScriptを使わないので、シンプルにできますよ。
動的なWeb作成ライフを満喫しましょう!

htmlをそれぞれ分けて管理する

どうもsu-sanです。

webページを作成している際、グロナビ周りやfooterに追加の変更があった場合いちいちコピペして回るのは面倒くさいですよね?

今回はCodeIgniter、CakePHPを始めとしたCMSを使用せずにheaderやfooterをパーツ化して管理する方法を書いていきたいと思います!

まずは共通化したい部分が記述されたhtmlを作成します!ファイルネームはheader.htmlで・・・

次に読み込ませたいhtmlのheadでjqueryを読み込みます。

その直下に下記を記述します。header.htmlのglobalnavというidのdiv要素を取得して、div#navに展開する。という感じです。

読み込ませたいhtmlに

こう記述すれば完了!

これだけで簡単に共通化することができます。

皆さんも試して見てはいかがでしょうか?

【jQuery】ページがスクロールされたらやってほしい処理を書く方法

どうも
ご無沙汰してますsu-sanです。

webページ制作でスクロールされた時にやってほしいことを書きたい時ありますよね!

スクロールされたらメニューバーを表示させたりボタンを表示させたり。。。

それができるのが下記のコードです!!

以下の関数の中に行いたい処理を書くとスクロール時に実行されます!

$(window).scroll(function(){
    〜行いたい処理〜
});

今回はwindowのscrollでイベントを追加してみたいと思います。

ここでクラスを指定して色を変えたり何かを表示させたりなどできます!
上の例ではスクロール時にhogeクラスにhogehogeクラスを追加していますー

$(window)には他にも色々な便利な関数があるので、ぜひ使ってみてくださいー!

以上、「ページがスクロールされたらやってほしい処理を書く方法」でした!

これは使える!無料【 Chrome拡張機能】

こんにちは!bibiです。
今回はweb関係者にオススメ!
使って便利!なGoogle Chromeの拡張機能を紹介します!

 

Altチェッカー【Popup Image Alt Attribute】

「あれ、あの画像のaltって何書いたっけ・・・?」
「大量にコピペでhtmlタグを量産したけど、alt変えたっけ・・?」
そんなあなたに朗報!この拡張機能をインストールすれば、
なんとhoverするだけでaltが表示されます!
いちいち検証やソース見に行ったり検索したりせずに楽々便利♪
Popup Image Alt Attribute

 

キャッシュクリア【Clear Cache】

「再読み込みするだけじゃ、変更が表示されない・・・」
皆様、経験ありますよね!?
「設定からキャッシュクリアを・・・あれ、履歴からだっけ・・・?」
あるある!こういうので意外と時間かかっちゃったりしますよね!
この機能は、1クリックでキャッシュをクリアしてくれる優れものです!

なお、オプションからReloadにチェックを入れると、1クリックで
再読み込みとキャッシュクリアを同時に行うことができます!
納期の差し迫った時期に1秒でも節約したい、そんなあなたにオススメです!

Clear Cache

 

fontチェッカー【What Font】

気になるあのサイトのあのフォントが、1クリックで簡単に確認できます!

What Font

 

タグエラーチェッカー【HTMLエラーチェッカー】

表示ページを自動で検証してくれて、抜けタグなどタグエラーがあれば教えてくれます!我が社は大丈夫なようですね、(´▽`) ホッ

HTMLエラーチェッカー

 

クロームユーザーならひとつ1分程度で瞬速追加可能です。
どの機能も、あるとちょこっと便利になったり、作業時間を節約できる優れモノです!
是非是非、日々の社畜workライフに利用してみてください♪