【CSS GRID LAYOUT】display: grid; を使ってみよう!

CSS GRID LAYOUT

こんにちは、ジーニアスウェブの黒木です。
最近急に冷えてきて、朝起きるのが辛くなってきました。。。
自転車で30分かけて通勤していますが、そろそろ防寒対策をしていったほうが良さそうです。

さて、皆さんグリッドレイアウトやってますか〜?
やってるわーって言う方がほとんどですかね。でもそれってinline-blockだったり、floatだったり、flexboxだったりしませんか?

かく言う私もflexboxを使うことのほうがまだ多いです。
なので今回はタイトルの通り、display: grid;を使ったグリッドレイアウトについてご紹介していければと思います。

続きを読む

かんたんにYouTube動画をWEBサイトに載せる方法


 

こんにちは!ジーニアスウェブの宇津です。

昨今は台風や地震や大雨などの自然災害が多発していますね。
実際台風21号の被害にあって、あらゆる危険を想定して準備していかなくてはいけないと感じました。

さて、今回はYouTubeの動画をHTMLに埋め込む機会がありましたので、やり方を説明していきます。

続きを読む

「BEM」+「Sass」でスッキリ見やすいスタイリッシュなスタイルを書いてみたい BEM + Sass[基礎編]

まだ残暑はありますが少しずつ涼しくなってきたかな、なんて思っていたら今度は台風の季節ですね。
天災なので防ぐ事はできませんが、皆様ちゃんと備えはありますでしょうか。
自分の家は山の裾であまり危険はありませんが、非常用のバッグなどはしっかり用意してあります。

仕事も生活も日々トラブルシューティングを行って、より良い生活を送れるようにしていけたらいいですね。

続きを読む

コーディングが苦手な方必見!わかりやすい!楽しい!学べる!【Progate】

皆さん、はじめまして。
4月からジーニアスウェブに入社いたしました日高直也です!!

最近はお昼はポカポカ天気がいいですね!
先週のゴールデンウィークはお友達4人と鹿児島に川に行ってニジマスを釣りに行きました。
運転は疲れたのですが、やはり釣りは気持ちを穏やかにしてくれるものですね!

ではでは私がこの1ヶ月学んだこと、気付いたことをお話させていただきます!

続きを読む

「BEM」+「Sass」でスッキリ見やすいスタイリッシュなスタイルを書いてみたい Sass[基礎編]

前回のBEN[基礎編]に続きまして、今回はSass[基礎編]です!
先人の教えを学んでも、実践できるかというというと中々難しいですね。

“スタイリッシュに書くぞ”とどれだけ意気込んていても、気付くといつの間にかにカオスに・・・。
そんな自分でも一か月前に書いたコードよりは多少はマシな気がします。
やはり経験に勝るものはないのでしょうね。

それでは早速Sass[基礎編]いってみましょう。

続きを読む

Font Awesome 5をCSSの疑似要素で指定するとアイコンが表示されない場合の対処方法

こんにちは。ジーニアスウェブの杉田です。

花粉との戦いも終息に向かっているので、
ようやく外出がしやすい季節になってきました。
そろそろ、ジョギングの再開をしようと思います。

さて今回は、
昨年いつの間にやらバージョンアップされていた「Font Awesome 5」で、
私がハマった罠の解決方法をご紹介させていただきます。

続きを読む

SNI SSLで困ったこととその解決

こんにちは。ジーニアスウェブの増田です。

最近、「僕のヒーローアカデミア」という漫画にハマっています。
アニメ化もされている作品なので、ご存じの方も多いかもしれませんが、久々にドハマリした作品です。主人公やその周りのキャラクターの成長や苦難が描かれており、読むと元気を貰える作品です。
もし読んだことが無いと言う方は是非読んでいただければと思います。

さて、私の趣味は置いておいて早速今回の話題に入りましょう。
皆さんは、「SNI SSL」というものをご存知でしょうか?

さくらインターネット等が提供しているSSLの一種ですが、知らないと少しつまずくポイントがあったので、ここで紹介しようと思います。

続きを読む

PCでAndroid端末のブラウザチェックをして、検証までやってしまおう!

こんにちは。ジーニアスウェブの黒木です。

昨日から地元宮崎を離れ大阪本社にきています!!
前職で大阪に3年ほどいたことがあるので、第2の故郷に帰って来たという感じでワクワクしています。

さて、今回はタイトルにもある通り「PCでAndroid端末のブラウザチェック」をする方法をご紹介したいと思います。

 

続きを読む

PC用とスマホ用サイトを自動振り分けする方法


こんにちは、戸井です。

今までPCサイトだけだったけど、新しくスマホサイトを作った!という方はいらっしゃいますか?
もしかして、スマホでもPCサイトが見れたり、PCでスマホサイトが見れる状態になってないですか?
デバイスにあったサイトが見れないという状態は、改善すべきです。
なので、「.htaccess」を使用して、スマホサイトとPCサイトを振り分ける設定をお伝えいたします。

続きを読む

fullcalenderを使用してカレンダー機能を実装してみよう!


みなさんこんにちは、ジーニアスウェブの中武です。

今年も残すところあとわずかとなりましたね。
先週末は宮崎オフィスの忘年会も行われ、宮崎牛を堪能して参りました!

さて、システム開発を行なっている中で、カレンダーを表示させたいということがあります。
グーグルカレンダーを使用したり、カレンダー機能のパッケージは色々とありますが、今回はこちらのfullcalendarを使用した、様々なカレンダー表示についてお話しさせて頂きたいと思います。

続きを読む

Sublime Textを使いこなして、作業効率大幅アップ!! 後編

こんにちは。
ジーニアスウェブの米田です。

前回、Sublime Textをカスタマイズするために、PackageControllをインストールしました。

Sublime Textを使いこなして、作業効率大幅アップ!! 前編

これで、パッケージと呼ばれる追加機能をインストールすることができます。
今回は、とても便利なパッケージをいくつかご紹介していきます。

続きを読む

コーポレートサイトリニューアル Column vol.3【CMS&コーディングについて】


こんにちは。ジーニアスウェブの杉田です。
2017年も残すところあと1ヶ月を切りました。
時の早さに驚きを隠せずにいる今日この頃です。

さて、その2017年が終わる前に行った当社のコーポレートサイト全面リニューアル!
今回は私が担当させていただいた「CMS&コーディング」についてのお話しをさせていただきます。

続きを読む

新米コーダーの私が使うテキストエディタ

みなさん、はじめまして。
11月からジーニアスウェブに入社した黒木です。

新米コーダーとして、毎日勉強の日々を過ごしています。

ブログは公私を通して初めての投稿です。
わかりづらい部分もあるかもしれません。
やさしく見守っていただければ幸いです。

さて、コーダーとして働きはじめた私ですが、コーディングするのにまず必要なソフトといえばテキストエディタですよね。
今回は、新米コーダーの私が使っているテキストエディタを紹介させていただきたいと思います。

続きを読む

Sublime Textを使いこなして、作業効率大幅アップ!! 前編

こんにちは。
ジーニアスウェブの米田です。

最近字を書くのにはまっています。
アナログメモが大好きなので、美しい字を書けるようになりたいものです。

さて、みなさんはコーディングの際、どのテキストエディタを使っているでしょうか。
まさかメモ帳なんてことはないでしょう。

便利なテキストエディタがたくさんありますが、今回は私が利用しているSublime Textです。
お恥ずかしながら機能の半分すら使いこなせていないので、
これを機会にごりごりカスタマイズしつつ、ご紹介していきたいと思います。

今回は前編として、カスタマイズに必要な準備をしていきます。

続きを読む

「もしも〜だったら・・・」条件分岐if文とswitch文の使い方

みなさんこんにちは、ジーニアスウェブの中武です。

最近テレビで紅葉特集の番組を多く見かけるようになりました。
紅葉シーズンはこれからですのでとても楽しみですね!

さて、今回は「もしも〜だったら・・・」を実現するif文と、switch文の使い方についてお話しさせて頂きます。

続きを読む

inline-blockで横並びにしたらカラム落ちしてしまった!簡単な解決法をご紹介!

こんにちは。
ジーニアスウェブの米田です。

コーディング初心者にとって、要素の横並びはつまずくポイントの1つではないでしょうか。
実際自分もそのひとりです。

レスポンシブ化が必須になってきている今、可変対応できるものでないとなりません。
今回はinline-blockで横並びにした際、カラム落ちしてしまう現象についてご紹介します。

続きを読む

ソースのバージョン管理をしたいなら、この木何の木?Gitの木!-応用編-


みなさん、こんにちは。
ジーニアスウェブの中武です。

まだまだ蝉の声が聞こえておりますが、夜や朝方はだいぶ涼しくなって参りましたね!

さて、前回に引き続き、SourceTreeを用いたGitについてのお話をさせて頂きたいと思います。
今回は応用編とういうことで、リモートに対する操作などを中心にお話致します。

続きを読む

要素の高さが自動で揃う、「matchHeight」がめちゃくちゃ使える!

null
こんにちは。
ジーニアスウェブの米田です。
 
今月末はくるり主催の京都音楽博覧会に行ってきます。
去年も参戦したのですが、なんと台風で主催者であるくるりの出番前で中止に。。。
今年はリベンジ!楽しみです!
 
さて、みなさんは「matchHeight」というものをご存知でしょうか。
レスポンシブ対応が必須の今、このjQueryプラグインがとても役に立つのです
 
続きを読む

ビューポートの幅に合わせてフォントサイズが可変する「vw,vh」が便利!

170829_font-viewport_thum

こんにちは。
ジーニアスウェブのスギタです。

私は暑い夏がとても苦手なのですが、この時期の夜釣りは心地良くて好きです。
先日の夏休みには、小さいサイズですが太刀魚を少々釣って帰りました。
小さいサイズなので捌くのが少し大変だったのですが、有りがたく美味しく頂きました。
これからどんどん釣れる時期に突入なので、また行けるように仕事がんばります!

さて本題に入りまして、
皆さんはレスポンシブサイトをコーディングする際、フォントサイズはどのように指定されていますか?
基本はメディアクエリを使用し、ブレイクポイントごとにpxやremなどのサイズを変更する方法かと思います。

しかし、ブレイクポイントごとにわざわざサイズ変更するのって大変なときありませんか?
そんな時にとても便利な、vwvhについてご紹介させていただきます。

続きを読む