【第一回】HTMLとCSS

▼事前準備
・参考文献:本当によくわかるHTML&CSSの教科書
・テキストエディタのDL:Brackets

▼基本
・HTML(index.html)とスタイルシート(style.css)はセット
→HTMLで記述して、CSSで装飾する
・HTMLは<div>〜</div>で囲んだブロックで構成される
→<div class="名前">でブロックごとで名前をつけて、CSSではどのブロックごとに

もっとみる

LINEが運営するWizballで運営サイトのアドバイスを求めた結果

約2ヶ月間popcornaを運営してきて、良くも悪くもサイトに慣れてしい。不便な部分に鈍くなってきたのでLINEが運営するWizball(今夏サービス終了予定)でお金払って聞いてみました。

(Wizballのサービス終了まではこちらのリンクで見ることが可能です)

一番多かった声はアドバイスはカテゴリーがわからないだった。

なので、トップ画面でカテゴリー分けを行い、カテゴリを色分けしました。

もっとみる

「画面上のサイズ」をかんたん計測!「ピクセル定規」とは??

みなさんこんにちは!最近座りすぎて足腰がやられている、おさかなです!(スタンドアップ!!!!笑)

今回は、画面上のサイズをかんたんに計測できる「ピクセル定規」というツールについて、書いていこうと思います!

それでは、レッツゴー!!!!!

目次
1. 「ピクセル定規」って何?
2.どうやって使うの?
3.  実際に使ってみよう!
4.感想・まとめ

1. 「ピクセル定規」って何?

PC画面の

もっとみる

CSS Nite in Sapporo, vol.22に参加#05

最後のセッションは株式会社スイッチ 鷹野雅弘さんによる「Photoshopの非破壊編集と“コンじる”の進化」でした。

CSS Niteの主宰者であり、DTP TransitやAdobe MAX US 2018への登壇でも有名な鷹野さん。

何度かセミナーを聞かせて頂いたことがあるのですが、まず思うのは「プレゼン資料が美しすぎる」こと。

鷹野さんのセッションでプレゼンが綺麗なんて当たり前でしょ。

もっとみる

【CSS】ホームページの単位!「px」と「em」の違いとは?【学習メモ】

・px (ピクセル)

画面上にある「点」を使用した単位 (1px=1ドット)

絶対単位 (環境によって変化しない。)

・em (エム)

文字の高さを基準とした単位。
ex) font-sizeが「10px」の場合、(1em=10px)
※font-sizeを「指定していない」または「100%に指定」している場合、デフォルト値は(1em=16px)

相対単位 (環境によって変化する。)

もっとみる

4カ月、増やしまくった日課

今回は知識のOutputでなく、感想と今後の方針を書いていきたいと思います。

まずはこの一カ月でやっていたことです。

・ピアノ…これならひとりでマスターできる! 大人のための独習バイエル [上巻]が弾き終わった
・ピアノ…ドビュッシーの「月の光」を結構弾けるようになってきた(かなりゆっくり)
・Python…入門 Python 3を読み終わった。
・Python…Pythonではじめる機械学習

もっとみる

CSS Tips ボックスの縦横比を維持したままレスポンシブ対応にしたい

こんにちは、マスダです。ここ1ヶ月くらい1日中CSSを書いているのでそろそろCSS見習いからCSS駆け出しくらいにはレベルアップしたと思っています。

なんてことはさておき、最近知ったCSSの書き方です。

レスポンシブデザインにしたいけれど、ウィンドウサイズを変えた時に横幅が変わるだけじゃなくて、縦横比を維持したままレスポンシブにしたいな。と思ったことはないでしょうか。例えば、いろんなサイズの写

もっとみる

【HTML】✉クリックすると、「メール」を起動させる方法とは?!【学習メモ】

今回はこんな感じのを作っていきたいと思います!

このアイコンをクリックすると…。

メールが起動します!

「宛先」に指定したメールアドレスが、きちんと記載されています!

ソースコード

<!DOCTYPE html><html lang="ja"><head> <meta charset="utf-8"> <link rel="stylesheet" href="https://use.fo

もっとみる

CSSで調べたいことメモ
Sass
Flexbox
CSS Grid
Fukol Grids