フーノページ
WEBサイト 作り方。
〽️ スクロール。 〽️ flex。 〽️ replace・正規表現。 〽️ 納まり。 〽️ フォント・装飾。 〽️ 運営。 〽️ パーツ実装。 〽️ 開発環境。
こんにちは、「ふ」です。
当ページはweb制作時における「ハマりどころ」についてのまとめページです。
HTML/CSS/JavaScriptの小ワザ、その他運営や便利なwebサービスなどを紹介しています。
目次は右上↗︎のハンバーガーメニューをクリックすると開きます。
順次記事を修正・追加していくつもりです。是非参考にしてください。
JavaScript : 要素の順番を逆にする。
人気記事。
いつもアクセスをたくさんいただいている（ありがとうございます）ページです。
JavaScript : テキストのコピーボタンを実装。
CSSだけでヘッダー固定。
CSS : tableの先頭列を固定させてスクロール。
CSS:上下中央揃えはflexを使おう。
スクロール。
横方向へのスクロールや一部の要素を固定したスクロールを実装してみましょう。
CSS：横スクローーーーール！
CSS:決まった位置にスナップさせるスクロール。
JavaScriptでもスナップスクロール。
JavaScript : スクロールのインジゲータを作成。
flex。
ブロック要素の分割に便利なflexプロパティ。その使い方いろいろ。
HTML:flexboxを使ってリンクカードを作ろう。
flex-grow,flex-shrinkについて〜flexプロパティ前編。
flex-basis、flexについて〜flexプロパティ後編。
レスポンシブwebデザイン、２カラムをやってみる。replace・正規表現。
JavaScriptを使ったテキストの書き換え。
少しばかり複雑ですが、実装できればコーディングの効率化に役立ちます。
JavaScript:
JavaScript : 正規表現で一括replace。
HTML:ソースコードをページ上に貼り付ける。
JavaScript:class要素のHTMLをreplace。
JavaScript : " "で囲まれた部分のCSSを書き換える。
JavaScript:exec()メソッドについて。納まり。
画像やテキストを枠内に綺麗に納める方法について紹介しています。
CSS:親要素の形状サイズで画像をトリミング（切り抜き）、object-fit。
JavaScript/CSS: 文字数オーバーしたときに「…」で表示する。
JavaScript : 要素幅をリアルタイムに取得。
Javascript：文字数を全角/半角別にカウントしてはみ出し処理。
HTML 
margin,padding実験キット。装飾。
便利なwebサービスやCSSを使って、ページを彩りましょう。
YouTube風フォントを使ってみよう。
Google Fontsを使って統一されたフォントを表示。
CSS : filterプロパティ。複数指定、テキストへの効果などを試してみた。
ロリポップ！の取次店になりました。
webパーツ実装。
このジャンル実践的ですね。積極的に記事を追加していきたいです。
サイト記事の目次を自動作成〜JavaScript８行でOK。
開発環境。
モバイルでもっと快適にweb開発ができるといいですね。今後もっと便利な環境を探していきたいと思います。
iPadでのコーディング環境はこれなのか？Codepen。
「ふ」です。
swift、web、ガジェットなど。役立つ情報や観ていてたのしいページを書いていきたいと思います。