ちょっぴり差をつけよう!斜め背景のデザイン

こんにちは!bibiです。風邪が流行ってますねー
自分もその流行に乗りいまだに喉がつらいのと鼻が利かない後遺症に悩まされております。

鼻が利かないと味がよくわからないんですよね!
食事が美味しく摂れないことが風邪ひいたことより凹んでおります。。
まあ風邪には恨みはありませんよ!!むしろ少し休めてよかっ(略)

皆さんも風邪、気を付けてくださいねー! 風邪にはビタミンCと、身体を温かくして
さっさと寝ちまうのが一番ですよ★ミ

それじゃあ!快適なWEBライフを☆彡

 

 

 

 

 

 

 

 

おっと忘れてた・・・

 

 

 

 

 

 

 

 

記事ですよ記事!

誰も書かないなんて言ってないじゃないですか!!(逆ギレ)

 

 

 

 

えーと・・・

 

 

今回は・・・

 

 

誰にでも簡単にできます!背景を斜めにするデザインです!

 

htmlはまずこちら。

おっと心の声がだだ洩れ。。まあ事実ですからねしょうがないね。

 

CSSは以下を書いてください。背景の色は僕の怒りを表しています。

これで準備完了!カンタンでしょ。。

 

 

ポイントは、背景に色を付けて、

 

ここで角度をつける。

 

斜めデザインだと初見で「おおっ!」って思われること請け合いです!

CSSのみで意外と簡単にできるので、皆さまお試しあれ!光あれ!

HTMLのみの記述でアコーディオンを設置する。

お久しぶりですsu-sanです。

長すぎる文章だったり、補足項目だったりにちょっとした部分に折りたたみ(アコーディオン)が欲しい時ってありますよね?

今回はHTMLの記述のみでそうしたちょっとした部分にアコーディオンを追加する方法を書いていきたいと思います。

下記が実行結果。

 

 

ここが開くよ
この要素が出ますよ

 

 

 

いかがでしょうか?かなり簡単にアコーディオンの実装ができたのではないでしょうか。

の部分で矢印がデフォルトで出てしまいますがcssに下記記述をすれば消すことができます。

以上!良いWEBライフを!

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に

こう記述すれば完了!

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

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