フロントエンド | SiTest (サイテスト) ブログ

メニューボタン閉じるボタン

最新情報を発信する
SiTest ブログ

最低限の CSS のみで Masonry のようなグリッドレイアウトを組む方法

今回は、高さの異なるコンテンツを隙間なく敷き詰めるレイアウトを CSS だけで実現する方法をご紹介します。
Javascript や CSS のライブラリは使わず、ピュア CSS のみで手軽に実装してみました。

続きを読む >

必要なものはこれだけ! Vuepack だけで簡易アプリを作ってみた

みなさん、Vue.js は使っていますか?
Web サイトに一部だけ取り入れることが可能だったり、学習コストが低かったりという点で、JavaScript フレームワークの中では比較的とっつきやすいものだと思います。
とは言いながらも、まだまだ試してみるのに及び腰、または「Vue で何をどこまで実装できるものなのかイメージが湧かない」という方もいらっしゃるかもしれません。

そこで今回は、「Vuepack」という、 Web サイトをご紹介し、実際に Vue のコンポーネントを使った簡単なアプリを作成してみたいと思います。

続きを読む >

「Can I use」で HTML5 や CSS3 の各機能について対応ブラウザを調べよう

「Can I use」で HTML5 や CSS3 の各機能について対応ブラウザを調べよう

こんにちは、プロダクト開発チーム エンジニアの森永です。

最近は本ブログでも紹介した FlexboxCSS Grid Layout のような新しい機能など、サイト作成やアプリ開発などWebを取り巻く HTML5 や CSS3 などの状況は日々変わりつつあります。

しかしながら、ブラウザによっては対応していない HTML5 や CSS3 の機能もいろいろあり、一部のブラウザで見えない、動作しないといった現象も多々あるのが現状です。特に最近では PC用ブラウザでは Internet Explorer 、スマートフォン用ブラウザでは Safari でこのようなケースに遭遇することが多いです。

続きを読む >

リニューアルされたサイト作成サービス Google Sites を試してみる

リニューアルされたサイト作成サービス Google Sites を試してみる

こんにちは、プロダクト開発チーム エンジニアの森永です。

ビジネスユースでサイト制作を行う場合、制作会社で企画、サイトデザインを元にしてコーディングを行っていくというケースが多いかと思います。
その一方で、パーソナルユースを中心に WixJimdoYahoo! ジオシティーズ など無料Webサイト作成サービスやCMSサービスを利用してサイトを作成する方もいらっしゃるかと思います。HTMLの知識などは特に必要とせず、デザインの選択やパーツの配置などをアイコンのクリックやドラッグアンドドロップなどで簡単に行うことができます。

続きを読む >

Firebase を使ってリアルタイムウェブアプリを作ってみる

前回の記事では、Firebase を使って静的なサイトを公開する方法をご紹介しました。
今回は、Firebase の目玉機能の一つである Realtime Database を使って、簡単なチャットアプリを作ってみようと思います。

続きを読む >

Blockly1.0 って何?教育向けビジュアルプログラミングエディタを作ってみよう

Blockly トップ画面

このところ、教育とプログラミングについての話はよくでてきますね。

小学校でプログラミング教育が必修化するニュースは知ってる方も多いと思います。
それに影響をうけ、さまざまなビジュアルプログラミング言語がでてきました。

ビジュアルプログラミング言語とは視覚的なオブジェクトでプログラミングするプログラミング言語です。

Scratch (スクラッチ), MOONBlock (ムーンブロック), VISCUIT (ビスケット)など、聞いたことあるかたも多いと思います。

今回、紹介する Blockly (ブロックリー)もその1つです。

それでは、 Blockly の概要からビジュアルプログラミングエディタを作っているところまで見ていきましょう。

続きを読む >

Vuetify.js を使ってマテリアルデザインに挑戦しよう!

「マテリアルデザイン」という言葉を Google が発表してから既に3年が経過しましたが、みなさんは実際にマテリアルデザインを使ったことはありますか?

今ではかなり浸透しており、メジャーな JavaScript のフレームワークには、マテリアルデザインをベースにした CSS フレームワークが登場しています。(React.js はフレームワークというよりライブラリですが)
 ・ Angular : Angular Material
 ・ React.js : Material-UI
 ・ Vue.js : Vuetify.js

マテリアルデザインのルールに則れば、直感的で使いやすい UI が作れる!
そこで今回は、 Vue.js の CSS フレームワークのひとつ Vuetify.js を使って、ゼロからマテリアルデザインを適用していきたいと思います。

続きを読む >

環境構築不要!最小構成で理解する Riot 超入門編

Riotアイキャッチ画像

コンポーネント指向フレームワークである Riot を最近良く耳にします。

Riot は、比較的容易なフレームワークです。
でも、ちょっと試したいだけで環境構築するのは手間ですよね。

この記事では、簡単に試せるように、
テキストエディタとブラウザさえあれば動作する構成にしました。

Riot をスムーズに理解するために、最小構成のサンプルの HTML を作成し、
そこに徐々に肉付けして、 Riot の様々な機能について説明します。

それでは、 Riot を見ていきましょう!
続きを読む >

Firebase を使ってサイトを無料で公開してみる

今回は、Google のホスティングサービス Firebase を使って静的なサイトを公開する方法をお伝えします。
サクッとウェブサイトを公開したいけど、Google サイトのようにテンプレートからではなく、自分で書いた HTML・CSS を使いたい、という方に特にお薦めです。

続きを読む >

CMS を10分で構築!無料で簡単な Netlify CMS を使ってみよう

Netlify CMS トップ

今やブログを持つならほとんどの方が CMS を導入しているのではないのでしょうか?
CMS で有名なのは WordPress ですよね。

ただ、 WordPress を導入するには、レンタルサーバーやドメインを用意しないといけなかったり、レンタルサーバーによっては PHP や MySQL をインストールしないといけません。

また、エージェントによっては、 レンタルサーバーから WordPress の環境まで用意してくれているところもありますが、費用が発生したりします。

今回は、そんな手間や費用をかけず、 CMS を構築できる「 Netlify CMS 」を使っていきます。

高機能ホスティングサービスの Netlify にのせて、使っていきます。 続きを読む >

1 2 3

03-6441-3336

いますぐ無料で
お試しください。

SiTestの革新的な機能を、
1か月間無料でお試しいただけます。

お名前【必須】
メールアドレス【必須】
電話番号【必須】

利用規約はこちら