Clik here to view.
CSSが反映されない理由 ～背景の色は白じゃない、透明なんだ～
CSSで方眼を作るぞ！⇒縦横どちらかしか反映されない… 「HTMLページの背景を方眼紙みたいにしたいなあ」と思い、コードを書きました。 ＜理想＞ ＜最初に書いたコード ※これでは「理想」にならない＞ ・HTML(関連部分のみ抜粋) hougan.html <div id="page" style="width:100%; height:100%;"></div> ・CSS...
View ArticleClik here to view.
Vue.jsでドラッグ＆ドロップができるプレビュー機能付きフォームを実装してみた
こんなやつ 下のgif画像を見ていただければ大体わかると思います。 「画像をドラッグ＆ドロップしてそのままアップロードできたら便利だよなあ」 「しかもプレビュー機能もあったらシャレオツだよなあ」 ってことで作ってみました。 ソースコード コーディングにまだ慣れてないので、少々汚い部分もあるかと思いますが、ご了承ください。 test.html <html> <head>...
View ArticleClik here to view.
要素を中央に配置したいときのサムシング
HTMLの要素を中央に配置したいときって度々ありますよね そんなとき私がよく使用する方法を紹介します！ <div class="parent"> <div class="child"></div> </div> .parent { position: relative; } .child { position: absolute; top: 50%;...
View Article【初心者】営業から転職のために【備忘録６】
10/20～10/21での復習 上級編の実践練習 ＠media(max-width:1000px ){ ～～ } 上記のように書く際に、;を付けてしまったのが何度かあったので今のうちから変な癖がつかないように気を付ける。...
View Article【CSS】メモ
dev要素をmarginを使って中央配置にする containerというidを持つdiv要素を画面中央に置きたい場合、次の通りしていする。 margin:0 auto;で上下が0、左右がオート算出で中央に置かれる。 #container { width: 960px; height: auto; margin: 0 auto; } カーソルがリンクに当たった時浮かび上がらせる a:hover{...
View ArticleClik here to view.
セレクトボックスのCSS適用が意外に難しい
shadowが消えない ↓ クリックすると shadow がつく やりがちなCSS common.scss .select:focus { box-shadow: none; } input の場合だとこれで消えるが、 select の場合はこれじゃ消えない 実はこうです common.scss .select:focus { outline: none; } border-radius...
View ArticleClik here to view.
Ant DesignでReactを楽におしゃれにする ~セットアップ編~
はじめに Reactで何か作ろうと思ったけどデザインを一から考えるのはめんどくさいと思ったのでReactコンポーネントセットを探してみたところ気にいったのが「Ant Design」。 アリババが開発したもので、コンポーネントの種類はかなり豊富。 サンプルを見てみてもなかなか、悪くない感じのデザインでカスタマイズできる。 グリッドシステムもBootstrapと同じなのでお手軽。...
View ArticleSASSの導入に今一つ積極的になれない方へ
なぜSASSの導入を勧めたいか まだやったこともない、調べたこともない人向けです。 なぜSASSの導入を勧めたいか… それはひとえに楽だから！ それ以外に理由はないのです。 どのように楽かと言うと… 入れ子 css .moge { margin: 0 0 10px; } .moge a { font-size: 10px; } .moge a:hover { text-decoration:...
View ArticleClik here to view.
上手な装飾で「誰にでも」見やすいウェブページをつくろう
情報の多くを「文字」で伝えるウェブページですが、「文字」読みやすいですか？「ページ」見やすいですか？ この記事はフォントとフォントに関する装飾で工夫できる点を中心にまとめました。 1.フォントはどんなのがいい？利点は？方法は？ フォントは「UDフォント」というものが読みやすく、読み間違えにくいと言われています。 逆に、明朝体や飾り文字は読みにくいと感じる人が多いです。 UDフォントとは...
View ArticleClik here to view.
爆速レスポンスの「阿部寛のホームページ」を爆速でオシャレにしてみた
経緯 今っぽいfont-familyについて調査していた所、Google Fontsの日本語フォント（Noto Serif JP）に辿りつきました。実際に手持ちのコンテンツにいくつか反映してみた所、それまでと比べていとも簡単にオシャレ感がましましになり、その効果と魅力に少し感動しておりました。...
View ArticleHCJCODE - Webコーディングベース
HTML base <!DOCTYPE html> <html> <script> function demo() { var demo = document.getElementById('demo'); demo.innerHTML = 'Hello World'; } </script> <noscript>Sorry, your...
View ArticleClik here to view.
【女子受け抜群】CSS:before:after（擬似要素）で超可愛い隠れミッキー
女子受け抜群です。 page.html <label id="mickey"><span></span></label> page.css #mickey { position: relative; display: inline-block; width: 52px; height: 52px; vertical-align: middle;...
View ArticleCSSで背景を完全に透明にして、文字は表示する方法
めちゃめちゃカンタン backgroundにカラーコードではなく transparent を書くだけです。 コード .something{ background: transparent; } ※somethingは、背景を透明にしたい対象のクラス
View Article【クラス命名に迷わない】HTML、CSSのクラス名を決めるための自分用メモ
セクション、大きなまとまり hero -ヒーローイメージ about -〜についての紹介 introduction -紹介 service -サービス news -ニュース work -仕事 business -事業、業務 mission -任務、使命 concept -概要、考え、 history -歴史、沿革 event -イベント、催しのお知らせ person -人物紹介 access...
View ArticleCSSでブラーアニメーション 円がだんだんにじむ
ページを読み込むとcssで円がにじむメモです test.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8" /> <link rel="stylesheet" href="style.css"> <title>タイトル</title>...
View ArticleClik here to view.
まずはこれだけ！ HTML
まずはこれだけ！HTML 聞いたことはあるけどHTMLってなんなの？ わかりやすく解説します。 どなた向けの記事か これからプログラミングを勉強しようと思っている方。 なんとなく知ってはいるけどよくわからない方。 書いたことあるけどどう書けばいいかよくわからない方。 内容 HTMLの全体像の把握（詳しいコーディングは解説しません） Key Word 文章の構造化 HTMLの役割...
View ArticleClik here to view.
Animate.cssで間隔を調整する
少し古いのですが、最近HPを作成する仕事が入ってきました。 そこまでがんばらなくても良いのですが、少しだけ動きを付けたいということで、 Animate.cssで動きを付けました。 導入 導入は簡単。 上記サイトの「Download Animate.css」をクリックすれば、CSSが表示されるので、それをlinkタグで読み込むだけ。 <link rel="stylesheet"...
View ArticleClik here to view.
まずはこれだけ！ テキストエディタの導入！（VScode）
まずはこれだけ！ テキストエディタの導入！ Webページを書きたいんだけどテキストエディタってどうやって導入するの？ わかりやすく解説します。 （主にMac向けにお話ししますが基本的にはWindowsも変わりません） ペルソナ プログラミングをこれから勉強しようとしている方 初めてプログラミングを書こうと思っている方 内容 テキストエディタの導入（詳しいコーディングは解説しません） Key...
View ArticleネイティブHTML & CSSでいろいろやってみたシリーズ（随時更新）
ネイティブのHTMLやCSSのやったことがない技術を触ってみるシリーズ。随時更新中です！ HTML figure要素 HTML5で追加されたfigureタグは「画像」専用のタグではなく「注釈」という意味なので、画像だけでなくvideoタグなども囲おう。セマンティックなサイトになる。しかもfigureタグはCSSのdisplay: blockなのでスタイル的にも使いやすい。...
View Article