マテリアルデザイン（Material Design）のCSSフレームワークの使い所（CSS Onlyの軽量フレームワークとの対比）
ある程度デザインされているので、そのまま使い易い マテリアルデザインを使ったCSSフレームワーク・ライブラリ）は、色や影などがついているので、そのまま利用しても見栄えがそれなりに良い。 社内だけで使う業務アプリや管理画面などには、こうしたライブラリを使えばコンポーネント単位で柔軟に使えて良いと思う。 代表的なのは以下。Materialize：動的効果も含め、デザインはピカイチ。Material...
View Articlebuttonタグ選択時のoutlineを無効にする
:focus擬似クラスで効果を上書きして対応します。style.cssbutton:focus{outline:none;}ただ、outlineを無効にすることはユーザーのフォーカス位置の手がかりを奪ってしまうことになるので、マウスや指をボタンの上に乗せたときに表示するアニメーション（いわゆる「ホバーアニメーション」）を，ボタン押下時にも適用するなどの対処は行った方がいいです。style.cssbu...
View Article【初心者向け】学習サイト（プロゲートやドットインストール等）が講了したら次にすること
どうも7noteです。学習サイトが終わったら次にやることについて。HTMLやCSS、また他の様々な言語を勉強するのに、今では無料のプログラミング学習サイトが主流になってきました。ただ学習サイトは「とても親切かつ楽しくできてしまいすぎる」というのが私の見解です。それがいいことか悪いことかは置いておき、伝えたい事としては「学習サイトだけでは言語の習得は難しい」ということです。どんなに優れた学習サイトだと...
View ArticleClik here to view.
モバイルっぽいハンバーガー・メニューのテンプレ
はじめにモバイルっぽいハンバーガー・メニューのテンプレ（HTML/CSS/JS）を作ってみたスクリーンショットコードGitHubCodepenメモハンバーガーメニューを引き出す → メイン画面の幅が短くなる → テキストがあると、めっちゃ折り返す → かっこわるい →...
View Article幅可変のコンテナ内のtext-overflow(Ellipsis)について
備忘録的に。よくある左右2カラムレイアウトで、片方のメインコンテンツなどが可変幅でwidthが設定されていない場合、その子要素にcssで text-overflow: Ellipsis;...
View ArticleClik here to view.
ポートフォリオ 「FOOTBALL SHIRTS」 FWを使用せず素のPHPで制作しました。
初めにフロントエンドエンジニアを目指してプログラミングを学習しています。長田と申します。プログラミング学習のアウトプットとして自作のWebサービス「FOOTBALL SHIRTS」のポートフォリオを制作しました。この記事では「FOOTBALL...
View Article-webkit-とか-moz-とかこいつら一体何者なんだよ
はじめにあるCSSフレームワークのログイン画面を参考にしていると-webkit-というプレフィックスで始まるプロパティを見かけました。このプロパティが一体何なのか知らなかったため、調べたことをまとめてみます。この記事の対象者-webkit-や-moz-といったプレフィックスについて知らない人これらのプレフィックスが付いているCSSプロパティについて理解を深めたい人-webkit-や-moz-とは何者...
View Article【初心者でも分かる】CSSを書く場所は3箇所ある
どうも7noteです。cssを書く場所（書き方）は3つある話。cssを書く時はCSSを書ける場所が3つあります。1. HTMLのタグの中（インラインともいう）2. style要素の中3. 外部ファイル1つずつ書き方や特徴を書いていきたいと思います。またそれぞれの優先順位についても確認していきたいと思います。1. 要素のタグの中（インラインともいう）インラインの書き方タグの中にstyle="...
View ArticleClik here to view.
Hugoで黒歴史サイトを作ってもいいじゃない
本記事の内容2000年代初頭に見られた一般的な個人サイト（以下 黒歴史サイト）を再現する．具体的にはサイトを開くといきなり音楽が鳴る謎のメッセージが出る右クリックさせてくれない文字が無駄に動く文字が無駄に点滅する文字が無駄に虹色画像の縁がでかい何故か現在時刻を教えてくれる何故かUserAgentを開示されるをHugoで簡単に挿入できるshort codes, partials,...
View ArticleCSSで数学の凹凸まで含めた増減表の矢印書いてみた．
初心者CSS使いです．ネットではAKRという名前をよく使っていて，本業は予備校講師で，おいしい数学という，月間10万PV程の高校数学のサイトを運営しています．さて，web上で高校数学の内容について書くときに，数学Ⅲの凹凸まで含めた増減表を書くことがあるかもしれません．Unicodeでこれらの矢印を探すと⤴⤵⤷は見当たりますが，何故か単調増加かつ上に凸の矢印がありません！しかもこれらは環境依存なので，...
View Articleメディアクエリ〜ページ表示する画面サイズによってスタイルの設定を変える〜
SCSSをいじっている際にこいつを知らなくて不覚にもｳﾝ時間も溶かしたのでメモる。雰囲気で読んでやってください背景とやりたいことRailsのアプリケーション(SPAでない)を開発中のお話。 プレゼンテーション層はslim, scssファイルを使っているあるページにYouTuneの動画を埋め込む。これを、...
View ArticleClik here to view.
【小数点実装】「(HTML +) CSS」のみを使って、今「もっとリアルな電卓」を作ってみた
完成品まずは、CodePenで完成品を紹介します。ボタンを押して計算を試してみてください。※ スマホだとロードに時間がかかる場合がありますので、表示されるまで少々お待ちください。 See the Pen qiita_calc2_last by j5c8k6m8 (@j5c8k6m8) on CodePen. ※ ページサイズ削減のため、 上記含めて本記事のCodePenの埋め込みコードは、...
View ArticleClik here to view.
Submitボタンをクリックしたときに出る青い枠線を消す方法
htmlでSubmitボタンをクリックしたあと、ボタンに青い枠線が出しまうのを回避する方法を紹介します。クリック前クリック後cssに以下のコードを追加する#formbtn:focus{outline:0;}#formbtnはボタンのidなので、環境に合わせて変えてください。
View ArticleClik here to view.
【初心者でもわかる】自分のホームぺージにメールアドレスをそのまま載せるのは危険！
どうも7noteです。メールアドレスはエンティティ化して掲載が基本「問い合わせとかしてほしいから、メールアドレスをそのまま掲載しておこう！」ってなった場合、あなたはどうしますか？まさか、エンティティ化していないメールアドレスをホームぺージに掲載なんてしてないでしょうか？？？ホームぺージに何の対策もせずメールアドレスを掲載するのは危険！！なぜ？メールアドレスをクロールしているボットに見つかってしまうか...
View ArticleClik here to view.
【Python】Djangoプロジェクトに UIKit3 を導入する
はじめにDjangoプロジェクトにCSSフレームワークであるUIKit3を導入していきます。UIKit3UIKitは、CSSフレームワークの１つ。知名度ではBootstrapやFoundationにはやや劣るもののシンプルなデザインで人気のフレームワークです。クラス名がuk-で始まるように統一されており、他のCSSとコンフリクションが起きにくいのも良いポイントです。UIKitをダウンロードダウンロー...
View ArticleClik here to view.
プログラミング学習記録 Day1
今日からデイトラというオンラインスクールでWeb制作を勉強していきます。それに伴い学習した内容をQiitaに記録していきます。今日の学習時間1.5h (トータル1.5h)今日の学習内容デイトラWeb制作初級編 DAY1 はじめに上手に質問するためのテンプレート 1.詰まっている箇所（〇〇編DAY〇〇） 2.聞きたいことの一行まとめ...
View ArticleClik here to view.
【初心者向け】プログラミングを勉強したい！と思った時、HTMLとCSSから始めるのは適切なのか。
どうも7noteです。フロントエンジニアの見解からプログラミングをこれから始めようと思っている方向けの記事副業の解禁や働き方改革が行われる背景で、多くの方が何かしようと模索する時代に突入したように感じます。そしてインターネットやITが普及している中で、多くのサービスがあなたのスマホで簡単に利用できます。自分もこんなサービス作ってみたい！とプログラミングの勉強を始めようとしている方の参考になれば。なぜ...
View ArticleClik here to view.
BEMによるCSS設計
マークアップをはじめて一番最初に悩んでしまったことそれは クラスの命名でした。CSS設計手法はいくつかありますが、今回は BEMを採用したので記事にまとめてみます。BEMとはBlock（塊）、Element（要素）、Modifier（修飾）の略xxx.htmlこのように表します <divclass = "Block__Element--Modifier">Blockってなに？...
View ArticleClik here to view.
いまさらながら画像スライダーを作った
今までは画像スライダーを実装するのに、Swiper.jsやslickといった便利なプラグインを使っていたのですが、「プラグインを使わずに自分で作ってみよう」という急なきまぐれで以下のような画像スライダーを自分で実装してみました。ソースコードindex.html<!DOCTYPE...
View Article